Кастомные свойства (--*): 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.
Имена свойств с префиксом --
, например --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
будут определены, как два различных кастомных свойства.
Синтаксис
CSS Page type required
Пример
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 |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Использование переменных в CSS
- Функция
var()