var()

Базовое Широко доступное

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с апреля 2017 года.

Функцию var() CSS функция можно использовать для вставки значения пользовательского свойства (иногда называемого «переменной CSS») вместо любой части значения другого свойства.

Попробуйте

Функция var() не может использоваться в именах свойств, селекторах или чём-либо ещё, кроме значений свойств. (Это обычно приводит к невалидному синтаксису или значению, не имеющему связи с переменной.)

Синтаксис

/* Simple usage */
var(--custom-prop);

/* With fallback */
var(--custom-prop,);  /* empty value as fallback */
var(--custom-prop, initial); /* initial value of the property as fallback */
var(--custom-prop, #FF0000);
var(--custom-prop, var(--default-value));
var(--custom-prop, var(--default-value, red));

Первый аргумент функции — имя пользовательского свойства, которое требуется заменить. Необязательный второй аргумент функции — значение по умолчанию. Если пользовательское свойство, на которое ссылается первый аргумент, не определено или равно общему ключевому слову CSS, функция использует второе значение.

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

Значения

<custom-property-name>: Имя пользовательского свойства, представленное идентификатором, начинающимся с двух дефисов. Пользовательские свойства предназначены только для использования авторами и пользователями; CSS никогда не будет придавать им значение, выходящее за рамки представленного здесь.
<declaration-value>: Значение по умолчанию пользовательского свойства, используемое в случае, если пользовательское свойство не определено или равно общему ключевому слову CSS. Это значение может содержать любой символ, за исключением некоторых символов со специальным значением, таких как новые строки, несовпадающие закрывающие скобки, т. е. ), ], или }, верхнеуровневые точки с запятой или восклицательные знаки. Значение по умолчанию само по себе может быть пользовательским свойством, используя синтаксис var() . Если значение по умолчанию опущено, а пользовательское свойство не определено, функция var() возвращает невалидное значение.

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

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

<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="en-US">
  <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">Header</h1>
  <p class="text">Text</p>
</div>

CSS

/* In the component's style: */
.component .header {
  /* header-color isn't set, and so remains blue, the fallback value */
  color: var(--header-color, blue);
}

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

/* In the larger application's style: */
.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, т. е. бирюзовым.

Невалидные значения

Функции var() могут возвращать невалидные значения, если:

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

В этом случае свойство обрабатывается так, как будто у него значение unset. Это происходит потому, что переменные не могут «ошибаться раньше», как это делают другие синтаксические ошибки, поэтому к моменту, когда пользовательский агент понимает, что значение свойства невалидно, он уже отбросил другие значения, заданные по каскадированию.

Например:

HTML

<p class="p1">Undefined variable</p>
<p class="p2">Invalid variable</p>
<p class="p3">Invalid literal color</p>

CSS

p {
  color: red;
}

.p1 {
  color: var(--invalid-color);
}

.p2 {
  --invalid-color: 20px;
  color: var(--invalid-color);
}

.p3 {
  color: 20px;
}

Результат

Обратите внимание, как абзацы, использующие var(), сброшены к стандартному чёрному цвету, но абзац с невалидным литеральным цветом по-прежнему красный, потому что объявление color: 20px просто игнорируется.

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

Спецификация
CSS Custom Properties для модуля каскадных переменных уровня 1 # using-variables

Совместимость браузеров

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`var()`	49	15	31	36	9.1	49	31	36	9.3	5.0	50

См. также

env(…) – только для чтения переменные окружения, управляемые пользовательским агентом.
Использование пользовательских свойств CSS (переменных)
@property правило at
Модуль пользовательских свойств CSS для каскадных переменных

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/var()