От автора: эта статья – объяснение замечательной презентации от Леи Вероу «CSS переменные: var(—subtitle)» с конференции FITC Toronto Web Unleashed 2016. Слайды можно посмотреть по ссылке. Слайды были запрограммированы, поэтому в этой статье я передам вам тот контекст, который мог быть утерян.
Что?
Название CSS переменные говорит само за себя. Как и переменные в препроцессорах, в них хранятся определенные значения, которые необходимо будет повторно использовать.
CSS переменные работают по принципу обычных свойств. Переменные наследуются, однако вы не сможете переписать значение, задав переменной значение initial в самом начале.
|
1 2 3 4 5 6 7 |
* { outline: var(--outline); --outline: initial; // без этой строки любой дочерний элемент блока .block1 будет иметь значение .2em solid outline. } .block1 { --outline: .2em solid; } |
Синтаксис
Переменные начинаются с —, а вызываются в качестве значения с помощью конструкции var(—myvar). Представьте, что это префиксное свойство, но с пустым префиксом (как -webkit- только без слова webkit). Префикс был выбран специально, чтобы вы могли без конфликтов использовать переменные Sass/Less.
CSS переменные задаются, как и другие свойства. Их даже можно прописать внутри HTML атрибута style, что открывает нам возможность темизации. CSS переменные чувствительны к регистру и не могут быть пустыми.
|
1 2 3 |
--foo:; неправильно --foo: ; правильно --foo ≠ --FOO |
Если у переменной задано неправильное значение для того свойства, на которое она применяется, будет скомпилирована ошибка «Invalid at computed-value time» и установлено значение по умолчанию initial.
|
1 2 3 4 |
body { --bgcolor: 20px; background-color: var(--bgcolor); // 20px (неправильно) = initial = transparent } |
Можно указать фолбэк на тот случай, если переменная не задана. В качестве фолбэка могут выступать другие переменные, у которых также могут быть свои фолбэки.
|
1 |
var(--color1, var(--color2, var(--color3, red))) |
В CSS отсутствует конкатенация (кроме свойства content), поэтому и CSS переменные не поддаются конкатенации. То есть, к примеру, нельзя комбинировать переменные с числами и переменные с единицами измерения.
|
1 2 3 4 5 |
// Это не сработает div { --height: 100; height: var(--height) + 'px'; } |
Адаптивный дизайн, анимация и темизация
Медиа запросы
CSS переменные можно использовать в медиа запросах. Очень полезная штука: вы всего один раз задаете правило и можете переписывать значение переменной внутри медиа запроса.
|
1 2 3 4 5 6 7 8 9 10 |
div { --height: 100px; height: var(--height); } @media (max-width: 800px) { div { --height: 500px; } } |
Keyframes анимация и плавные переходы
Так как нельзя точно определить, какой тип данных будет храниться в CSS переменной, то на данный момент они не поддаются анимации. Браузер просто не будет знать, что делать с анимацией.
Если попробовать анимировать переменную внутри keyframes анимации, то элемент будет просто перепрыгивать с одного значения на другое.
Тем не менее, анимация может сработать для определенных свойств, если изменять значение переменной свойства, к которому применено свойство transition:
|
1 2 3 4 5 6 7 8 9 |
#transition.slide { --bgcolor: yellow; background: var(--bgcolor); transition: 1s; } #transition.slide:active { --bgcolor: #0ca; } |
Темизация
С помощью переменных можно создавать элементы тем, для которых не потребуется создавать новые классы. Можно также создавать публичные и приватные переменные. К примеру: переменная —col будет приватной. О ней никто не будет знать, кроме автора. А переменная —color используется в HTML для изменения темы. В примере ниже кнопка по умолчанию имеет черный текст, рамку и фон при наведении мыши.
|
1 2 3 4 5 6 7 8 9 10 11 |
button { --col: var(--color, black); border: .1em solid var(--col); background: transparent; color: var(--col); } button:hover { background: var(--col); color: white; } |
При помощи изменения публичной переменной —color мы можем генерировать кнопку любого цвета. В нашем случае кнопка будет иметь красный текст, рамку и фон при наведении.
|
1 2 |
<button>Click me</button> <button style="--color: red">Click me</button> |
JavaScript
JS можно использовать для получения, установки и изменения CSS переменных – очень мощный инструмент.
|
1 2 3 4 5 6 |
// Получаем переменную из инлайновых стилей element.style.getPropertyValue("--foo"); // Обычное получение переменной getComputedStyle(element).getPropertyValue("--foo"); // Задаем переменную в инлайновых стилях element.style.setProperty("--foo", 38 + 4); |
Следующий пример (взят из слайдов) задает переменную через JS по движению мыши. Переменная используется в CSS для создания радиального градиента, который движется за курсором мыши.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var root = document.documentElement; document.addEventListener("mousemove", evt => { let x = evt.clientX / innerWidth; let y = evt.clientY / innerHeight; root.style.setProperty("--mouse-x", x); root.style.setProperty("--mouse-y", y); }); #mouse.slide { background-image: radial-gradient( at calc(var(--mouse-x) * 100%) calc(var(--mouse-y) * 100%), transparent, black); } |
Поддержка в браузерах
Поддержка у CSS переменных, возможно, лучше, чем вы думаете. Однако она все еще низкая. По данным сайта caniuse CSS переменные поддерживаются во всех основных браузерах, кроме IE11/Edge.
Источник: //codepen.io/
Редакция: Команда webformyself.
