От автора: на днях я зашел на сайт caniuse.com и был приятно удивлен, когда увидел, что переменные CSS теперь поддерживаются в большинстве браузеров за исключением одного. Меня это сильно заинтересовало. Уже совсем скоро мы сможем использовать CSS переменные напрямую в наших стилях.
Не первый раз
Стоит отметить, что переменные в CSS это не что-то новое: уже много лет нам доступен так называемый currentColor, который можно назвать первой переменной. Препроцессоры типа Sass также ужа давно поддерживают переменные, а спецификация CSS (под названием Пользовательские свойства) написана на основе множества открытий в разработке, связанных со всеми тремя инструментами.
Переменные в Sass и CSS сильно отличаются. Они пишутся по-разному, и хотя где-то они похожи, CSS переменные могут то, что не могут Sass переменные и наоборот.
Один из самых распространенных примеров использования переменных CSS – установка главных цветов, которые повторяются в стилях. С этого примера я и начну.
Живые цвета
CSS переменные можно создать где угодно, но наследуются они по обычным правилам CSS. Логические места, где можно объявлять CSS переменные:
универсальный селектор (*);
элемент body;
:root;
классы;
селекторы элементов.
На практике, CSS переменные можно объявлять на любом селекторе. Ограничения только по наследованию, что очень важно. Для объявления переменной необходимо написать два знака тире перед ее именем. Имя переменной должно быть без пробелов:
|
1 2 3 |
body { --alert: #cb333b; } |
В отличие от других свойств CSS переменные чувствительны к регистру: —alert не равно —Alert. С помощью функции var() переменную можно вызвать в стилях по ее ссылке и воссоздать значение для подходящих селекторов:
|
1 |
h3 { color: var(--alert); } |
Код выше изменит цвет заголовка h3 на значение ссылки —alert.
Жить на краю
Ссылки на переменные можно использовать внутри значений с несколькими компонентами:
|
1 2 3 4 5 6 |
::root { --shadowcolor: rgba(0,0,0,0.3); } aside { box-shaodow: 50px 50px 5px var(--shadowcolor); } |
Ссылки на переменные нельзя соединять с единицами измерения, а значения без единиц измерения не принимаются. Другими словами, нельзя делать вот так:
|
1 2 3 4 5 6 7 |
.warning { --timing: 1; } .warning:hover { background: red; transition: var(--timing)s; } |
А вот так можно:
|
1 2 3 4 5 6 7 |
.warning { --timing: 1s; } .warning:hover { background: red; transition: var(--timing); } |
Ссылки можно комбинировать с функцией calc:
|
1 2 3 4 5 6 7 8 |
div { min-height: 100px; --boldborder: 5px; } .subtle { border: var(--boldborder) solid #666; border-radius: calc(var(--boldborder) - 1px); } |
Ссылка в классе subtle указывает border-radius в 4px.
Поменяться местами
Определять переменные и прописывать ссылки на них можно не только в стилях. Также можно использовать вставные и инлайновые ссылки. К примеру, в файле CSS:
|
1 2 3 |
::root { --fillet: 20px; } |
А в HTML файле инлайновая ссылка на переменную:
|
1 |
<div style="border-radius: var(--fillet)"></div> |
Перекрась в черный
В Sass очень часто создают ключевые переменные, которые будут часто использоваться в стилях. То же самое теперь можно сделать и с помощью нативных CSS переменных:
|
1 2 3 4 5 |
::root { --gutter: 1rem; --keytext: rgba(0, 0, 0, 0.9); --bordercolor: #333; } |
Что можно использовать в любом месте в стилях:
|
1 2 3 4 5 6 7 |
article { margin: var(--gutter); border: 1px solid var(--bordercolor); } article p { color: var(--keytext); } |
Поставив во главу угла переменные, можно очень быстро менять стили всего сайта. Меняя значения переменных, CSS изменится во всех местах сразу. Больше не нужно искать неизмененные значения!
CSS переменные можно использовать внутри медиа запросов, большое преимущество над Sass переменными.
Переменные сегодня
На данный момент поддержка переменных отсутствует только в Microsoft Edge / IE. Разработчики уже очень близко к тому, чтобы использовать нативные переменные в front-end коде. А пока что существует два способа.
1. Использовать постпроцессор с поддержкой переменных CSS
Можно компилировать написанный CSS код с помощью PostCSS в связке с cssnext и на выходе получать готовые стили. То есть, можно написать так:
|
1 2 3 4 5 6 |
:root { --keycolor: limegreen; } h1 { color: var(--keycolor); } |
А на выходе получить:
|
1 2 3 |
h1 { color: limegreen; } |
Метод предполагает, что любые изменения нужно будет прогнать через cssnext. Есть и другой способ.
2. Использовать правило @supports
Для определения, понимает ли браузер CSS переменные, можно использовать правило @supports:
|
1 2 3 4 5 6 |
@supports (--test: value) { main { --bcolor: rgba(0, 0, 0, 0.3); background: --bgcolor; } } |
Конечно, тогда вам придется написать фолбэк для браузеров, которые не понимают CSS переменные:
|
1 2 3 |
main { background: rgba(0, 0, 0, 0.3); } |
Заключение
В CSS переменных заложена огромная сила, их можно использовать в любом месте в стилях, в том числе и в медиа запросах. Леа Вероу в своей презентации по CSS на конференции показала парочку примеров использования, а также рассказала про возможные подводные камни. Крайне советую посмотреть.
Источник: //thenewcode.com/
Редакция: Команда webformyself.
