CSS Variables
Настраиваемые свойства CSS (переменные)
Функция var() может использоваться для вставки значения пользовательского свойства.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Функция var ()
Переменные в CSS должны быть объявлены в селекторе CSS, который определяет его область видимости. Для глобальной области можно использовать либо средство выбора: корень или тело.
Имя переменной должно начинаться с двух дефисов (--) и чувствительно к регистру!
Синтаксис функции var() выглядит следующим образом:
var(custom-name, value)
| Value | Описание |
|---|---|
| custom-name | Обязательно. Имя пользовательского свойства (должно начинаться с двух дефисов) |
| value | Дополнительные. Резервное значение (используется, если пользовательское свойство недопустимо) |
В следующем примере сначала определяется глобальное настраиваемое свойство с именем "--Main-BG-Color", затем используется функция var () для вставки значения пользовательского свойства позже в таблицу стилей:
Пример
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
В следующем примере функция var () используется для вставки нескольких пользовательских значений свойств:
Пример
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
CSS var() Function
| Свойство | Описание |
|---|---|
| var() | Вставляет значение пользовательского свойства |