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

Question

Можно ли использовать условные выражения в CSS?

Answer 1

Нет. Но можете ли вы привести пример, что вы имеете в виду? Что Состояние Вы хотите проверить?

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

Цитата Sass:

Sass делает CSS удовольствие снова. Sass - это CSS, плюс вложенные правила, переменные, mixins и т. Д., Все в сжатом, читаемом синтаксисе.

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

Нет, вы не можете сделать, если в 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 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.

Answer 7

Я бы сказал, что самое близкое к «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 8

Я бы сказал, что вы можете использовать, если заявления в 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; 
} 

Answer 9

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

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

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

Answer 10

CSS сама не имеет условных операторов, но вот a hack involving custom properties (ака «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 это в .is-big или это потомок одного будет иметь отступы 4rem, в то время как все остальные блоки будут иметь только 1rem. Теперь я называю это «тривиальным» примером, потому что это можно сделать без взлома.

.block { 
    padding: 1rem; 
} 

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

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