CSS переменные: значения, как их задать и использовать
Популярные запросы: тема Omnis, плагин Pagelist, Cotonti 0.9.24.2, ЧПУ, Font Face
- 1038 просмотров
- 18 ноября, 2023
- Обновлено: 18 ноября, 2023
- admin
- Время чтения: 3 минуты
- 2 (Подробно)
К использованию CSS-переменных я так и не пришел, поскольку имплементация LESS произошла раньше, чем нативное использование переменных было реализовано без ограничений всеми браузерами. Тем не менее, понимание и навык их использования без сторонних препроцессоров необходим каждому, кто имеет дело с версткой сайтов.
Фактически, CSS-переменные представляют собой кастомные свойства, которые каскадируются и наследуются как и стандартные.
Вполне привычным является тот факт, что переменные CSS могут быть глобальными и локальными. Использовать их просто:
1 2 3 4 5 6 7 8 |
// Глобальная CSS переменная :root { --textcolor: #000 ; } // Локальная CSS-переменная div. block { --textcolor: #666 ; } |
Как видим, для объявления глобальной переменной ее необходимо поместить в контейнер :root. Локальные переменные объявляются внутри соответствующих контейнеров.
Как использовать CSS переменные
Использование переменных в CSS-коде также не вызовет особых сложностей. Сделать это можно с помощью функции var():
1 2 3 4 5 |
:root { --back: #090 ; } … background : var(--back, green ); |
Как видим, у нее два аргумента: второй используется в качестве резервного на случай если не определен первый. Большинство сложностей у верстальщиков возникает именно с пониманием очередности применения аргументов при различных условиях. Именно этот момент мы и рассмотрим.
Вариантов может быть четыре:
- Браузер не поддерживает CSS-переменные. В этом случае для фона будет использовано значение green.
- Если браузер поддерживает CSS-переменные, и --back определено, в качестве фона использован будет именно этот цвет (#090).
- Если браузер поддерживает CSS-переменные, а --back не определено, будет использовано резервное значение green,
- Если браузер поддерживает CSS-переменные, а --back определено, но имеет некорректное значение, фон не будет определен вообще.
Четвертый вариант ожидаемо вызовет наибольшее непонимание. По логике вещей, должно сработать fallback-значение green, ведь это будет так если мы используем последовательность
1 2 |
background : green ; background : reen; |
Поскольку второе значение браузер не поймет, фон будет иметь стандартный цвет green. Однако есть один важный момент: в последнем примере значение ‘reen’ браузер отвергнет во время парсинга. Если же будет использована переменная, она “перекроет” предыдущее значение, так что при парсинге альтернатива существовать не будет, и при нелегитимном значении будет использовано значение по умолчанию, т. е. transparent.
Поддержка CSS переменных браузерами
Сегодня все браузеры с последними обновлениями поддерживают CSS-переменные. Если же вам необходимо “пуленепробиваемое” решение, необходимо использовать feature queries:
1 2 3 4 5 |
html { color : red ; } … @supports (--css: variables) { html { color : black ; } } |
Конструкция правильная, но слегка неуклюжая: нам приходится по умолчанию использовать стили для “устаревших” браузеров. Конечно, можно так:
1 2 3 4 5 |
html { color : black ; } … @supports not (--css: variables) { html { color : red ; } } |
Но в этом случае исключение будет сделано для браузеров, которые:
- Поддерживают feature queries
- Не поддерживают CSS-переменные
В нашем случае это не совсем то, что необходимо – количество таких браузеров сегодня ничтожно мало. Так что проще полагать, что переменные CSS поддерживаются всеми браузерами.
Выводы и заключение
Несмотря на свою актуальность, CSS-переменные даже в настоящее время плохо понимаются и редко используются. Причина состоит в том, что такие CSS-препроцессоры, как SASS/SCSS и LESS, ушли далеко вперед в реализации схожего функционала. Но это только одна сторона медали: декларативные CSS переменные и их реализация в препроцессорах серьезно различаются. Мы обсудим это в отдельной статье, а на сегодня это все. Надеемся, что сегодняшняя публикация поможет вам верстать более продуктивно!
Новый комментарий