Использование переменных в CSS

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

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

 

CSS Variables are entities defined by CSS authors which contain specific values to be reused throughout a document. They are set using custom property notation (e.g. --main-color: black;) and are accessed using the var() function (e.g. color: var(--main-color);) .

Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same colour might be used in hundreds of different places, requiring global search and replace if that colour needs to change. CSS variables allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example --main-text-color is easier to understand than #00ff00, especially if this same color is also used in another context.

CSS Variables are subject to the cascade, and inherit their value from their parent.

Basic usage

Объвление переменной:

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

Использование переменной:

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

Note: The custom property prefix was var- in the earlier spec, but later changed to --. Firefox 31 and above follow the new spec. (баг 985838)

Первый шаг с CSS Переменными

Начнем с этого простого 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"></div>
    <div class="two">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

что приводит нас к этому:


Обратите внимание на повторение в CSS. Коричневый фон установлен в нескольких местах. Для некоторых объявлений 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">Text <span class="five">- more text</span></div>
    <input class="three">
    <textarea class="four">Lorem Ipsum</textarea>
</div>

Это приводит к тому же результату, что и предыдущий пример, но позволяет каноническое объявление желаемого свойства.

Наследование переменных в CSS и возвращаемые значения

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

<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": недопустимое значение, что является значением по умолчанию для любого пользовательского свойства.

Используя var() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Пользовательскими Элементами и Тенью DOM.

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

.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

.three {
  background-color: var(--my-var, --my-background, pink); /* pink if my-var and --my-background are not defined */
}

Данный метод также вызывает проблемы с производительностью. Он отображает страницу медленнее чем обычно, т.к. требует время на разбор.

Обоснованность и полезность

Понятие классической концепции CSS, связанность с каждым свойством, не очень удобно в плане пользовательских свойств. Когда значения пользовательских своств обрабатываются, браузер не знает где они будут применяться, поэтому нужно учитывать почти все допустимые значения.

К сожалению, эти значения могут использоваться через функциональную запись var() , в контексте где они, возможно, не имеют смысла. Свойства и пользовательские переменные могут привести к недопустимой формилировке CSS, ведущей к новой концепции допустимой по прошествии времени.

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

  
Особенность Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка (Да)-webkit
33.0
Нет 34.0[2]
49.0
(Да) 29 (29)[3]
31 (31)
Нет 36.0 9.1
  
Особенность Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Базовая поддержка Нет 49.0 (Да) 29 (29) ? ? 9.1 49.0

[1] Chrome initially implemented this feature using a different syntax, which required to prefix custom property names with -webkit-var- to define them. They could then be used unprefixed within a -webkit-var() function. Additionally, the implementation was hidden behind the Enable experimental WebKit features flag under chrome://flags, later renamed to Enable experimental Web Platform features.

[2] В Chrome 34.0 убрали эту функцию из-за проблем с производительностью.

[3] This feature is implemented behind the preference layout.css.variables.enabled, defaulting to false and using the old var-variablename syntax in Gecko 29. Starting from Gecko 31 the preference is enabled by default and the new --variablename syntax is used.

Метки документа и участники

 Внесли вклад в эту страницу: bakhaa, ArsenBespalov
 Обновлялась последний раз: bakhaa,