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

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

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

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

Похоже:

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

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

Ответ 1

Не в традиционном смысле, но вы можете использовать для этого классы, если у вас есть доступ к 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 a.k.a.). Они оцениваются во время выполнения (в браузерах, поддерживающих их).

С ними вы можете что-то сделать по линии:

: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;
}

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

Ответ 2

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

Одна из причин, почему 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>

Ответ 3

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

В одном из них вы можете поставить

background-position : 150px 8px;

В другом

background-position : 4px 8px;

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

Conditional-CSS

Ответ 4

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

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

Ответ 5

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

.Container *:not(a)
{
    color: #fff;
}

Ответ 6

Вы можете использовать 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;
}

концепция

Ответ 7

Это немного дополнительная информация для ответа Boldewyn выше.

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

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}

Ответ 8

Насколько я знаю, в css нет if/then/else. Кроме того, вы можете использовать функцию javascript для изменения свойства background-position элемента.

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

Вы можете добавить контейнер 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;
}

Ответ 12

CSS - это хорошо спроектированная парадигма, и многие из ее функций мало используются.

Если по условию и переменной вы имеете в виду механизм распространения изменения какого-либо значения на весь документ или в рамках какого-то элемента, то вот как это сделать:

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");
body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}
<body>
<div class="menuItem"></div>
</body>

Ответ 13

Если вы открыты для использования jquery, вы можете установить условные операторы, используя javascript внутри html:

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

Это изменит цвет текста .class на зеленый, если значение переменной больше, чем 0.

Ответ 14

Вы можете использовать javascript для этой цели, следующим образом:

  • сначала вы устанавливаете CSS для класса "normal" и для "активного" класса
  • то вы передаете элементу id "MyElement"
  • и теперь вы делаете свое условие в JavaScript, что-то вроде примера ниже... (вы можете запустить его, изменить значение myVar на 5, и вы увидите, как он работает)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}
.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }
<div id="MyElement">
  
  </div>

Ответ 15

Я удивлен, что никто не упомянул псевдоклассы CSS, которые также являются своего рода условными выражениями в CSS. С этим можно сделать довольно сложные вещи без единой строчки JavaScript.

Некоторые псевдоклассы:

  • : active - щелкает ли элемент?
  • : флажок - Радио/флажок/опция отмечены? (Это позволяет использовать условный стиль с помощью флажка!)
  • : empty - Элемент пуст?
  • : fullscreen - находится ли документ в полноэкранном режиме?
  • : focus - У элемента есть фокус клавиатуры?
  • : focus-Within - Есть ли у элемента или его дочерних элементов фокус клавиатуры?
  • : has ([selector]) - Содержит ли элемент дочерний элемент, который соответствует [selector]? (К сожалению, не поддерживается ни одним из основных браузеров.)
  • : hover - Наведите курсор мыши на этот элемент?
  • : in-range/: out-of-range - Находится ли входное значение между/вне минимального и максимального пределов?
  • : invalid/: valid - элемент формы имеет недопустимое/допустимое содержимое?
  • : ссылка - это не посещенная ссылка?
  • : not() - инвертировать селектор.
  • : target - Является ли этот элемент целевым для фрагмента URL-адреса?
  • : посещения - посетил ли пользователь эту ссылку раньше?

Пример:

div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>

Ответ 16

Вы можете использовать PHP, если вы пишете CSS в теге

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style