Переменные в CSS: зачем они нам? Введение в CSS переменных Установка величин по умолчанию

CSS-переменные, или, точнее, кастомные CSS-свойства, доступны в Chrome начиная с 49 версии. Они могут быть полезны для уменьшения количества повторяющегося кода в CSS, создания впечатляющих эффектов вроде смены тем на лету и, потенциально, создания полифилов для будущих возможностей CSS.

Хаос в CSS

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

В последнее время многие разработчики стали использовать CSS-препроцессоры типа SASS или LESS, которые решают эту проблему с помощью переменных. Хотя эти инструменты заметно увеличили продуктивность разработки, препроцессорные переменные имеют очень серьёзный недостаток: они статичны и не могут меняться на лету. Появление возможности динамически менять переменные не только позволит на лету менять темы сайта или приложения, но также означает значительное расширение возможностей отзывчивого дизайна и возможность создания полифилов для будущих свойств CSS. С выходом Chrome 49 переменные стали доступны в виде кастомных CSS-свойств.

Кастомные свойства в двух словах

Кастомные свойства расширяют наш CSS-инструментарий двумя новыми возможностями:

• Автор кода может присваивать произвольные значения свойствам с придуманными им самим именами.
• Функция var() позволяет затем использовать эти значения в других свойствах.

Краткий пример для демонстрации:

