Использование API свойств и значений CSS

API свойств и значений CSS — часть набора API CSS Houdini — позволяет регистрировать пользовательские свойства CSS, обеспечивая проверку типа свойства, значения по умолчанию и наследование значения.

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

Существует два способа регистрации свойства: в JavaScript или в CSS.

Следующее действие зарегистрирует пользовательское свойство с именем --my-prop с помощью CSS.registerProperty. --my-prop будет использовать синтаксис CSS для цвета, иметь значение по умолчанию #c0ffee, и не будет наследовать значение:

window.CSS.registerProperty({
  name: "--my-prop",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Такая же регистрация может быть выполнена в CSS. Следующее действие зарегистрирует пользовательское свойство с именем --my-prop с помощью @property правила. --my-prop будет использовать синтаксис CSS для цвета, иметь значение по умолчанию #c0ffee, и не будет наследовать значение:

@property --my-prop {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

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

В этом примере пользовательское свойство --registered было зарегистрировано с синтаксисом <color>, а затем использовано в линейном градиенте. Это свойство затем переходит в другой цвет при наведении курсора или фокусировке. Обратите внимание, что анимация работает с зарегистрированным свойством, но не с незарегистрированным!

Хотя это не совсем точное представление, хорошее понимание различий между незарегистрированным свойством в вышеуказанном примере и зарегистрированным свойством можно получить, сравнив <custom-ident> с числом при попытке анимировать height. Невозможно перейти от auto к числу, потому что браузер не знает значения auto до момента его вычисления. Аналогично, при незарегистрированном свойстве браузер не знает, какое значение может быть, до момента его вычисления, и поэтому не может задать переход от одного значения к другому. Однако при регистрации вы сообщаете браузеру, какой тип значения он должен ожидать, и зная это, он может правильно задать переходы.

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

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