Я хотел бы использовать условия в моем 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, такие как Sass. Вы можете использовать условные условия, который будет выглядеть следующим образом:
$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 a.k.a.). Они оцениваются во время выполнения (в браузерах, поддерживающих их).
С ними вы можете что-то сделать по линии:
: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 только немного, и вы поймете, почему я так говорю. 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, а затем определите переменную переменной с помощью простого оператора PHP.
Конечно, предполагается, что вы используете PHP...
Вы можете использовать не вместо, если хотите
.Container *:not(a)
{
color: #fff;
}
Вы можете использовать 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;
}
Это немного дополнительная информация для ответа Boldewyn выше.
Добавьте некоторый php-код, чтобы сделать if/else
if($x==1){
print "<p class=\"normal\">Text</p>\n";
} else {
print "<p class=\"active\">Text</p>\n";
}
Насколько я знаю, в css нет if/then/else. Кроме того, вы можете использовать функцию javascript для изменения свойства background-position элемента.
Еще один вариант (в зависимости от того, хотите ли вы, чтобы оператор if был динамически оценен или нет) должен использовать препроцессор C, как описано здесь.
(Да, старый поток, но он появился поверх Google-поиска, чтобы другие могли быть заинтересованы также)
Я предполагаю, что if/else-logic может быть выполнена с помощью 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>Если вы открыты для использования jquery, вы можете установить условные операторы, используя javascript внутри html:
$('.class').css("color",((Variable > 0) ? "#009933":"#000"));
Это изменит цвет текста .class на зеленый, если значение переменной больше, чем 0.
Вы можете использовать javascript для этой цели, следующим образом:
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>Я удивлен, что никто не упомянул псевдоклассы CSS, которые также являются своего рода условными выражениями в CSS. С этим можно сделать довольно сложные вещи без единой строчки JavaScript.
Некоторые псевдоклассы:
Пример:
div { color: white; background: red }
input:checked + div { background: green }<input type=checkbox>Click me!
<div>Red or green?</div>Вы можете использовать PHP, если вы пишете CSS в теге
<style>
section {
position: fixed;
top: <?php if ($test == $tset) { echo '10px' }; ?>;
}
</style