:root { --main-color : #06c ; } #foo h1 { color : var (--main-color); }

Функция var() возвращает значение кастомного свойства и заменяется им, в результате чего получается color: #06c; . Если кастомное свойство где-то определено в таблице стилей, оно будет доступно функции var .

На первый взгляд синтаксис может показаться странным. Многие разработчики недоумевают: «Почему бы просто не использовать $foo в качестве имён переменных?» Это было сделано специально для повышения гибкости и возможности в перспективе создавать макросы для $foo . Более подробно об этом можно прочесть в статье одного из авторов спецификации, Таба Аткинса (Tab Atkins).

Синтаксис кастомных свойств

Синтаксис кастомных свойств довольно прост:

Header -color : #06c ;

Обратите внимание, что кастомные свойства регистрозависимы, то есть --header-color и --Header-Color - это два разных свойства. Хотя синтаксис поначалу может показаться незамысловатым, на самом деле он позволяет сделать довольно много. К примеру, ниже - пример валидного кастомного свойства:

--foo: if (x > 5 ) this.width = 10 ;

Хотя это выражение не будет работать в качестве переменной (а также не будет валидным значением любого обычного свойства), потенциально оно может быть прочитано и обработано на лету с помощью JavaScript. Это означает, что кастомные свойства могут открыть доступ ко всевозможным интересным техникам, недоступным с нынешними CSS-препроцессорами. Так что если вы, позёвывая, думаете что-то вроде «Какая разница, у меня есть SASS…», подумайте ещё раз! Это не те переменные, с которыми вы привыкли работать.

Каскад

Кастомные свойства следуют стандартным правилам каскада, так что вы можете определить одно и то же свойство на разных уровнях специфичности:

:root { --color: blue; } div { --color: green; } #alert { --color: red; } * { color: var(--color); } <p > У меня синий цвет, унаследованный от root!p > <div > А для меня установлен зелёный!div > <div id ="alert" > Ну а для меня - красный! <p > И для меня красный: из-за наследования!p > div >

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

:root { --gutter : 4px ; } section { margin : var (--gutter); } @media (min-width: 600px ) { :root { --gutter : 16px ; } }

Необходимо отметить, что вышеприведённый приём невозможно повторить используя CSS-препроцессоры, потому что они неспособны переопределять переменные внутри медиавыражений. У этой возможности огромный потенциал!

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

:root { --primary-color : red; --logo-text : var (--primary-color); }

Функция var()

Чтобы получить и использовать значение кастомного свойства, понадобится функция var() . Вот её синтаксис:

var ( [, ]?)

Здесь - имя определённого автором кастомного свойства, - фолбек, который будет использован, если упомянутое кастомное свойство не является валидным. Фолбек может быть списком, разделённым запятыми, он будет преобразован к единому значению. Например, var(--font-stack, "Roboto", "Helvetica"); определяет фолбек "Roboto", "Helvetica" . Обратите внимание, что краткая запись некоторых свойств (как в случае внешних и внутренних отступов) разделяется не запятыми, а пробелами, так что валидный фолбек для внутренних отступов будет выглядеть примерно так:

p { padding : var (--pad, 10px 15px 20px); } /* В стилях компоненты: */ .component .header { color : var (--header-color, blue); } .component .text { color : var (--text-color, black); } /* В стилях основного приложения: */ .component { --text-color : #080 ; /* header-color не установлен, поэтому остаётся синим в соответствии с фолбеком */ }

Этот метод особенно пригодится для стилизации веб-компонент, использующих Shadow DOM, поскольку кастомные свойства могут пересекать теневые границы. Автор веб-компоненты может создать начальный дизайн при помощи фолбеков, а потом настроить стили при помощи кастомных свойств:

<x-foo > #shadow <style > p { background-color : var (--text-background, blue); } style > <p > У этого текста жёлтый фон, потому что так указано в документе! Иначе был бы синий. p > x-foo > /* В стилях основного приложения: */ x-foo { --text-background: yellow; }

При использовании var() нужно иметь в виду несколько нюансов. Например, переменные не могут быть именами свойств:

.foo { --side : margin-top; var (--side): 20px ; }

Это не является эквивалентом присваивания margin-top: 20px; . Более того, второе объявление не является валидным, и выбросит ошибку.

Аналогично, невозможно создать значение, часть которого берётся из переменной:

.foo { --gap : 20 ; margin-top : var (--gap)px ; }

Это тоже не является эквивалентом margin-top: 20px; . Чтобы собрать значение, понадобится кое-что другое: функция calc() .

Создание значений с помощью calc()

На случай, если вы никогда раньше с ней не работали, функция calc() - это небольшой, удобный инструмент, позволяющий выполнять вычисления, чтобы определять значения в CSS. Она поддерживается всеми современными браузерами , и её можно использовать вместе с кастомными свойствами для создания новых значений. Например:

.foo { --gap : 20 ; margin-top : calc (var(--gap) * 1px ); /* зашибись */ }

Работа с кастомными свойствами в JavaScript

Чтобы получить значение кастомного свойства, используйте метод getPropertyValue() объекта CSSStyleDeclaration.

<p > Этот абзац красного цвета!p > /* JS */ var styles = getComputedStyle(document.documentElement); var value = String(styles.getPropertyValue("--primary-color")).trim(); // value = "red"

Аналогично, чтобы динамически менять значение кастомного свойства, используйте метод setProperty() объекта CSSStyleDeclaration .

/* CSS */ :root { --primary-color: red; } p { color: var(--primary-color); } <p > А теперь этот абзац зелёного цвета!p > /* JS */ document.documentElement.style.setProperty("--primary-color", "green");

Также при задании значения кастомного свойства на лету можно использовать ссылку на другое кастомное свойство, вставив функцию var() в вызов setProperty() .

/* CSS */ :root { --primary-color: red; --secondary-color: blue; } <p > Здорово! Этот абзац синего цвета!p > /* JS */ document.documentElement.style.setProperty("--primary-color", "var(--secondary-color)");

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

Поддержка браузерами

На данный момент кастомные свойства поддерживаются в Chrome 49, Firefox 42, Safari 9.1, и iOS Safari 9.3.

Оригинальная статья: CSS Variables: Why Should You Care? Статью вычитывали:

Custom properties (sometimes referred to as CSS variables or cascading variables ) are entities defined by CSS authors that 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 color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties 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 other contexts.

Custom properties are subject to the cascade and inherit their value from their parent.

Basic usage

Declaring a custom property:

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

Using the custom property:

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

First steps with custom properties

Let"s start with this simple CSS that applies the same color to elements of different classes:

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; }

We"ll apply it to this HTML:

Which leads us to this:

Notice the repetition in the CSS. The background color is set to brown in several places. For some CSS declarations, it is possible to declare this higher in the cascade and let CSS inheritance solve this problem naturally. For non-trivial projects, this is not always possible. By declaring a custom property on the element and is identical to the selector html, except that its specificity is higher."> :root pseudo-class and using it where needed throughout the document, a CSS author can reduce the need for repetition:

: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); }

This leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value.

Inheritance of custom properties

Custom properties do inherit. This means that if no value is set for a custom property on a given element, the value of its parent is used. Take this HTML:

With the following CSS:

