Кастомні властивості (--*) – змінні CSS

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

Сфера застосування своєрідних властивостей обмежена елементом (елементами), на котрих вони оголошені, а також їм властива каскадність: значення певної своєрідної властивості береться з оголошення, обраного каскадним алгоритмом.

Синтаксис

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

<declaration-value>

Це значення захоплює будь-яку послідовність з однієї чи більше лексем, поки не зустрінеться неприпустима лексема. Воно представляє усю повноту того, що дійсне оголошення може мати за своє значення.

[!NOTE] Імена своєрідних властивостей чутливі до регістру: --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);
}

Результат

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

Сумісність із браузерами

Дивіться також

• Функція var()
• Директива @property
• Посібник Використання кастомних властивостей (змінних) CSS
• Модуль Кастомних властивостей як каскадних змінних CSS