Кастомні властивості як каскадні змінні CSS
Модуль Кастомних властивостей як каскадних змінних CSS додає підтримку каскадних змінних у властивостях CSS і дає змогу створювати кастомні властивості для визначення цих змінних, а також механізми для їх використання як значень інших властивостей CSS.
При роботі з CSS нерідко доводиться багаторазово використовувати в межах одного проєкту одні й ті самі значення, наприклад, ширини, що добре підходять для макета, або набір кольорів колірної схеми.
Один зі способів організації повторень у списках стилів – визначити значення один раз і використовувати його багато разів у інших місцях.
Кастомні властивості дають змогу створювати та визначати кастомні властивості, що можуть бути використані повторно, спрощуючи складні або повторювані правила та роблячи їх зрозумілішими та зручнішими для підтримки.
Наприклад, --dark-grey-text
і --dark-background
легше зрозуміти, ніж шістнадцяткові кольори, такі як #323831
, а також контекст того, як ви їх використовуєте, стає більш очевидним.
Кастомні властивості в дії
Щоб побачити, як можна використовувати кастомні властивості, пересуньте повзуна зліва направо.
У цих колірних зразках значення background-color
задано за допомогою функції кольору
hsl()
як hsl(var(--hue) 50% 50%)
.
Кожний колірний зразок збільшує значення барви
на 10 градусів, наприклад, calc(var(--hue) + 10)
, calc(var(--hue) + 20)
і так далі.
При зміні значення повзуна від 0 до 360 значення кастомної властивості --hue
оновлюється за допомогою calc
, а також оновлюється колір фону кожної рамки в межах сітки.
Довідка
Властивості
Функції
Посібники
- Використання кастомних властивостей (змінних) CSS
Пояснює, як використовувати кастомні властивості в CSS і JavaScript, а також містить поради щодо обробки невизначених і неприпустимих значень, запасних варіантів та успадкування.
- Недійсні кастомні властивості
Пояснює те, як браузери обробляють значення властивостей, коли значення кастомної властивості належить до неприпустимого для цієї властивості типу.
Споріднені концепції
- Модуль API властивостей і значень CSS
- Директива
@property
- Метод
CSS.registerProperty()
- Директива
Специфікації
Дивіться також
- Модуль Каскаду та успадкування CSS
- Функція
env()
CSS - Функція
calc()
CSS - Метод
getPropertyValue()