Two { --test: 10px; } .three { --test: 2em; }

In this case, the results of var(--test) are:

• For the class="two" element: 10px
• For the class="three" element: 2em
• For the class="four" element: 10px (inherited from its parent)
• For the class="one" element: invalid value , which is the default value of any custom property

Keep in mind that these are custom properties, not actual variables like you might find in other programming languages. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling"s descendant"s rule. The property is only set for the matching selector and its descendants, like any normal CSS.

Custom property fallback values

Fallback values aren"t used to fix the browser compatibility. If the browser doesn"t support CSS custom Properties, the fallback value won"t help. It"s just a backup for the browser which supports CSS Custom Properties to choose a different value if the given variable isn"t defined or has an invalid value.

The first argument to the function is the name of the custom property to be substituted. The second argument to the function, if provided, is a fallback value, which is used as the substitution value when the referenced custom property is invalid. The function only accepts two parameters, assigning everything following the first comma as the second parameter. If that second parameter is invalid, such as if a comma-separated list is provided, the fallback will fail. For example:

Two { color: var(--my-var, red); /* Red if --my-var is not defined */ } .three { background-color: var(--my-var, var(--my-background, pink)); /* pink if my-var and --my-background are not defined */ } .three { background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */ }

Including a custom property as a fallback, as seen in the second example above, is the correct way to provide more than one fallback. The technique has been seen to cause performance issues as it takes more time to parse through the variables.

Note : The syntax of the fallback, like that of custom properties , allows commas. For example, var(--foo, red, blue) defines a fallback of red, blue - anything between the first comma and the end of the function is considered a fallback value.

Validity and values

The classical CSS concept of validity, tied to each property, is not very useful in regard to custom properties. When the values of the custom properties are parsed, the browser doesn"t know where they will be used, so must, therefore, consider nearly all values as valid .

Unfortunately, these valid values can be used, via the var() functional notation, in a context where they might not make sense. Properties and custom variables can lead to invalid CSS statements, leading to the new concept of valid at computed time.

What happens with invalid variables?

When the browser encounters an invalid var() substitution, the initial or inherited value of the property is used.

Consider the code snippet below.

HTML

This paragraph is initial black.

CSS

:root { --text-color: 16px; } p { color: blue; } p { color: var(--text-color); }

As expected, the browser substitutes the value of --text-color in place of var(--text-color) , but 16px is not a valid property value for color . After substitution, the property doesn’t make any sense. The browser handles this situation in two steps:

1. Check if the property color is inheritable. Yes, but

   Doesn"t have any parent with color property. So move on to the next step.

2. Set the value to its default initial value , i.e., black.

Result

The paragraph color will not be blue because invalid substitution is replaced by the initial value, not by the fallback. If you had written color: 16px without any variable substitutes, then it was a syntax error. The previous declaration will then be used.

Note : While a syntax error in a CSS property / value pair will lead to the line being ignored, using a cascaded value, invalid substitution -- using a custom property value that is invalid -- is not ignored, leading to the value to be inherited.

Values in JavaScript

To use the values of custom properties in JavaScript, it is just like standard properties.

// get variable from inline style element.style.getPropertyValue("--my-var"); // get variable from wherever getComputedStyle(element).getPropertyValue("--my-var"); // set variable on inline style element.style.setProperty("--my-var", jsVar + 4);

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

Это именно то, чего в CSS не хватало. Такие динозавры, как Sass и Less использовали переменные, но в стандартной CSS никогда не было переменных. До сегодняшнего дня.

Они долго маячили на горизонте, но лишь недавно переменные начали внедряться в CSS. Итак, как же они работают?

Поддержка браузеров

В настоящее время переменные CSS поддерживаются только Firefox Nightly . И в действительности мы не можем их использовать. Тем не менее, не смотря на то, что они ещё очень и очень сырые (в состоянии бета-тестивания) мы все с нетерпением ожидаем, что они появятся в нашей жизни в ближайшее время.

Для браузеров на движке Webkit уже есть путь для получения переменных. Кроме того, ещё они доступны для некоторых версий Chrome , которые активируются через flag в chrome://flags и с помощью префикса -webkit- .

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

Как использовать переменные CSS

Мы все прекрасно знаем, как работают переменные, поэтому только синтаксис претерпел некоторые изменения. Вот как мы будем объявим переменные в CSS:

