Проект Houdini: типизация кастомных переменных

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

root: {
--my-color: #fff;
}
(нативная CSS-переменная в глобальной области видимости)

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

Проект Houdini - новое API, предоставляющее доступ ко всем стадиям обработки браузером кода - предлагает решение. Из JS мы сможем регистрировать типы переменных:

CSS.registerProperty({
name: "--my-color",
syntax: "<color>",
initialValue: "black"
});

Теперь переменная --my-color принимает только значения цветов. Считывая тип, движок может выполнять больше действий с переменной - включая анимации.

В миру эта часть проекта Houdini называется CSS Properties and Values API. К сожалению, проект страдает от избыточной сложности и слабой поддержки браузерами. В будущем он поможет строить архитектуру веб-приложений гибче и оптимизированнее, ну а пока - просто достоин внимания.

#CSS #Houdini