Кастомные свойства (--*): CSS переменные
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Please take two minutes to fill out our short survey.
Имена свойств с префиксом --, например --example-name, представляют собой кастомные свойства, содержащие значения, которые можно переиспользовать в прочих декларациях, при помощи функции (var()).
Область действия кастомного свойства ограничена элементом, для которого оно объявлено. Кастомные свойства также могут менять свои значения согласно правилам каскадирования.
| Начальное значение | смотреть текст |
|---|---|
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | as specified with variables substituted |
| Animation type | discrete |
Синтаксис
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>-
Это значение соответствует любой последовательности из одного или нескольких токенов, если последовательность не содержит запрещенных токенов. Оно представляет собой все, что действительное объявление может иметь в качестве значения.
Примечание:
Имена кастомных свойств чувствительны к регистру — таким образом --my-color и --My-color будут определены, как два различных кастомных свойства.
Синтаксис
Пример
HTML
<p id="firstParagraph">Этот параграф должен иметь синий фон и жёлтый текст.</p>
<p id="secondParagraph">Этот параграф должен иметь жёлтый фон и синий текст.</p>
<div id="container">
<p id="thirdParagraph">
Этот параграф должен иметь зелёный фон и жёлтый текст.
</p>
</div>
CSS
:root {
--first-color: #16f;
--second-color: #ff7;
}
#firstParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
#secondParagraph {
background-color: var(--second-color);
color: var(--first-color);
}
#container {
--first-color: #290;
}
#thirdParagraph {
background-color: var(--first-color);
color: var(--second-color);
}
Результат
Спецификации
| Specification |
|---|
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |
Совместимость с браузерами
Смотрите также
- Использование переменных в CSS
- Функция
var()