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

Користувацькі властивості (іноді звані змінними CSS чи каскадними змінними) – сутності, визначені авторами коду на CSS, що містять певні значення для перевикористання в документі. Вони встановлюються за допомогою синтаксису користувацьких властивостей (наприклад, --main-color: black;), а використовуються за допомогою функції var() (наприклад, color: var(--main-color);).

Складні вебсайти мають дуже багато коду на CSS, часто з багатьма повторюваними значеннями. Наприклад, один колір може використовуватись в сотнях різних місць, і якщо такий колір треба змінити – треба використовувати глобальний пошук із заміною. Користувацькі властивості дають змогу зберігати значення в одному місці, а використовувати в багатьох. Додатковою користю є семантичні ідентифікатори. Наприклад, --main-text-color простіше зрозуміти, ніж #00ff00, особливо якщо один колір може також бути використаний в інших контекстах.

Користувацькі властивості підлягають каскадності та успадковують значення від предка.

Елементарне використання

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

element {
  --main-bg-color: brown;
}

Зверніть увагу, що селектор набору правил визначає межі, в яких користувацька властивість може використовуватись. Загальноприйнята найкраща практика – визначати користувацькі властивості на псевдокласі :root, щоб вони застосовувались глобально в усьому документі HTML:

:root {
  --main-bg-color: brown;
}

Втім, це не обов'язково: можуть бути підстави для обмеження сфери дії користувацьких властивостей.

Примітка: Імена користувацьких властивостей є чутливими до регістру: --my-color вважатиметься окремою користувацькою властивістю поруч із --My-color.

Як написано вище, користувацькі властивості можна використовувати шляхом вказання замість звичайного значення властивості – імені користувацької властивості всередині функції var():

element {
  background-color: var(--main-bg-color);
}

Перші кроки із користувацькими властивостями

Почнімо з такого CSS, що застосовує один колір до елементів з різними класами:

.one {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: brown;
  margin: 10px;
  width: 100px;
}

.five {
  background-color: brown;
}

Застосуймо його до такого HTML:

<div>
  <div class="one">1:</div>
  <div class="two">2: Текст <span class="five">5 - більше тексту</span></div>
  <input class="three" />
  <textarea class="four">4: Але щоб ви зрозуміли</textarea>
</div>

Це виводить наступний результат:

Використання псевдокласу :root

Зверніть увагу на повторюваний CSS у прикладі вище. Колір тла, встановлений у кількох місцях, – brown. Для деяких оголошень CSS можна оголосити значення вище за каскадом, щоб успадкування CSS природним чином розв'язало проблему. Для нетривіальних проєктів це не завжди можливо. Оголошуючи користувацьку властивість на псевдокласі :root і використовуючи її в документі, автор CSS коду може зменшити потребу повторень:

:root {
  --main-bg-color: brown;
}

.one {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.two {
  color: white;
  background-color: black;
  margin: 10px;
  width: 150px;
  height: 70px;
  display: inline-block;
}
.three {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 75px;
}
.four {
  color: white;
  background-color: var(--main-bg-color);
  margin: 10px;
  width: 100px;
}

.five {
  background-color: var(--main-bg-color);
}

<div>
  <div class="one"></div>
  <div class="two">Текст <span class="five">- більше тексту</span></div>
  <input class="three" />
  <textarea class="four">Яле щоб ви зрозуміли</textarea>
</div>

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

Успадкування користувацьких властивостей

Користувацькі властивості успадковуються. Це означає, що якщо на певному елементі не вказано значення користувацької властивості, то використовується значення предка. Розберімо такий HTML:

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

… із наступним CSS:

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

У цьому випадку результати var(--test):

Для елемента class="two": 10px
Для елемента class="three": 2em
Для елемента class="four": 10px (успадковано від його предка)
Для елемента class="one": недійсне значення, що є усталеним значенням будь-якої користувацької властивості

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

Запасні значення користувацьких властивостей

За допомогою функції var() можна вказати кілька запасних значень для випадків, коли вказана змінна іще не визначена; це може бути корисно при роботі із користувацькими елементами та Тіньовим DOM.

Примітка: Запасні значення не використовуються для виправлення сумісності із браузерами. Якщо браузер не підтримує користувацькі властивості CSS, то запасне значення не допоможе. Це лише запасний варіант для браузера, що підтримує користувацькі властивості CSS, для випадків, коли вказана змінна не визначена або має недійсне значення.

Перший аргумент функції – назва користувацької властивості до заміни. Другий аргумент функції, якщо переданий, є запасним значенням, котре використовується як заміна, коли вказана користувацька властивість є недійсною. Функція приймає лише два параметри, присвоюючи все після першої коми – другому параметрові. Якщо цей другий параметр – недійсний, то запасний варіант не спрацює. Наприклад:

.two {
  /* Червоний, якщо --my-var не визначена */
  color: var(--my-var, red);
}

.three {
  /* рожевий, якщо --my-var та --my-background не визначені */
  background-color: var(--my-var, var(--my-background, pink));
}

.three {
  /* Недійсно: "--my-background, pink" */
  background-color: var(--my-var, --my-background, pink);
}

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

Примітка: Синтаксис запасного варіанту, як і синтаксис користувацьких властивостей, дозволяє використання ком. Наприклад, var(--foo, red, blue) визначає запасний варіант red, blue — усе, що передано між першою комою та кінцем виклику функції, вважається запасним значенням.

Обробка недійсних користувацьких властивостей

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

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

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

На жаль, такі дійсні значення можуть бути використані, за допомогою синтаксису функції var(), у контексті, де вони не матимуть змісту. Властивості та користувацькі змінні можуть породити недійсні викази CSS, що веде до нової концепції дійсності при обчисленні.

Коли браузер зустрічає недійсне підставлення var(), то значенням властивості стає її початкове чи успадковане значення.

Наступні два приклади ілюструють це.

Недійсні звичайні властивості

HTML

В цьому прикладі відбувається спроба присвоїти значення 16px властивості color. Оскільки це недійсне значення, ці стилі відкидаються, і результат залишається таким, як наче б цього правила не існувало. Тобто натомість застосовується попереднє правило color: blue, і абзац стає блакитним.

<p>Цей параграф початково є чорним.</p>

CSS

:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: 16px;
}

Результат

Недійсні користувацькі властивості

Цей приклад практично такий самий, як попередній, окрім того, що він використовує користувацьку властивість.

Як очікувано, браузер підставляє значення --text-color замість var(--text-color), але 16px не є дійсним значенням властивості color. Після заміни властивість більше не має змісту. Браузер обробляє таку ситуацію у два кроки:

Перевірити, чи властивість кольору можна успадкувати. Так, втім, <p> не має жодного предка із властивістю color. Тому – перехід до наступного кроку.
Встановити значення усталеного початкового значення, тож – чорний.

HTML

<p>Цей параграф початково є чорним.</p>

CSS

:root {
  --text-color: 16px;
}

p {
  color: blue;
}

p {
  color: 16px;
}

Результат

Значення у JavaScript

Використання значень користувацьких властивостей у JavaScript відбувається аналогічно до використання стандартних властивостей.

// отримати змінну із вбудованого стилю
element.style.getPropertyValue("--my-var");

// отримати змінну звідки завгодно
getComputedStyle(element).getPropertyValue("--my-var");

// встановити змінну на вбудованому стилі
element.style.setProperty("--my-var", jsVar + 4);

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

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.