Использование переменных в CSS
CSS переменные (пользовательские CSS-свойства) это сущности, определяемые автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например.--main-color: black;
) и доступны через функцию var() (например. color: var(--main-color);
) .
Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требует глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись --main-text-color
более понятна, чем #00ff00
, особенно если этот же цвет используется и в другом контексте.
Основное использование
CSS переменные подчиняются каскаду и наследуют значения от своих родителей.
Объвление переменной:
element {
--main-bg-color: brown;
}
Использование переменной:
element {
background-color: var(--main-bg-color);
}
Первый шаг с CSS Переменными
Начнем с этого простого CSS, который окрасит элементы разных классов одинаковым цветом:
.one {
color: white;
background-color: brown;
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: brown;
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: brown;
margin: 10px;
width: 100px;
}
.five {
background-color: brown;
}
Мы применим его к этому HTML:
<div>
<div class="one"></div>
<div class="two">Text <span class="five">- more text</span></div>
<input class="three">
<textarea class="four">Lorem Ipsum</textarea>
</div>
что приводит нас к этому:
Обратите внимание на повторения в CSS. Коричневый фон установлен в нескольких местах. Для некоторых CSS объявлений можно указать этот цвет выше в каскаде и наследование CSS решит эту проблему. Но для нетривиальных проектов это не всегда возможно. Объявив переменную в псевдо-классе :root, автор CSS может избежать ненужных повторений, используя эту переменную.
/* Псевдокласс
:root определяет корневой элемент документа.
В HTML этот селектор всегда соответствует элементу <html> */
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
.five {
background-color: var(--main-bg-color);
}
Это приводит к тому же результату, что и предыдущий пример, но позволяет объявить желаемое свойство только один раз.
Наследование переменных в CSS и возвращаемые значения
Пользовательские свойства могут наследоваться. Это означает, что если не установлено никакого значения для пользовательского свойства на данном элементе, то используется свойство его родителя:
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div>
со следующим CSS:
.two {
--test: 10px;
}
.three {
--test: 2em;
}
В результате var(--test) будет:
- для элемента с классом
class="two"
:10px
- для элемента с классом
class="three"
:2em
- для элемента с классом
class="four"
:10px
(унаследовано от родителя) - для элемента с классом
class="one"
: недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.
Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow DOM.
Первый аргумент функции это имя пользовательского свойства. Второй аргумент функции, если имеется, это возвращаемое значение, который используется в качестве замещающего значения, когда пользовательское свойство является не действительным. Например:
.two {
color: var(--my-var, red); /* red если --my-var не определена */
}
.three {
background-color: var(--my-var, var(--my-background, pink)); /* pink если --my-var и --my-background не определены */
}
.three {
background-color: var(--my-var, --my-background, pink); /* "--my-background, pink" будет воспринят как значение в случае, если --my-var не определена */
}
В замещаемых значениях можно использовать запятые по аналогии с пользовательскими свойствами. Например, var(—foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)
Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.
Обоснованность и полезность
Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских своств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.
К сожалению, эти значения могут использоваться через функциональную запись var()
, в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к невалидным выражениям CSS, что приводит к новой концепции валидности во время исполнения.
Совместимость с браузерами
We’re converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven’t yet converted the data it contains. Find out how you can help!
Особенность | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Базовая поддержка | (Да)-webkit 33.0 Нет 34.0[2] 49.0 | (Да) | 29 (29)[3] 31 (31) | Нет | 36.0 | 9.1 |
-webkit-var-
to define them. They could then be used unprefixed within a -webkit-var()
function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome://flags
, later renamed to Enable experimental Web Platform features.
[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.
[3] This feature is implemented behind the preference layout.css.variables.enabled
, defaulting to false
and using the old var-variablename
syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new --variablename
syntax is used.