Ниже приведен небольшой отрывок из книги Тиффани « Мастер CSS», 2-е издание .
В течение многих лет переменные были одной из наиболее популярных функций CSS. Переменные упрощают управление цветами, шрифтами, размером и значениями анимации, а также обеспечивают их согласованность в кодовой базе.
Потребовались годы, чтобы проработать детали синтаксиса и решить, как переменные будут вписываться в существующие правила, управляющие каскадом и наследованием. Теперь они доступны разработчикам в виде «пользовательских свойств» CSS.
В этой главе мы обсудим синтаксис пользовательских свойств CSS. Мы посмотрим на:
- как определить свойства и установить значения по умолчанию для этих свойств
- как правила каскада и наследования работают с пользовательскими свойствами
- как использовать пользовательские свойства с медиа-запросами
К концу вы должны понимать, как использовать пользовательские свойства в своих проектах.
Примечание. Браузерная поддержка пользовательских переменных надежна и существует в последних версиях всех основных браузеров. Однако поддержка недоступна в более старых, но недавно выпущенных версиях браузеров, которые все еще могут широко использоваться аудиторией вашего сайта. Версии Microsoft Edge до 15 и Safari до 9.1 полностью не поддерживаются. То же самое верно для любой версии Internet Explorer. Microsoft Edge 15 имеет поддержку, но также имеет несколько задокументированных ошибок.
Определение пользовательского свойства
Чтобы определить пользовательское свойство, выберите имя и добавьте к нему два дефиса. Любой буквенно-цифровой символ может быть частью имени. Символы дефиса ( - ) и подчеркивания ( _ ) также допускаются. Широкий диапазон символов Юникода может быть частью имени настраиваемого свойства, включая смайлики. Для ясности и читабельности придерживайтесь буквенно-цифровых названий.
Вот пример:
--primarycolor: #0ad0f9ff; /* Using #rrggbbaa color notation */
Символ -- указывает синтаксическому анализатору CSS, что это пользовательское свойство. Значение свойства заменит свойство везде, где оно используется в качестве переменной.
Имена пользовательских свойств чувствительны к регистру . Другими словами, --primaryColor и --primarycolor считаются двумя разными именами свойств. Это отход от традиционного CSS, в котором регистр свойств и значений не имеет значения. Однако это согласуется с тем, как ECMAScript обрабатывает переменные.
Как и в случае других свойств, таких как display или font , пользовательские свойства CSS должны быть определены в блоке объявления. Одним из распространенных шаблонов является определение пользовательских свойств в наборе правил, который использует :root psuedo-element в качестве селектора:
:root { --primarycolor: #0ad0f9ff; }
:root — это псевдоэлемент, который ссылается на корневой элемент документа. Для документов html элемент html . Для документов SVG это элемент svg . Используя :root , свойства сразу становятся доступными по всему документу.
Использование пользовательских свойств
Чтобы использовать значение пользовательского свойства в качестве переменной, нам нужно использовать функцию var() . Например, если мы хотим использовать наше свойство --primarycolor в качестве цвета фона, мы будем использовать следующее:
body { background-color: var(--primarycolor); }
Значение нашего пользовательского свойства станет вычисленным значением свойства background-color .
На сегодняшний день пользовательские свойства могут использоваться только в качестве переменных для установки значений для стандартных свойств CSS. Вы не можете, например, сохранить имя свойства как переменную и затем использовать его повторно. Следующий CSS не будет работать:
:root { --top-border: border-top; /* Can't set a property as custom property's value */ var(--top-border): 10px solid #bc84d8 /* Can't use a variable as a property */ }
Вы также не можете сохранить пару свойство-значение в качестве переменной и использовать ее повторно. Следующий пример также недействителен:
:root { --text-color: 'color: orange'; /* Invalid property value */ } body { var(--text-color); /* Invalid use of a property */ }
Наконец, вы также не можете объединить переменную как часть строки значения:
:root { --base-font-size: 10; } body { font: var(--base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax. */ }
Пользовательские свойства были разработаны для использования в качестве свойств, которые анализируются в соответствии со спецификацией CSS. Если поставщики браузеров примут спецификацию CSS-расширений , мы можем когда-нибудь использовать пользовательские свойства для создания пользовательских групп селекторов или пользовательских правил. Однако сейчас мы ограничены использованием их в качестве переменных для установки стандартных значений свойств.
Установка запасного значения
Функция var() самом деле принимает до двух аргументов. Первый аргумент должен быть именем пользовательского свойства. Второй аргумент является необязательным, но должен быть значением объявления. Это значение декларации функционирует как своего рода запасное значение, если значение пользовательского свойства не было определено.
Давайте возьмем следующий CSS:
.btn__call-to-action { background: var(--accent-color, salmon); }
Если --accent-color определен, скажем, его значение #f30 то цвет заливки для любого пути с атрибутом класса .btn__call-to-action будет иметь красно-оранжевую заливку. Если это не определено, заполнение будет лососем.
Значения декларации также могут быть вложенными. Другими словами, вы можете использовать переменную в качестве запасного значения для функции var :
body { background-color: var(--books-bg, var(--arts-bg)); }
В приведенном выше CSS, если определено --books-bg , цвет фона будет установлен на значение --books-bg . Если нет, цвет фона будет вместо того значения, которое было присвоено --arts-bg . Если ни один из них не определен, цвет фона будет начальным значением свойства, в данном случае transparent .
Нечто подобное происходит, когда пользовательскому свойству присваивается значение, недопустимое для свойства, с которым оно используется. Рассмотрим следующий CSS:
:root { --footer-link-hover: #0cg; /* Not a valid color value. */ } a:link { color: blue; } a:hover { color: red; } footer a:hover { color: var(--footer-link-hover); }
В этом случае значение --footer-link-hover не является допустимым цветом. В Microsoft Edge цвет состояния наведения для ссылок нижнего колонтитула будет унаследован от селектора a:hover . В большинстве других браузеров цвет состояния наведения будет наследоваться от цвета текста элемента body .
Пользовательские свойства и каскад
Пользовательские свойства также придерживаются правил каскада. Их значения могут быть переопределены следующими правилами:
:root { --text-color: #190736; /* navy */ } body { --text-color: #333; /* Dark gray */ } body { color: var(--text-color); }
В приведенном выше примере наш основной текст будет темно-серым. Мы также можем сбросить значения для каждого селектора. Давайте добавим еще пару правил к этому CSS:
:root { --text-color: #190736; /* navy */ } body { --text-color: #333; /* Dark gray */ } p { --text-color: #f60; /* Orange */ } body { color: var(--text-color); } p { color: var(--text-color) }
В этом случае любой текст, заключенный в теги p элемента, будет оранжевым. Но текст внутри div или других элементов все равно будет темно-серым.
Также можно установить значение пользовательского свойства с помощью атрибута style — например, style="--brand-color: #9a09af" который может быть полезен в архитектуре style="--brand-color: #9a09af" на основе компонентов.