Houdini API

Houdini — это набор API низкого уровня, предоставляющий доступ к частям движка CSS, давая разработчикам возможность расширять CSS, подключившись к процессу форматирования и макета рендеринга движка браузера. Houdini — это группа API, предоставляющая разработчикам прямой доступ к объектной модели CSS (CSSOM), позволяя им писать код, который браузер может распознавать как CSS, создавая новые возможности CSS без ожидания их реализации в браузерах.

Houdini обеспечивает более быстрые времена парсинга по сравнению с использованием JavaScript HTMLElement.style для изменения стилей. Браузеры парсят CSSOM — включая процессы макета, отрисовки и композиции — перед применением любых обновлений стиля, найденных в скриптах. Кроме того, процессы макета, отрисовки и композиции повторяются для обновлений стиля JavaScript. Код Houdini не ожидает завершения первого цикла рендеринга. Вместо этого он включается в этот первый цикл — создавая рендерируемые и понятные стили. Houdini предоставляет объектно-ориентированный API для работы со значениями CSS в JavaScript.

API CSS Typed Object Model Houdini — это объектная модель CSS с типами и методами, представляющая значения в виде JavaScript-объектов, что делает манипуляции со стилями CSS более интуитивными по сравнению с предыдущими методами манипулирования на основе строк HTMLElement.style. Каждый элемент и правило таблицы стилей имеют карту стилей, доступ к которой можно получить через её StylePropertyMap.

Функцией CSS Houdini является Worklet. С помощью worklet вы можете создавать модульный CSS, требующий единственной строки JavaScript для импорта настраиваемых компонентов: без необходимости в препроцессорах, постпроцессорах или JavaScript-фреймворках.

CSS.paintWorklet.addModule("css-component.js");

Этот добавленный модуль содержит PaintWorkletGlobalScope.registerPaint функции, которые регистрируют полностью настраиваемые worklet.

Функция CSS paint() — это дополнительная функция, поддерживаемая типом <image>. Она принимает параметры, включающие имя worklet и дополнительные параметры, необходимые для worklet. Worklet также имеет доступ к пользовательским свойствам элемента: их не нужно передавать в качестве аргументов функции.

В следующем примере функции paint() передается worklet под названием myComponent.

li {
  background-image: paint(myComponent, stroke, 10px);
  --highlights: blue;
  --theme: green;
}

Ниже вы найдёте ссылки на основные страницы справки, посвященные API, относящимся к Houdini, а также ссылки на руководства, которые помогут вам в изучении их использования.

Определяет API для регистрации новых свойств CSS. Свойства, зарегистрированные с помощью этого API, снабжены синтаксисом парсинга, определяющим тип, поведение наследования и начальное значение.

• Справочник по API свойств и значений CSS
• Руководство по API свойств и значений CSS
• Умные пользовательские свойства с новым API Houdini

Преобразование строк значений CSSOM в осмысленные типизированные представления JavaScript и обратно может вызвать значительные накладные расходы на производительность. CSS Typed OM предоставляет значения CSS в виде типизированных JavaScript-объектов для их эффективной обработки.

• Справочник по CSS Typed OM
• Руководство по CSS Typed OM
• Работа с новой объектной моделью CSS Typed Object Model

Разработанный для повышения расширяемости CSS, API отрисовки позволяет разработчикам писать JavaScript-функции, которые могут непосредственно отрисовывать фон, границу или содержимое элемента с помощью функции paint() CSS.

• Справочник по API отрисовки CSS
• Руководство по API отрисовки CSS
• API отрисовки CSS
• API отрисовки CSS
• Имитация теней с помощью API отрисовки CSS
• API отрисовки CSS, предсказуемо случайный

API для запуска скриптов на различных этапах конвейера рендеринга независимо от основной среды выполнения JavaScript. Worklet концептуально похожи на Web Workers и вызываются и расширяют движок рендеринга.

• Справочник по Worklet

Разработанный для повышения расширяемости CSS, этот API позволяет разработчикам создавать собственные алгоритмы макета, такие как макеты или привязка к строкам.

Этот API частично поддерживается в Chrome Canary. Он пока не документирован на MDN.

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

Этот API в настоящее время является предложением и не имеет реализаций в браузерах или документации на MDN.

• Предложение

API, предоставляющий доступ к метрикам шрифтов и позволяющий получить результаты типографского макета.

Этот API в настоящее время является предложением и не имеет реализаций в браузерах или документации на MDN.

• Предложение

• Библиотека Worklet для примеров и кода.
• Интерактивное введение в Houdini
• Houdini готов?