Можете ли вы использовать условия if / else в CSS? - PullRequest
Новая
       20

Можете ли вы использовать условия if / else в CSS?

100 голосов
/ 15 июля 2009

Я хотел бы использовать условия в моем CSS.

Идея состоит в том, что у меня есть переменная, которую я заменяю при запуске сайта для создания правильной таблицы стилей.

Я хочу, чтобы в соответствии с этой переменной менялась таблица стилей!

Похоже: 

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px;

Можно ли это сделать? Как ты это делаешь?

Ответы [ 15 ]

116 голосов
/ 15 июля 2009

Не в традиционном смысле, но вы можете использовать классы для этого, если у вас есть доступ к HTML. Учтите это: 

<p class="normal">Text</p>

<p class="active">Text</p>

и в вашем файле CSS: 

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

Это CSS способ сделать это.

Тогда есть CSS-препроцессоры, такие как Sass . Вы можете использовать условные выражения , которые выглядят так: 

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Недостатком является то, что вы обязаны предварительно обработать таблицы стилей и условие оценивается во время компиляции, а не во время выполнения.

Новая функция собственно CSS: пользовательские свойства (переменные CSS). Они оцениваются во время выполнения (в поддерживаемых ими браузерах).

С ними вы могли бы сделать что-то вроде: 

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Наконец, вы можете предварительно обработать вашу таблицу стилей на вашем любимом серверном языке. Если вы используете PHP, подайте файл style.css.php, который выглядит примерно так: 

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

В этом случае вы, однако, окажете влияние на производительность, поскольку кэширование такой таблицы стилей будет затруднено.

15 голосов
/ 15 июля 2009

Ниже мой старый ответ, который все еще действителен, но сегодня у меня более взвешенный подход:

Одна из причин, почему CSS так много отстой, заключается в том, что он не имеет условного синтаксиса. CSS как таковой совершенно непригоден в современном веб-стеке. Используйте SASS ненадолго, и вы поймете, почему я так говорю. SASS имеет условный синтаксис ... и множество других преимуществ по сравнению с примитивным CSS.

Старый ответ (все еще действителен):

Это вообще невозможно сделать в CSS!

У вас есть браузер, такие как: 

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

Но никто не мешает вам использовать Javascript для изменения DOM или динамического назначения классов или даже объединения стилей в соответствующем языке программирования.

Я иногда отправляю классы CSS в виде строк в представление и выводит их в код, подобный этому (php): 

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>
8 голосов
/ 15 июля 2009

Вы можете создать две отдельные таблицы стилей и включить одну из них на основе результата сравнения

В один из вы можете положить 

background-position : 150px 8px;

В другой 

background-position : 4px 8px;

Я думаю, что единственная проверка, которую вы можете выполнить в CSS - это распознавание браузера:

Условный-CSS

6 голосов
/ 15 июля 2009

Настройте сервер на синтаксический анализ файлов CSS как PHP, а затем определите переменную переменной с помощью простого оператора PHP.

Конечно, это предполагает, что вы используете PHP ...

5 голосов
/ 25 июня 2014

Вы можете использовать не вместо, если как 

.Container *:not(a)
{
    color: #fff;
}
4 голосов
/ 20 декабря 2017

Вы можете использовать calc() в сочетании с var() для сортировки условных условий: 

:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}

Концепция

4 голосов
/ 15 июля 2009

Это небольшая дополнительная информация к ответу Болдевина выше.

Добавьте код php, чтобы сделать if / else 

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}
3 голосов
/ 03 марта 2015

Вы можете добавить контейнерный div для всей области ваших условий.

Добавить значение условия в качестве класса в контейнер div. (вы можете установить его с помощью программирования на стороне сервера - php / asp ...) 

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

Теперь вы можете использовать контейнерный класс в качестве глобальной переменной для всех элементов в div, используя вложенный селектор, без добавления класса к каждому элементу. 

.true-value p{
   backgrounf-color:green;
}
.false-value p{
   backgrounf-color:red;
}
3 голосов
/ 25 февраля 2010

(Да, старая ветка. Но она появилась поверх поисковой системы Google, так что другие могут быть заинтересованы)

Я предполагаю, что логика if / else может быть реализована с помощью javascript, который, в свою очередь, может динамически загружать / выгружать таблицы стилей. Я не проверял это в браузерах и т. Д., Но это должно работать. Это поможет вам начать:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

3 голосов
/ 15 июля 2009

Еще один вариант (в зависимости от того, хотите ли вы, чтобы оператор if был динамически оценен или нет) - использовать препроцессор C, как описано здесь .

Страница:
...