CSS-переменные¶
CSS-переменные (также известные как кастомные свойства, custom properties) — это сущности, определённые автором CSS, которые содержат конкретные значения, подлежащие повторному использованию во всём документе. Они задаются с помощью префикса -- (например, --main-color: #333) и извлекаются через функцию var(). В отличие от переменных препроцессоров (Sass, Less), CSS-переменные являются нативными, работают в реальном времени в браузере и поддерживают каскадность, наследование и динамическое изменение через JavaScript.
¶История и стандартизация
Идея переменных в CSS обсуждалась с начала 2000-х годов, но долгое время не была реализована из-за сложностей с каскадной природой языка. Первая рабочая черновик спецификации CSS Custom Properties for Cascading Variables Module Level 1 появился в 2012 году. В 2015 году технология была включена в черновик CSS3, а в 2016 году получила поддержку в основных браузерах (Chrome 49, Firefox 31, Safari 9.1, Edge 15). В 2021 году спецификация достигла статуса Candidate Recommendation. На 2025 год CSS-переменные поддерживаются всеми современными браузерами, включая Internet Explorer 11 (частично, через полифиллы).
¶Синтаксис и объявление
CSS-переменные объявляются внутри селектора, чаще всего в псевдоклассе :root, что делает их глобальными для всего документа. Синтаксис: --имя-переменной: значение;. Имя переменной чувствительно к регистру, может содержать буквы, цифры, дефисы и подчёркивания. Значением может быть любое допустимое CSS-значение: цвет, число, строка, длина, функция, а также несколько значений, разделённых пробелами или запятыми.
Пример: ``css :root { --primary-color: #3498db; --base-padding: 16px; --font-stack: 'Helvetica', Arial, sans-serif; } ``
¶Функция var()
Для использования переменной применяется функция var(), которая принимает два аргумента:
- имя переменной (обязательно);
- резервное значение (опционально), которое используется, если переменная не определена или невалидна.
Синтаксис: var(--имя, резервное-значение).
Пример: ``css body { color: var(--primary-color, #000); padding: var(--base-padding, 8px); } ``
¶Область видимости и каскад
CSS-переменные подчиняются правилам каскада и наследования. Переменная, объявленная в селекторе, доступна внутри этого селектора и всем его потомкам. Если переменная не определена для конкретного элемента, браузер ищет её в родительских элементах вверх по дереву DOM. Если переменная не найдена нигде, используется резервное значение, указанное в var(), или значение по умолчанию (inherit/initial).
Пример: ``css .container { --bg-color: lightblue; } .container .item { background-color: var(--bg-color); / применится lightblue / } ``
¶Валидность и обработка значений
CSS-переменные могут содержать любые значения, но при подстановке через var() браузер проверяет, соответствует ли итоговое значение грамматике свойства. Если значение невалидно (например, строка для свойства color), свойство игнорируется, и применяется значение по умолчанию (inherit/initial), а не резервное. Это отличает CSS-переменные от препроцессорных, где ошибки могут приводить к поломке всего стиля.
¶Изменение через JavaScript
Одно из ключевых преимуществ CSS-переменных — возможность динамически изменять их значения через JavaScript, что позволяет управлять стилями без перезагрузки страницы. Для этого используются методы style.setProperty() и style.getPropertyValue().
Пример: ``javascript document.documentElement.style.setProperty('--primary-color', '#e74c3c'); let currentColor = getComputedStyle(document.documentElement).getPropertyValue('--primary-color'); ``
¶Применение
¶Темизация и переключение тем
CSS-переменные широко используются для создания светлых и тёмных тем. Достаточно определить набор переменных в :root и переопределить их в классе .dark-theme. Применение класса к элементу <html> или <body> меняет все цвета на странице без перезаписи каждого селектора.
Пример: ``css :root { --bg: #fff; --text: #000; } .dark-theme { --bg: #222; --text: #eee; } body { background: var(--bg); color: var(--text); } ``
¶Адаптивный дизайн
Переменные позволяют задавать разные значения для разных размеров экрана через медиа-запросы, изменяя отступы, шрифты или размеры компонентов централизованно.
Пример: ``css :root { --gap: 8px; } @media (min-width: 768px) { :root { --gap: 16px; } } ``
¶Упрощение поддержки кода
Вместо повторения одинаковых значений (например, цвета бренда) во множестве селекторов, достаточно определить переменную один раз. При необходимости изменить цвет достаточно отредактировать одно место в коде.
¶Анимации и переходы
CSS-переменные можно использовать в анимациях, хотя их значения не анимируются напрямую (не интерполируются). Однако можно анимировать свойства, которые ссылаются на переменные, если сами переменные меняются мгновенно (например, через transition на background-color).
¶Отличия от переменных препроцессоров
| Характеристика | CSS-переменные | Переменные препроцессоров (Sass, Less) |
|---|---|---|
| Обработка | В браузере, в реальном времени | На этапе компиляции, статически |
| Каскад и наследование | Поддерживаются | Не поддерживаются (глобальная область видимости) |
| Изменение через JS | Да | Нет |
| Поддержка медиа-запросов | Да | Нет (компилируются до медиа-запросов) |
| Производительность | Минимальное влияние | Не влияет на рантайм |
¶Ограничения и особенности
- CSS-переменные не могут быть использованы в именах селекторов или в значениях
@media(например,--breakpoint: 768px; @media (min-width: var(--breakpoint))не работает). - В старых браузерах (например, Internet Explorer 11) поддержка отсутствует. Для обеспечения обратной совместимости рекомендуется указывать резервные значения или использовать полифиллы.
- При использовании переменных в
calc()необходимо учитывать, чтоvar()возвращает строку, поэтомуcalc(var(--x) + 10px)работает, аcalc(var(--x) + 10)— нет, если--xне содержит единицу измерения. - Переменные, содержащие несколько значений (например,
--shadow: 2px 2px 5px rgba(0,0,0,0.3)), корректно подставляются в свойства, принимающие такие значения (например,box-shadow).
¶Примеры использования в реальных проектах
- Bootstrap 5 использует CSS-переменные для настройки цветовой схемы, отступов и шрифтов.
- WordPress в теме Twenty Twenty-Two применяет CSS-переменные для глобальных настроек стилей.
- Material Design (Google) рекомендует CSS-переменные для создания тем в веб-приложениях.
¶Интересные факты
- CSS-переменные могут содержать не только значения CSS, но и произвольные строки, что позволяет использовать их как «метки» для JavaScript.
- С помощью
@property(CSS Houdini) можно задавать тип и начальное значение переменной, что позволяет анимировать её (например, числовые значения). - В 2024 году в спецификацию добавлена возможность использования
var()в@supportsдля проверки поддержки переменных.
¶Критика и альтернативы
Основная критика CSS-переменных связана с отсутствием возможности использовать их в медиа-запросах и селекторах, что ограничивает их применение в некоторых сценариях. Альтернативой остаются препроцессоры (Sass, Less) для статической компиляции и CSS Houdini для более продвинутого управления стилями. Однако для большинства задач динамического изменения стилей CSS-переменные являются наиболее простым и эффективным решением.
BFOmetr — база данных и аналитика по компаниям России.
На главную BFOmetr →