Var-variable-name: value;

Глобальные переменные

Как и в других языках программирования, можно также установить переменные в качестве глобальных. Например, так:

:root { var-blue-color: #2980A6; var-text-color: #E0E0E0; }

Я использую root псевдо элемент из-за того, что интерфейс верхнего уровня в DOM будет тот, который держит эти переменные. А они, в свою очередь, будут работать вниз по дереву тегов DOM для всех наших элементов.

Когда дело доходит до применения переменных, мы используем функцию var() для вызова переменной. Это можно сделать так:

Test { background-color: var(blue-color); } p { color: var(text-color); }

После того, как мы объявили переменную в корне документа, теперь мы вправе использовать её в любом месте.

Контекстные переменные

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

One { var-blue-color: #004F70; } .one a { color: var(blue-color); }

В данном конкретном примере якорные теги унаследует новые значения, которые мы поставили в их родительском элементе. Тем не менее, ничего за пределами этого div не будет использовать значения, заданные в корневом элементе.

Вывод

Переменные CSS будут большим подспорьем, когда они перестанут маячать на горизонте будущего и превратятся в реальность. Они могут даже стать первыми звоночками отказа от препроцессоров и возвращением к стандартному языку CSS.

• Урок подготовлен: командой сайт

Последнее обновление: 18.11.2018

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

Стоит отметить, что хотя часто используется термин "переменные" (css variables), официально они называются custom properties (кастомные или настраиваемые свойства).

Определение переменных CSS должно начинаться с префикса -- , например, --my-color . Они могут быть определены для любого элемента. Например:

Здесь в коде CSS для элемента div определены две переменныx: --text-color и --text-size

Text-color: #ff4757; --text-size: 20px;

С помощью выражения var() мы можем ссылаться на эти переменные в любой части кода CSS:

#p1 { color: var(--text-color); font-size: var(--text-size); }

В итоге первый блок получит высоту шрифта из --text-size, второй блок получит цвет шрифта из --text-color, а третий блок получит оба этих компонента.

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

Подобные переменные можно определить для любого элемента. При этом они наследуется дочерними элементами. Так, в примере выше мы видим, что вложенный элемент параграфа получает стили от родительского div.

Но если бы параграф находился бы вне блока div:

Третий блок.

Тогда бы значения из переменных к нему бы не применялись:

Если же необходимо, чтобы переменные могли бы использоваться глобально для всех элементов, тогда их определяют для элемента :root

:root{ --text-color: #ff4757; --text-size: 20px; }

Резервные значения

При определения переменных могут содержать какие-нибудь ошибки, например, переменная не определена (вообще не определена или в ее названии опечатка). В этом случае мы можем указать при применении переменной резервные значения, которые бдут применяться в случае, если значение переменной некорректно.

Второй параметр в функции var() позволяет задать резервное значение. Это может быть как точное значение, так и опять же значение другой переменной:

Color: var(--text-color, var(--reserved-color));

Для второй переменной можно также определить резервное значение, если она некорректна:

Color: var(--text-color, var(--reserved-color, red));

Функция var() позволяет вставлять значения пользовательских переменных в значения стилевых свойств. var() нельзя использовать в именах селекторов и в свойствах.

Сами пользовательские переменные и их значения описываются внутри произвольного селектора и должны начинаться с двух дефисов. Через двоеточие переменной присваивается любое допустимое для CSS значение.

Aside { --my-font: Helvetica, Arial, sans-serif; }

Для обращения к переменной --my-font используется запись var(--my-font) , которую можно вставлять в качестве значения свойства. При этом область видимости переменной ограничена указанным селектором (aside в данном случае) и применение var(--my-font) в другом селекторе не даст результата. Для создания глобальных переменных их следует описать внутри селектора :root .

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

<переменная> Имя переменной, обозначается двумя дефисами впереди (--my-font). <значение> Резервное значение, которое подставляется вместо заданного, в том случае, если переменная не определена. Через запятую можно указать несколько значений.

Пример

Кнопки

Типовая кнопка Информация

В данном примере вводятся две переменные: --primary-color и --info-color . Переменная --white не определена, поэтому подставляется указанное значение по умолчанию. Для селектора p.info значение переменной --primary-color переопределяется.

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации ) - первая черновая версия стандарта.

×