Функція var() дозволяє вставляти значення змінних користувачів у значення стильових властивостей. var() не можна використовувати в іменах селекторів та властивостях.
Самі змінні користувача та їх значення описуються всередині довільного селектора і повинні починатися з двох дефісів. Через двокрапку змінної надається будь-яке допустиме для CSS значення.
aside {--my-font: Helvetica, Arial, sans-serif; }Для звернення до змінної --my-font використовується запис var(--my-font), яку можна вставляти як значення властивості. При цьому область видимості змінної обмежена вказаним селектором (aside у даному випадку) та застосування var(--my-font) в іншому селектор не дасть результату. Для створення глобальних змінних їх слід описати всередині селектора :root.
Синтаксис
<code>var( <змінна> [, <значення> ]?)
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення . | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- <змінна>
- Ім'я змінної позначається двома дефісами попереду (--my-font).
- <значення>
- Резервне значення, яке підставляється замість заданого, у тому випадку, якщо змінна не визначена. Через кому можна вказати кілька значень.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>var()</title> <style> :root {--primary-color: #0275d8;--info-color: #5bc0de; }
button { padding: .5rem 1rem; border: none; }
.primary { color: var(--white, #fff); background-color: var(-primary-color); }
.info { color: var(--white, #fff); background-color: var(-info-color); }
p.info {--primary-color: #31708f; padding: 10px; background-color: #d9edf7; color: var(--primary-color); }
</style>
</head>
<body> <p class="info">Кнопки</p> <button class="primary">Типова кнопка</button> <button class="info">Інформація</button>
</body>
</html>У цьому прикладі вводяться дві змінні: --primary-color та --info-color. Змінна --white не визначена, тому підставляється вказане значення за промовчанням. Для селектора p.info значення змінної --primary-color перевизначається.
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Custom Properties for Cascading Variables Module Level 1 | Можлива рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C та річкою ендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| 15 | 49 | 36 | 9.1 | 31 |
| 31 | 37 | 9.3 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість застосовується не до всіх елементів, які вказані в специфікації. /b-modal>
Див. також