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

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

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

Синтаксис

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

<declaration-value>

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

Пример

Базовый пример

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: #1166ff;
  --second-color: #ffff77;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #229900;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

Результат

Регистрация пользовательских свойств с помощью @property

В этом примере мы используем ат-правило @property для регистрации пользовательского свойства.

HTML

Наш HTML-код содержит упорядоченный список (<ol>) с тремя элементами списка (<li>).

<ol>
  <li class="one">Item one</li>
  <li class="two">Item two</li>
  <li class="three">Item three</li>
</ol>

CSS

Мы используем ат-правило @property для регистрации двух пользовательских свойств.

@property --itemSize {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 200px;
}

@property --borderWidth {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}

Мы пытаемся переопределить значения пользовательских свойств. Значения, заданные для .two, допустимы, а значения, заданные для .three, недопустимы.

ol {
  --itemSize: 100px;
  --borderWidth: 1px;
}
.two {
  --itemSize: initial;
  --borderWidth: inherit;
}
.three {
  --itemSize: large;
  --borderWidth: 3%;
}

Мы используем оба пользовательских свойства для оформления элементов, задавая границу и ширину сразу для всех элементов:

li {
  width: var(--itemSize);
  border: var(--borderWidth) solid red;
  background-color: yellow;
  margin-bottom: 10px;
}

Результаты

Свойство --itemSize наследуется, а --borderWidth — нет. Свойства заданы для родительского элемента ol, переопределяя значения по умолчанию, указанные при их регистрации. Первый элемент наследует размер, но не ширину границы от OL. Глобальные ключевые слова, объявленные для .two, допустимы для <length>, поэтому используются. Значения в .three недопустимы («large» не является <length-percentage>, а 3% не является <length>). См.

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

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

См. также

• Функция var()
• Ат-правило @property
• Руководство «Использование пользовательских свойств CSS (переменных)»
• Руководство «Регистрация пользовательских свойств CSS»
• Модуль «Пользовательские свойства CSS для каскадных переменных»