CSS Эквивалент оператора if

Ответ 1

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

Возможно, Sass или Compass Вам интересно.

Цитата от Sass:

Сасс снова добавляет CSS. Sass - это CSS, плюс вложенные правила, переменные, mixins и т.д., Все в кратком и понятном синтаксисе.

Ответ 2

Я бы сказал, что ближе всего к "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;
}

Ответ 3

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

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

Ответ 4

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

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

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

Ответ 5

Файлы css не поддерживают условные операторы.

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

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

Ответ 6

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

Ответ 7

Я бы сказал, что вы можете использовать инструкции if в CSS. Хотя они не сформулированы как таковые. В приведенном ниже примере я сказал, что если флажок установлен, я хочу, чтобы фон был изменен на белый. Если вы хотите увидеть рабочий пример, просмотрите www.armstrongdes.com. Я построил это для клиента. Изменить размер окна, чтобы мобильная навигация заняла верх и нажмите кнопку nav. Все 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;
}

Ответ 8

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

Ответ 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, если для любых действий, которые вы хотите выполнить, но это плохая идея, так как его можно отключить.

Ответ 10

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

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

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

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

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

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

.block {
  padding: 1rem;
}

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

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