MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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

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

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

 

CSS переменные (пользовательские CSS-свойства) это сущности, определяемие автором CSS, хранящие конкретные значения, которые можно повторно использовать в документе. Они устанавливаются с использованием custom property нотации (например. --main-color: black;) и доступны через функцию var() (например. color: var(--main-color);) .

Сложные веб-сайты имеют очень большое количество CSS, часто с множеством повторяющихся значений. Например, один и тот же цвет может использоваться в сотнях разных мест, что требуюет глобального поиска и замены, если этот цвет необходимо изменить. CSS переменные позволяют сохранять значение в одном месте, а затем многократно использовать его в любом другом месте. Дополнительным преимуществом являются семантические идентификаторы. Для примера: запись --main-text-color более понятна, чем #00ff00, особенно если этот же цвет используется и в другом контексте.

CSS переменные подчиняются каскаду и наследуют значения от своих родителей.

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

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

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

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

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

Note: В более ранней спецификации префикс для переменных был var- , но позже был изменен на --. Firefox 31 и выше следуют новой спецификации.(баг 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() вы можете объявить множество возвращаемых значений когда данная переменная не определена, это может быть полезно при работе с Custom Elements и Shadow 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.

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

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