СSS3 Переменные
CSS3 пользовательские свойства (Переменные)
Функция var() может использоваться для вставки значения пользовательского свойства.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Функция | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
Функция var()
Переменные CSS3 должны быть объявлены в селекторе CSS, который определяет его область. Для глобальной области можно использовать
либо :root, либо селектор <body>.
Имя переменной должно начинаться с двух тире --, чувствительна к регистру!
Синтаксис функции var() следующим образом:
переменная(пользовательское имя, значение)
| Значение | Описание |
|---|---|
| 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);
}
Редактор кода »
CSS3 функция var()
| Свойство | Описание |
|---|---|
| var() | Вставляет значение пользовательское свойство |
