var()

Функцію CSS var() (змінна) можна використовувати для вставляння значення кастомної властивості (що також іноді зветься "змінною CSS") замість будь-якої частини значення іншої властивості.

Спробуйте його в дії

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

Синтаксис

/* Просте використання */
var(--custom-prop);

/* Із запасним варіантом */
var(--custom-prop,);  /* порожнє значення як запасний варіант */
var(--custom-prop, initial); /* початкове значення властивості як запасний варіант */
var(--custom-prop, #FF0000);
var(--custom-prop, var(--default-value));
var(--custom-prop, var(--default-value, red));

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

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

Значення

<custom-property-name>

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

<declaration-value>

Запасне значення кастомної властивості, яке використовується в разі того, що кастомна властивість недійсна в контексті свого використання. Це значення може містити будь-які символи, крім певних символів з особливими значеннями, штибу символів нового рядка, кінцевих дужок без пари, тобто ), ] або }, крапок з комою на найвищому рівні та знаків оклику. Запасне значення само може бути кастомною властивістю, що використовує синтаксис var().

Примітка: var(--a,) – дійсний запис, який задає те, що якщо кастомна властивість --a недійсна або відсутня, то var() замінюється нічим.

Формальний синтаксис

var( <custom-property-name> , <declaration-value>? )

Приклади

Використання кастомної властивості, заданої на :root

CSS

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

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

Результат

Тут значення властивості background-color задано через кастомну властивість --main-bg-color. Таким чином, кольором фону тіла HTML буде рожевий.

Використання кастомної властивості до її задання

CSS

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

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

Результат

У цьому прикладі фоновий колір тіла HTML буде рожевим, попри те, що кастомна властивість задана пізніше.

Використання кастомної властивості, заданої в іншому файлі

HTML

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="1.css" />
    <link rel="stylesheet" href="2.css" />
  </head>
  <body></body>
</html>

CSS

/* 1.css */
body {
  background-color: var(--main-bg-color);
}

/* 2.css */
:root {
  --main-bg-color: pink;
}

Результат

Фоновим кольором тіла HTML буде рожевий, попри те, що кастомна властивість задана в іншому файлі.

Кастомні властивості з запасними значеннями на випадок того, що властивість не задана

HTML

<div class="component">
  <h1 class="header">Заголовок</h1>
  <p class="text">Текст</p>
</div>

CSS

/* У стилі компонента: */
.component .header {
  /* header-color не задана, тож елемент залишається синім, згідно з запасним значенням */
  color: var(--header-color, blue);
}

.component .text {
  color: var(--text-color, black);
}

/* У стилі більшого застосунку: */
.component {
  --text-color: #080;
}

Результат

Оскільки --header-color не задана, текст "Заголовок" буде синім, згідно з запасним значенням.

Використання кастомної властивості як запасного значення

CSS

:root {
  --backup-bg-color: teal;
}

body {
  background-color: var(--main-bg-color, var(--backup-bg-color, white));
}

Результат

Оскільки --main-bg-color не задана, то background-color тіла відступить до --backup-bg-color, тобто чиркового кольору.

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

Специфікація
CSS Custom Properties for Cascading Variables Module Level 2 (CSS Variables 2)
# using-variables

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
var()
Chrome Full support 49
 Edge Full support 15
 Firefox Full support 31
 Internet Explorer No support Ні
 Opera Full support 36
 Safari Full support 9.1
 WebView Android Full support 50
 Chrome Android Full support 49
 Firefox for Android Full support 31
 Opera Android Full support 36
 Safari on iOS Full support 9.3
 Samsung Internet Full support 5.0

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

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

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

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

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