Кастомні властивості як каскадні змінні CSS

Модуль Кастомних властивостей як каскадних змінних CSS додає підтримку каскадних змінних у властивостях CSS і дає змогу створювати кастомні властивості для визначення цих змінних, а також механізми для їх використання як значень інших властивостей CSS.

При роботі з CSS нерідко доводиться багаторазово використовувати в межах одного проєкту одні й ті самі значення, наприклад, ширини, що добре підходять для макета, або набір кольорів колірної схеми. Один зі способів організації повторень у списках стилів – визначити значення один раз і використовувати його багато разів у інших місцях. Кастомні властивості дають змогу створювати та визначати кастомні властивості, що можуть бути використані повторно, спрощуючи складні або повторювані правила та роблячи їх зрозумілішими та зручнішими для підтримки. Наприклад, --dark-grey-text і --dark-background легше зрозуміти, ніж шістнадцяткові кольори, такі як #323831, а також контекст того, як ви їх використовуєте, стає більш очевидним.

Кастомні властивості в дії

Щоб побачити, як можна використовувати кастомні властивості, пересуньте повзуна зліва направо.

<div class="container">
  <div id="color-1">--hue</div>
  <div id="color-2">--hue + 10</div>
  <div id="color-3">--hue + 20</div>
  <div id="color-4">--hue + 30</div>
  <div id="color-5">--hue + 40</div>
  <div id="color-6">--hue + 50</div>
  <div id="color-7">--hue + 60</div>
  <div id="color-8">--hue + 70</div>
</div>
<input type="range" min="0" max="360" value="0" step="0.1" id="hue" />

const hue = document.querySelector("#hue");

const updateHue = () => {
  document.documentElement.style.setProperty("--hue", hue.value);
};

hue.addEventListener("input", updateHue);

.container {
  display: grid;
  font-family: sans-serif;
  color: white;
  gap: 0.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}
.container div {
  border-radius: 0.5rem;
  padding: 1rem;
}

input {
  width: 100%;
  margin: 0;
}

:root {
  --hue: 0;
}

#color-1 {
  background-color: hsl(var(--hue) 50% 50%);
}
#color-2 {
  background-color: hsl(calc(var(--hue) + 10) 50% 50%);
}
#color-3 {
  background-color: hsl(calc(var(--hue) + 20) 50% 50%);
}
#color-4 {
  background-color: hsl(calc(var(--hue) + 30) 50% 50%);
}
#color-5 {
  background-color: hsl(calc(var(--hue) + 40) 50% 50%);
}
#color-6 {
  background-color: hsl(calc(var(--hue) + 50) 50% 50%);
}
#color-7 {
  background-color: hsl(calc(var(--hue) + 60) 50% 50%);
}
#color-8 {
  background-color: hsl(calc(var(--hue) + 70) 50% 50%);
}

У цих колірних зразках значення background-color задано за допомогою функції кольору hsl() як hsl(var(--hue) 50% 50%). Кожний колірний зразок збільшує значення барви на 10 градусів, наприклад, calc(var(--hue) + 10), calc(var(--hue) + 20) і так далі. При зміні значення повзуна від 0 до 360 значення кастомної властивості --hue оновлюється за допомогою calc, а також оновлюється колір фону кожної рамки в межах сітки.

Довідка

Властивості

• --*

Функції

• var

Посібники

Використання кастомних властивостей (змінних) CSS

Пояснює, як використовувати кастомні властивості в CSS і JavaScript, а також містить поради щодо обробки невизначених і неприпустимих значень, запасних варіантів та успадкування.

Недійсні кастомні властивості

Пояснює те, як браузери обробляють значення властивостей, коли значення кастомної властивості належить до неприпустимого для цієї властивості типу.

Споріднені концепції

• Модуль API властивостей і значень CSS
  • Директива @property
  • Метод CSS.registerProperty()

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

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

• Модуль Каскаду та успадкування CSS
• Функція env() CSS
• Функція calc() CSS
• Метод getPropertyValue()