Пользовательские свойства (--*): переменные CSS

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с апреля 2017 года.

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

Пользовательские свойства ограничены элементом(ами), на котором(ых) они объявлены, и участвуют в каскадировании: значение такого пользовательского свойства берётся из объявления, определённого алгоритмом каскадирования.

Начальное значение	см. текст
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	как указано с подстановкой переменных
Тип анимации	дискретный

Синтаксис

--some-keyword: left;
--some-color: #0000ff;
--some-complex-value: 3px 6px rgb(20 32 54);

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

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

Пример

HTML

<p id="firstParagraph">
  This paragraph should have a blue background and yellow text.
</p>
<p id="secondParagraph">
  This paragraph should have a yellow background and blue text.
</p>
<div id="container">
  <p id="thirdParagraph">
    This paragraph should have a green background and yellow text.
  </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);
}

Результат

Спецификации

Спецификация
CSS пользовательские свойства для модуля каскадирования переменных уровня 1 # defining-variables

Совместимость браузеров

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в IOS	Samsung Internet	WebView Android
`--*`	49	15	31	36	9.1	49	31	36	9.3	5.0	49
`env`	69	79	65	56	11.111–11.1	69	65	48	11.311–11.3	10.0	69
`var`	49	15	31	36	9.1	49	31	36	9.3	5.0	50

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/--*