Я хотел бы использовать условия в моем CSS.
Идея в том, что у меня есть переменная, которую я заменяю при запуске сайта для создания правильной таблицы стилей.
Я хочу, чтобы по этой переменной менялась таблица стилей!
Это выглядит как:
[if {var} eq 2 ]
background-position : 150px 8px;
[else]
background-position : 4px 8px;
Это можно сделать? Как ты делаешь это?
css
stylesheet
conditional-statements
Хаим Евги
источник
источник
Ответы:
Не в традиционном смысле, но вы можете использовать для этого классы, если у вас есть доступ к HTML. Учти это:
и в вашем файле CSS:
Это способ CSS .
Затем есть препроцессоры CSS, такие как Sass . Вы можете использовать условные там, which'd выглядеть следующим образом :
Недостатки в том, что вы обязаны предварительно обрабатывать свои таблицы стилей, и что условие оценивается во время компиляции, а не во время выполнения.
Самая новая функция CSS - это настраиваемые свойства (также известные как переменные CSS). Они оцениваются во время выполнения (в поддерживающих их браузерах).
С ними вы можете сделать что-нибудь в этом роде:
Наконец, вы можете предварительно обработать свою таблицу стилей на своем любимом серверном языке. Если вы используете PHP, предоставьте
style.css.php
файл, который выглядит примерно так:Однако в этом случае у вас будет влияние на производительность, поскольку кэширование такой таблицы стилей будет затруднено.
источник
Ниже приведен мой старый ответ, который все еще актуален, но сегодня у меня более категоричный подход:
Одна из причин, по которой CSS такой отстой, как раз и состоит в том, что в нем нет условного синтаксиса. CSS сам по себе совершенно непригоден для использования в современном веб-стеке. Используйте SASS ненадолго, и вы поймете, почему я так говорю. SASS имеет условный синтаксис ... а также МНОЖЕСТВО других преимуществ перед примитивным CSS.
Старый ответ (еще действующий):
Это вообще невозможно сделать в CSS!
У вас есть такие условия браузера, как:
Но никто не мешает вам использовать Javascript для изменения модели DOM, динамического назначения классов или даже объединения стилей на вашем соответствующем языке программирования.
Иногда я отправляю классы css в виде строк в представление и повторяю их в таком коде (php):
источник
Вы можете использовать
calc()
в сочетании сvar()
для имитации условных выражений:концепция
источник
Вы можете создать две отдельные таблицы стилей и включить одну из них на основе результата сравнения.
В один из них можно положить
В другом
Я думаю, что единственная проверка, которую вы можете выполнить в CSS, - это распознавание браузера:
Условный-CSS
источник
Я удивлен, что никто не упомянул псевдоклассы CSS, которые также являются своего рода условными выражениями в CSS. С ним вы можете делать довольно сложные вещи без единой строчки JavaScript.
Некоторые псевдоклассы:
Пример:
источник
Настройте сервер для анализа файлов css как PHP, а затем определите переменную variable с помощью простого оператора PHP.
Конечно, это предполагает, что вы используете PHP ...
источник
@import url('dynamic.css.php')
.Вы можете использовать not вместо if like
источник
Насколько я знаю, в css нет if / then / else. В качестве альтернативы вы можете использовать функцию javascript для изменения свойства background-position элемента.
источник
Еще один вариант (в зависимости от того, хотите ли вы, чтобы оператор if выполнялся динамически или нет) - использовать препроцессор C, как описано здесь .
источник
(Да, старая ветка. Но она появилась поверх результатов поиска в Google, так что другие тоже могут быть заинтересованы)
Я предполагаю, что логика if / else может быть выполнена с помощью javascript, который, в свою очередь, может динамически загружать / выгружать таблицы стилей. Я не тестировал это в браузерах и т. Д., Но он должен работать. Это поможет вам начать:
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
источник
Это небольшая дополнительная информация к ответу Болдевина выше.
Добавьте код php, чтобы выполнить if / else
источник
Вы можете добавить контейнер div для всей области вашего условия.
Добавьте значение условия как класс в контейнер div. (можно установить программированием на стороне сервера - php / asp ...)
Теперь вы можете использовать класс контейнера в качестве глобальной переменной для всех элементов в div с помощью вложенного селектора, не добавляя класс к каждому элементу.
источник
Вы можете использовать для этой цели javascript следующим образом:
источник
CSS - это хорошо спроектированная парадигма, и многие ее функции мало используются.
Если под условием и переменной вы подразумеваете механизм для распределения изменения некоторого значения по всему документу или в области действия какого-либо элемента, то вот как это сделать:
Таким образом, вы распределяете влияние переменной по стилям CSS. Это похоже на то, что предлагают @amichai и @SeReGa, но более универсально.
Другой такой трюк - распределить идентификатор какого-либо активного элемента по всему документу, например, снова при выделении меню: (используется синтаксис Freemarker)
Конечно, это практично только с ограниченным набором элементов, таких как категории или состояния, а не с неограниченными наборами, такими как товары электронного магазина, иначе сгенерированный CSS был бы слишком большим. Но это особенно удобно при создании статических офлайн-документов.
Еще одна уловка для создания «условий» с помощью CSS в сочетании с платформой генерации:
источник
Если вы открыты для использования jquery, вы можете установить условные операторы с помощью javascript внутри html:
Это изменит цвет текста
.class
на зеленый, если значение переменной больше, чем0
.источник
просто сделайте это в html, используя тернарный оператор, а не иначе
class = "{{условие? 'class1': 'class2'}}"
или
[ngClass] = "условие? 'class1': 'class2'"
источник
Вы можете использовать php, если вы пишете css в теге
источник