Кратко

  • Первый публичный проект W3C в июне 2016 года предлагал регистрировать пользовательские свойства через JavaScript с типом, начальным значением и правилом наследования. Пример анимировал цвет градиента.
  • В 2019 году появилась запись @property в CSS. Проект 2024 года подробно описал проверку типа при вычислении значения и общее значение зарегистрированного имени для всего документа.

Дизайнер положил рядом два образца — красный и зелёный. Он хочет, чтобы градиент переходил между ними целую секунду. В --stop-color легко записать оба цвета и запросить переход. Но браузер получил набор CSS-токенов и должен нарисовать каждый промежуточный кадр. Слово color в имени помогает коллеге, а не служит формальной справкой о типе. Переменная пришла на собеседование с чемоданом образцов, но в графе «специальность» оставила пустое место. Цвет переменился разом, пропустив дорогу.

Первый публичный проект CSS Properties and Values API от 7 июня 2016 года предложил заполнить эту графу регистрацией. Он расширял CSS Variables: автор указывает тип значения, начальное значение и наследование. Входом тогда была функция CSS.registerProperty() в JavaScript. В примере --stop-color получил синтаксис <color>, прозрачное начало, inherits: false и переход от красного к зелёному при наведении. Зная тип, браузер вычисляет цвета посередине. Имя свойства такой формулы не содержало.

Проект от 9 ноября 2017 года развивал регистрацию и анимацию типизированных значений. В сохранённой редакции разговор с браузером всё ещё вёлся через JavaScript. Знакомое сегодня правило @property придёт позднее. Сначала решали, какие сведения нужны вычислителю. Затем появился вопрос, можно ли записать эти сведения рядом с CSS, который ими пользуется.

Проект от 25 октября 2019 года открыл два входа: CSS.registerProperty() в скрипте и @property в таблице стилей. CSS-правило описывает syntax, inherits и initial-value. Встречая --radius возле рисунка окружности, читатель видит на месте, что имя обозначает длину, стартует с нуля и по умолчанию не передаётся дочерним элементам. Рабочая инструкция теперь лежит у инструмента, а не только в другом файле.

Текст от 13 октября 2020 года сохранил оба способа и примеры анимации. У типа есть видимое следствие. Цвет проходит через другие цвета. Длина проходит через другие размеры. Зарегистрированное как <length> значение --radius позволяет нарисованному кругу вырасти от десяти до пятидесяти пикселей со всеми промежуточными радиусами. Браузер знает, что рассчитывать для каждого кадра, вместо простого обмена табличек «маленький» и «большой».

Проект от 26 марта 2024 года перечисляет условия регистрации. Правилу @property нужны syntax и inherits. Если синтаксис задаёт конкретный тип, а не универсальное *, требуется также корректный, независимо вычисляемый initial-value. Три пункта отвечают на три вопроса: какие значения допустимы, с чего начинать и получают ли потомки значение автоматически. Нет обязательного пункта — всё правило регистрации не действует. Половина анкеты не превращает произвольный токен в длину.

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

Имя имеет и общественную жизнь. Регистрации общие для документа, включая правила внутри Shadow DOM. Среди нескольких допустимых @property с одним именем побеждает последнее в порядке таблиц стилей; регистрация JavaScript получает приоритет над ними. Два компонента могут считать --radius своей частной вещью, но браузер обязан дать имени единый тип. Рабочая группа описывает напряжение: компоненту хочется собственных границ, а внешней странице нужно передавать в него значения с понятным обеим сторонам типом.

История публикаций W3C связывает этапы 2016, 2017, 2019, 2020 и 2024 годов. Переменная ответила на вопросы о типе, начале и наследовании. Теперь градиент может пройти от красного к зелёному, не перескакивая все промежуточные станции.