CSS-эквивалент выражения "if"

Question

Есть ли способ использовать условные операторы в CSS?

Answer 1

Я бы сказал, что ближе всего к «IF» в CSS относятся медиазапросы, например те, которые вы можете использовать для адаптивного дизайна. С помощью медиа-запросов вы говорите что-то вроде: «Если экран имеет ширину от 440 до 660 пикселей, сделайте это». Подробнее о медиазапросах читайте здесь: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp, и вот пример того, как они выглядят:

@media screen and (max-width: 300px) {
  body {
     background-color: lightblue;
  }
}

Это в значительной степени степень «IF» в CSS, за исключением перехода к SASS / SCSS (как упоминалось выше).

Я думаю, что вам лучше всего изменить свои классы / идентификаторы на языке сценариев, а затем обработать каждый из вариантов классов / идентификаторов в вашем CSS. Например, в PHP это может быть что-то вроде:

<?php
  if( A > B ){
echo '<div class="option-a">';
} 
    else{
echo '<div class="option-b">';
}
?>

Тогда ваш CSS может быть как

.option-a {
background-color:red;
}
.option-b {
background-color:blue;
}

Answer 2

Нет. Но можете ли вы привести пример того, что вы имеете в виду? Какое состояние вы хотите проверить?

Возможно Sass или Компас интересны для вас.

Цитата из Sass:

Sass снова делает CSS забавным. Sass - это CSS, а также вложенные правила, переменные, миксины и многое другое в сжатом, читабельном синтаксисе.

Answer 3

Единственными условиями, доступными в CSS, являются селекторы и @ media .Некоторые браузеры поддерживают некоторые из CSS 3-селекторов и медиа-запросов .

Вы можете изменить элемент с помощью JavaScript, чтобы изменить его, если он соответствует селектору или нет (например, с помощьюдобавление нового класса).

Answer 4

Правило @ поддерживает правило (92% браузер поддерживает июль 2017 г.). Правило можно использовать для условной логики в свойствах css:

@supports (display: -webkit-box) {
    .for_older_webkit_browser { display: -webkit-box }
}

@supports not (display: -webkit-box) {
    .newer_browsers { display: flex } 
}

Answer 5

Я бы сказал, что вы можете использовать операторы if в CSS. Хотя они не сформулированы как таковые. В приведенном ниже примере я сказал, что если флажок установлен, я хочу, чтобы фон был изменен на белый. Если вы хотите увидеть рабочий пример, проверьте www.armstrongdes.com . Я построил это для клиента. Измените размер своего окна, чтобы мобильная навигация вступила во владение, и нажмите кнопку навигации. Все CSS. Я думаю, можно с уверенностью сказать, что эта концепция может быть использована для многих вещей.

     #sidebartoggler:checked + .page-wrap .hamb {
        background: #fff;
      }

// example set as if statement sudo code.

if (sidebaretoggler is checked == true) {
set the background color of .hamb to white;
}

Answer 6

Нет встроенного IF / ELSE для CSS. CSS препроцессоры, такие как SASS (и Compass), могут помочь, но если вы ищете более специфичные условия для условий if / else, вам следует попробовать Modernizr . Он обнаруживает объекты, а затем добавляет классы в элемент HTML, чтобы указать, какие функции CSS3 и HTML5 поддерживает и не поддерживает браузер. Затем вы можете написать очень if / else-like CSS прямо в вашем CSS без какой-либо предварительной обработки, например так:

.geolocation #someElem {
   /* only apply this if the browser supports Geolocation */
}
.no-geolocation #someElem {
   /* only apply this if the browser DOES NOT support Geolocation */
}

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

#someElem {
   /* default styles, suitable for both Geolocation support and lack thereof */
}
.geolocation #someElem {
   /* only properties as needed to overwrite the default styling  */
}

Обратите внимание, что Modernizr использует JavaScript, поэтому, если JS отключен, вы ничего не получите. Отсюда и постепенный подход к совершенствованию #someElem в первую очередь как основа no-js.

Answer 7

CSS-файлы не поддерживают условные операторы.

Если вы хотите, чтобы что-то выглядело одним из двух способов, в зависимости от каких-либо условий, создайте для него подходящий класс, используя язык сценариев на стороне сервера или javascript. например,

<div class="oh-yes"></div>
<div class="hell-no"></div>

Answer 8

Сам по себе CSS не имеет условных операторов, но вот хак с использованием пользовательских свойств (a.k.a. "переменные css").

В этом тривиальном примере вы хотите применить заполнение, основанное на определенном условии - например, в операторе "if".

:root   { --is-big: 0; }

.is-big { --is-big: 1; }

.block {
  padding: calc(
    4rem * var(--is-big) +
    1rem * (1 - var(--is-big))
  );
}

Так что любой .block, который является .is-big или потомком единицы, будет иметь заполнение 4rem, в то время как все остальные блоки будут иметь только 1rem. Теперь я называю это «тривиальным» примером, потому что это можно сделать без взлома.

.block {
  padding: 1rem;
}

.is-big .block,
.block.is-big {
  padding: 4rem;
}

Но я оставлю его приложения вашему воображению.

Answer 9

Нет, вы не можете сделать это в CSS, но вы можете выбрать, какую таблицу стилей вы будете использовать

Вот пример:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

будет использовать только для IE 6, вот веб-сайт, откуда он http://www.quirksmode.org/css/condcom.html, только IE имеет условные комментарии. Другие браузеры этого не делают, хотя есть некоторые свойства, которые вы можете использовать для Firefox, начиная с -moz, или для сафари, начиная с -webkit. Вы можете использовать JavaScript, чтобы определить, какой браузер вы используете, и использовать JavaScript, если для каких-либо действий вы хотите выполнить, но это плохая идея, поскольку его можно отключить.

Answer 10

Ваша таблица стилей должна рассматриваться как статическая таблица доступных переменных, которые ваш HTML-документ может вызывать в зависимости от того, что вам нужно отобразить. Логика должна быть в вашем javascript и html, используйте javascript для динамического применения атрибутов на основе условий, если вам это действительно нужно. Таблицы стилей не место для логики.