Кастомні властивості як каскадні змінні 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, а також містить поради щодо обробки невизначених і неприпустимих значень, запасних варіантів та успадкування.

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

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

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

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

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