Кратко

  • Первый публичный проект CSS Variables W3C от 10 апреля 2012 года решал проблему повторяющихся значений в стилях. Он использовал раннюю запись var-color и ссылку var(color), оставляя каскаду выбор значения для каждого элемента.
  • Кандидатская спецификация от 3 декабря 2015 года применила --main-color и var(--main-color). Документ от 16 июня 2022 года уточнил запасные значения, отсутствующие и циклические ссылки. Общий цвет может наследоваться, а отдельный компонент — назначить собственный.

Главный редактор попросил менее строгий бордовый. Выбрать новый оттенок оказалось легко; найти все копии прежнего — почти архивная работа. Значение жило в кнопке, нескольких ссылках, плашке и заголовке, пережившем не один редизайн. Исправить тридцать записей можно. Пропустить тридцать первую — тоже. Получится сайт, где половина сотрудников явилась на собрание в старой форме. Переменные CSS предложили другую почту: дать цвету имя и обращаться к нему там, где он нужен.

Первый публичный рабочий проект CSS Variables W3C от 10 апреля 2012 года начинался именно с затрат на повторения. В больших таблицах стилей цвета и другие величины записываются снова и снова. Простая замена текста может задеть чужие случаи или забыть файл. Проект позволял автору определить свойство с выбранным именем и вставлять его значение в обычные свойства CSS. Цвет, определённый у корня документа, доходил до потомков по привычным правилам каскада. Браузер доставлял письмо по адресам, а не вслепую заменял одинаковые символы.

У языка 2012 года своя архивная этикетка. Тогда писали var-color и читали var(color). Пример задавал одну краску у корня, другую на div, третью на предупреждении. Одно имя могло означать разный цвет на разных ветках дерева. Центральная редакция разослала циркуляр, но местный отдел повесил на двери поправку. Именно возможность наследования и локального ответа делала имя полезным.

Между именами возможна и бесконечная пересылка. Одна переменная ссылается на вторую, вторая — обратно на первую. Проект называл такую циклическую зависимость недействительной. Спросите первую, какой нужен цвет, и она пошлёт ко второй; вторая вернёт вас в начало. Секретной банки краски в конце коридора нет. Браузер рассчитывает значение по правилам, а зависевшее от этой цепочки объявление получает соответствующий результат. Общая запись избавила от копий, зато заставила следить за связями.

В кандидатской спецификации W3C от 3 декабря 2015 года появилась знакомая форма. --main-color задавал пользовательское свойство, var(--main-color) обращался к нему. Пример определял основной цвет у корня и использовал его в других правилах и производном фоне. Изменение именованного значения распространялось на зависящие от него места. Редакции уже не нужно выдвигать каждый ящик с кнопками.

Адресами всё равно управлял каскад. Если компонент определял свой --main-color, потомки получали местный вариант. Сайт мог оставаться бордовым, а окно подписки — бирюзовым. При виде неожиданной кнопки первый найденный в файле экземпляр имени ещё ничего не решает. Нужно посмотреть, какое объявление выиграло именно для этого элемента после каскада и наследования. Общая тема не отменяет местной власти.

Кандидатский документ W3C от 16 июня 2022 года описал запасной цвет на случай, если письмо не пришло. В var(--header-color, blue) второй аргумент служит резервом. Повторно используемый компонент приносит собственный вариант, но может принять тему большого приложения. В спецификации сказано, что резерв может содержать запятые: всё после первой разделяющей запятой относится к нему. Гость пришёл со своим пальто, однако не откажется от подходящего хозяйского.

Отсутствие значения или замкнутая цепочка ссылок проявляются при вычислении. Браузер читает объявление с var() раньше, чем узнаёт результат подстановки. Если запрошенное свойство отсутствует или недействительно, а подходящего резерва нет, зависимое объявление теряет задуманный итог. Проверяя цвет элемента, полезнее спросить, что произошло именно с ним: он унаследовал корневой оттенок, получил местный, взял запасной или потерял объявление? Ответ даёт вычисленный стиль, а не первый результат текстового поиска.

Три текста W3C показывают и перемену грамматики. Рабочий проект 2012 года писал var-color и var(color). Кандидатский документ 2015 года — --main-color и var(--main-color). Версия 2022 года подробнее рассматривала резерв и недействительные значения. Старый образец нельзя принять за неподвижный учебник нового синтаксиса. Сквозная идея состоит в том, что именованное значение следует каскаду, наследуется и может получить иной ответ на местной ветке.

Редакции осталось решить вопрос поважнее поиска символов. Где заканчивается общий бордовый? Цвет у корня объединяет страницы, предупреждение может иметь свою палитру, переносной компонент держит запасную краску в кармане. Браузер отвечает за доставку и вычисление; редактор — за то, выглядит ли результат цельным изданием. Кнопкам теперь трудно сказать, что циркуляр до них не дошёл.