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


120

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

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

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

Это выглядит как:

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

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


Что, черт возьми, вы пытаетесь сделать, чтобы использовать условные выражения CSS?
Sapphire_Brick

Ответы:


138

Не в традиционном смысле, но вы можете использовать для этого классы, если у вас есть доступ к 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 . Вы можете использовать условные там, which'd выглядеть следующим образом :

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

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


11
Хороший ответ, я просто хочу добавить один момент относительно кеширования: поскольку браузеры кешируют таблицы стилей и обычно не загружают их повторно для каждой страницы, трудно полагаться на "динамические" таблицы стилей, сгенерированные PHP / [язык программирования по выбору] , Это не так, как должно работать. Если вам нужно изменить CSS, вы, конечно, можете встроить его на страницу, но это начинает противоречить разделению содержимого / представления.
deceze

3
Что касается того, что сказал Deceze, это не значит, что у вас не может быть динамически изменяющегося веб-сайта. Таблицы стилей могут оставаться статическими, и вы можете изменять классы элементов с помощью javascript с jquery или PHP или без него, так что стили элементов могут изменяться.
csga5000

а как насчет того, чтобы стилизовать полосы прокрутки? (вы не можете найти :: - webkit-scrollbar-button в html)
Джерри

Гм, да? Что насчет этого? Переменные Sass, CSS и обработка на стороне сервера не зависят от HTML. Или мне что-то здесь не хватает?
Boldewyn 01

15

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

Одна из причин, по которой 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>

14
Удивлен, что никто не указал, что этого условного синтаксиса нет в CSS. Условные комментарии существуют только в HTML.
BoltClock

12

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

концепция


8

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

В один из них можно положить

background-position : 150px 8px;

В другом

background-position : 4px 8px;

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

Условный-CSS


8

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

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

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

Пример:

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


6

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

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


2
Вы можете заменить «PHP» на «Ваш язык программирования или шаблонов по своему выбору»
Квентин

1
Проблема в том, что если ваш CSS составляет 50 КБ, и вы меняете только несколько значений, не лучше ли быть статическим и кешированным?
Alex

2
да, но вы можете извлечь части, которые нуждаются в динамике, и повторно включить их через @import url('dynamic.css.php').
Boldewyn

Это зависит от условий. Если они стабильны для каждого пользователя, вы можете вывести обычные заголовки управления кешем.
Quentin

5

Вы можете использовать not вместо if like

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

3

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


3

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


3

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

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

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


3

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

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

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

3

Вы можете добавить контейнер 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{
   background-color:green;
}
.false-value p{
   background-color:red;
}

2

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

  1. сначала вы устанавливаете CSS для «нормального» класса и для «активного» класса
  2. затем вы даете своему элементу идентификатор MyElement
  3. и теперь вы создаете свое условие в 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>


2

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>

Таким образом, вы распределяете влияние переменной по стилям CSS. Это похоже на то, что предлагают @amichai и @SeReGa, но более универсально.

Другой такой трюк - распределить идентификатор какого-либо активного элемента по всему документу, например, снова при выделении меню: (используется синтаксис Freemarker)

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;
<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>
<body>
<div class="menuItem"></div>
</body>

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

Еще одна уловка для создания «условий» с помощью CSS в сочетании с платформой генерации:

.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}
<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>


1

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

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

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


-1

просто сделайте это в html, используя тернарный оператор, а не иначе

class = "{{условие? 'class1': 'class2'}}"

или

[ngClass] = "условие? 'class1': 'class2'"


-2

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

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.