Кастомные свойства (--*): 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.

* Some parts of this feature may have varying levels of support.

Имена свойств с префиксом --, например --example-name, представляют собой кастомные свойства, содержащие значения, которые можно переиспользовать в прочих декларациях, при помощи функции (var()).

Область действия кастомного свойства ограничена элементом, для которого оно объявлено. Кастомные свойства также могут менять свои значения согласно правилам каскадирования.

Начальное значениесмотреть текст
Применяется квсе элементы
Наследуетсяда
Обработка значенияas specified with variables substituted
Animation typediscrete

Синтаксис

css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
<declaration-value>

Это значение соответствует любой последовательности из одного или нескольких токенов, если последовательность не содержит запрещенных токенов. Оно представляет собой все, что действительное объявление может иметь в качестве значения.

Примечание: Имена кастомных свойств чувствительны к регистру — таким образом --my-color и --My-color будут определены, как два различных кастомных свойства.

Синтаксис

CSS Page type required

Пример

HTML

html
<p id="firstParagraph">Этот параграф должен иметь синий фон и жёлтый текст.</p>
<p id="secondParagraph">Этот параграф должен иметь жёлтый фон и синий текст.</p>
<div id="container">
  <p id="thirdParagraph">
    Этот параграф должен иметь зелёный фон и жёлтый текст.
  </p>
</div>

CSS

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

Смотрите также