CSS function var()
Опис
Функція var() в CSS дозволяє використовувати значення змінних CSS (custom properties) у ваших CSS оголошеннях. Вона приймає два параметри: ім'я змінної та необов'язкове значення за замовчуванням. Під час використання var(), браузер шукає значення змінної CSS за заданим ім'ям. Якщо значення змінної не знайдено, буде використано значення за замовчуванням (якщо воно вказано). Якщо значення змінної знайдено, воно буде використано як значення властивості.
Наприклад, якщо ви використовуєте змінну --margin, ви можете використовувати її значення, наприклад, var(--margin), для встановлення відступів. Значення змінної можуть бути визначені в межах властивостей CSS, CSS-файлів або inline-стилів, надаючи вам гнучкість у зміні стилів для різних елементів або сторінок.
Приклад використання:
:root {
--text-color: #333;
}
p {
color: var(--text-color);
}
У даному прикладі, значення --text-color визначено в кореневому елементі :root, а потім використано за допомогою функції var() для встановлення кольору тексту в елементі <p>. Це дозволяє легко змінювати колір тексту для всього сайту, змінивши значення змінної на одному місці.
| Порада: | Перед використанням функції |
Синтаксис
var(<name>, <declaration-value>?);<name>Ім'я змінної CSS.
<declaration-value>Значенням може бути будь-який тип даних, який підтримується властивістю, до якої використовується функція
var(). Значення змінної може бути вказано в числовому форматі, рядковому форматі, кольоровому форматі, як URL-адреса тощо.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
49 |
31 |
9.1 |
36 |
15 |
| Переглядач | ||||
|---|---|---|---|---|
50 |
49 |
31 |
9.3 |
Мобільних переглядачів ще не додано.
Приклади
Цей приклад демонструє зміну кольору елемента при наведенні курсору.
Цей приклад показує використання змінних для визначення фонового кольору елементів.