CSS переменные: значения, как их задать и использовать
- 916 просмотров
- 18 ноября, 2023
- Обновлено: 18 ноября, 2023
- admin
- Время чтения: 3 минуты
- 2 (Подробно)
![CSS переменные и их использование в HTML-верстке](pics/thumbs/102/img-102-966x644-crop.jpg)
К использованию CSS-переменных я так и не пришел, поскольку имплементация LESS произошла раньше, чем нативное использование переменных было реализовано без ограничений всеми браузерами. Тем не менее, понимание и навык их использования без сторонних препроцессоров необходим каждому, кто имеет дело с версткой сайтов.
Фактически, CSS-переменные представляют собой кастомные свойства, которые каскадируются и наследуются как и стандартные.
Вполне привычным является тот факт, что переменные CSS могут быть глобальными и локальными. Использовать их просто:
// Глобальная CSS переменная :root { --textcolor: #000; } // Локальная CSS-переменная div.block { --textcolor: #666; }
Как видим, для объявления глобальной переменной ее необходимо поместить в контейнер :root. Локальные переменные объявляются внутри соответствующих контейнеров.
Как использовать CSS переменные
Использование переменных в CSS-коде также не вызовет особых сложностей. Сделать это можно с помощью функции var():
:root { --back: #090; } … background: var(--back, green);
Как видим, у нее два аргумента: второй используется в качестве резервного на случай если не определен первый. Большинство сложностей у верстальщиков возникает именно с пониманием очередности применения аргументов при различных условиях. Именно этот момент мы и рассмотрим.
Вариантов может быть четыре:
- Браузер не поддерживает CSS-переменные. В этом случае для фона будет использовано значение green.
- Если браузер поддерживает CSS-переменные, и --back определено, в качестве фона использован будет именно этот цвет (#090).
- Если браузер поддерживает CSS-переменные, а --back не определено, будет использовано резервное значение green,
- Если браузер поддерживает CSS-переменные, а --back определено, но имеет некорректное значение, фон не будет определен вообще.
Четвертый вариант ожидаемо вызовет наибольшее непонимание. По логике вещей, должно сработать fallback-значение green, ведь это будет так если мы используем последовательность
background: green; background: reen;
Поскольку второе значение браузер не поймет, фон будет иметь стандартный цвет green. Однако есть один важный момент: в последнем примере значение ‘reen’ браузер отвергнет во время парсинга. Если же будет использована переменная, она “перекроет” предыдущее значение, так что при парсинге альтернатива существовать не будет, и при нелегитимном значении будет использовано значение по умолчанию, т. е. transparent.
Поддержка CSS переменных браузерами
Сегодня все браузеры с последними обновлениями поддерживают CSS-переменные. Если же вам необходимо “пуленепробиваемое” решение, необходимо использовать feature queries:
html { color: red; } … @supports (--css: variables) { html { color: black; } }
Конструкция правильная, но слегка неуклюжая: нам приходится по умолчанию использовать стили для “устаревших” браузеров. Конечно, можно так:
html { color: black; } … @supports not (--css: variables) { html { color: red; } }
Но в этом случае исключение будет сделано для браузеров, которые:
- Поддерживают feature queries
- Не поддерживают CSS-переменные
В нашем случае это не совсем то, что необходимо – количество таких браузеров сегодня ничтожно мало. Так что проще полагать, что переменные CSS поддерживаются всеми браузерами.
Выводы и заключение
Несмотря на свою актуальность, CSS-переменные даже в настоящее время плохо понимаются и редко используются. Причина состоит в том, что такие CSS-препроцессоры, как SASS/SCSS и LESS, ушли далеко вперед в реализации схожего функционала. Но это только одна сторона медали: декларативные CSS переменные и их реализация в препроцессорах серьезно различаются. Мы обсудим это в отдельной статье, а на сегодня это все. Надеемся, что сегодняшняя публикация поможет вам верстать более продуктивно!
Новый комментарий