Можете ли вы использовать условия if / else в CSS?
-
13-09-2019 - |
Вопрос
Я хотел бы использовать conditions в моем CSS.
Идея заключается в том, что у меня есть переменная, которую я заменяю при запуске сайта, чтобы сгенерировать правильную таблицу стилей.
Я хочу, чтобы в соответствии с этой переменной менялась таблица стилей!
Это выглядит как:
[if {var} eq 2 ]
background-position : 150px 8px;
[else]
background-position : 4px 8px;
Можно ли это сделать?Как ты это делаешь?
Решение
Не в традиционном смысле, но вы можете использовать классы для этого, если у вас есть доступ к 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-препроцессоры, такие как Дерзость.Вы можете использовать условные обозначения там, что выглядело бы примерно так:
$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;
}
Однако в этом случае вы окажете влияние на производительность, поскольку кэширование такой таблицы стилей будет затруднено.
Другие советы
Ниже приведен мой старый ответ, который все еще актуален, но сегодня у меня более самоуверенный подход:
Одна из причин, почему CSS такой отстой, заключается именно в том, что в нем нет условного синтаксиса.CSS сам по себе полностью непригоден для использования в современном веб-стеке.Используй дерзость совсем ненадолго, и ты поймешь, почему я это говорю.SASS имеет условный синтаксис...и множество других преимуществ по сравнению с примитивным CSS тоже.
Старый ответ (все еще действительный):
Это вообще не может быть сделано в CSS!
У вас есть условия браузера, такие как:
/*[if IE]*/
body {height:100%;}
/*[endif]*/
Но никто не мешает вам использовать Javascript для изменения DOM или динамического назначения классов или даже объединения стилей на вашем соответствующем языке программирования.
Иногда я отправляю css-классы в виде строк в представление и повторяю их в подобном коде (php):
<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>
Вы могли бы создать две отдельные таблицы стилей и включить одну из них на основе результата сравнения
В одном из них вы можете поместить
background-position : 150px 8px;
В другом
background-position : 4px 8px;
Я думаю, что единственная проверка, которую вы можете выполнить в CSS, - это распознавание браузером:
Настройте сервер на синтаксический анализ css-файлов как PHP, а затем определите переменную variable с помощью простого оператора PHP.
Конечно, это предполагает, что вы используете PHP...
Вы можете использовать not вместо if нравится
.Container *:not(a)
{
color: #fff;
}
Это небольшая дополнительная информация к приведенному выше ответу Boldewyn.
Добавьте немного php-кода для выполнения if /else
if($x==1){
print "<p class=\"normal\">Text</p>\n";
} else {
print "<p class=\"active\">Text</p>\n";
}
Вы можете использовать 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;
}
Насколько я знаю, в css нет if/then/else.В качестве альтернативы, вы можете использовать функцию javascript для изменения свойства background-position элемента.
Еще один вариант (основанный на том, хотите ли вы, чтобы оператор if динамически вычислялся или нет) - использовать препроцессор C, как описано здесь.
(Да, старая тема.Но он появился поверх Google-поиска, так что другим тоже может быть интересно)
Я предполагаю, что логика if / else может быть выполнена с помощью javascript, который, в свою очередь, может динамически загружать / выгружать таблицы стилей.Я не тестировал это в разных браузерах и т.д.но это должно сработать.Это поможет вам начать:
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
Вы можете добавить контейнер 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;
}
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>
Если вы открыты для использования jquery, вы можете задавать условные операторы с помощью javascript в html:
$('.class').css("color",((Variable > 0) ? "#009933":"#000"));
Это изменит цвет текста .class
на зеленый, если значение переменной больше, чем 0
.
Вы можете использовать javascript для этой цели, таким образом:
- сначала вы устанавливаете CSS для класса 'normal' и для класса 'active'
- затем вы даете своему элементу ID "Мой элемент"
- а теперь вы создаете свое условие в 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>
Вы можете использовать php, если напишете css в теге
<style>
section {
position: fixed;
top: <?php if ($test == $tset) { echo '10px' }; ?>;
}
</style