CSS Houdini

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

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

Базовый пример

Обычное пользовательское свойство CSS состоит из имени свойства и значения. Поэтому я могу создать пользовательское свойство, названное --background-color и ожидать, что ему будет присвоено значение цвета. Затем это значение используется в CSS так, как будто это значение цвета.

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

Однако в приведенном выше примере ничего не мешает кому-то использовать другое значение для этого свойства, возможно, задать ему длину. Сделав это, в любом месте, где используется данное свойство, не будет фона, так как background-color: 12px не является допустимым значением. Когда браузеры сталкиваются с CSS, который они не распознают как допустимый, они отбрасывают эту строку.

Используя @property , мы можем объявить пользовательское свойство с syntax типа <color>. Это показывает, что для этого свойства необходимо значение, являющееся допустимым цветом.

@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

Houdini worklets

Одной из особенностей Houdini является Worklet. Worklet — это модуль, написанный на JavaScript, который расширяет CSS, используя один из Houdini API. Вы можете посмотреть пример worklet на странице PaintWorkletGlobalScope.registerPaint(). После регистрации worklet вы можете использовать его в CSS, как любое другое значение. Это означает, что даже если вы не являетесь разработчиком JavaScript, вы можете получить доступ к Houdini API, используя worklets, созданные другими людьми.

На сайте Houdini.how есть несколько worklets, которые вы можете попробовать на своем сайте.

Справочник

CSS at-правило и описатели

At-правило @property позволяет регистрировать расширенное пользовательское свойство.

Ссылки на Houdini API

Руководства по Houdini

Внешние ресурсы

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Houdini