Houdini API

Houdini は、CSS エンジンの一部を公開する低レベル API のセットであり、開発者はブラウザーのレンダリングエンジンのスタイリングおよびレイアウトプロセスにフックすることで CSS を拡張できます。 Houdini は、開発者が CSS オブジェクトモデル (CSSOM) に直接アクセスできるようにする API のグループです。開発者は、ブラウザーが CSS として解析できるコードを記述できるため、ブラウザーにネイティブに実装されるのを待たずに新しい CSS 機能を作成できます。

Houdini の利点

Houdini は、スタイルの変更に JavaScript の HTMLElement.style を使用するよりも構文解析時間を高速にすることができます。ブラウザーは、スクリプトで見つかったスタイルの更新を適用する前に、CSSOM(レイアウト、描画、合成のプロセスを含む)を解釈します。さらに、JavaScript スタイルの更新のために、レイアウト、描画、および合成のプロセスが繰り返されます。 Houdini のコードは、最初のレンダリングサイクルが完了するまで待機しません。むしろ、それは最初のサイクルに含まれ、レンダリング可能で理解可能なスタイルを作成します。 Houdini は、JavaScript で CSS 値を操作するためのオブジェクトベースの API を提供します。

Houdini の CSS 型付きオブジェクトモデル API は、型とメソッドを備えた CSS オブジェクトモデルであり、値を JavaScript オブジェクトとして公開し、以前の文字列ベースの HTMLElement.style 操作よりも直感的な CSS 操作を実現します。すべての要素とスタイルシートのルールには、 StylePropertyMap を介してアクセスできるスタイルマップがあります。

CSS Houdini の機能の 1 つはワークレット (Worklet) です。ワークレットを使用すると、モジュール方式の CSS を作成できます。構成可能なコンポーネントをインポートするには、次の JavaScript の 1 行が必要です。プリプロセッサー、ポストプロセッサー、JavaScript フレームワークは必要ありません。

CSS.paintWorklet.addModule("csscomponent.js");

この追加されたモジュールには、完全に構成可能なワークレットを登録する PaintWorkletGlobalScope.registerPaint 関数が含まれています。

メモ: 自分自身でワークレットを書いたり、他にも作成した部品をインストールすることができます。 Houdini.how ウェブサイトは、使用する方法を説明したワークレットのコレクションです。

CSS の paint() 関数は <image> 型で対応している追加関数です。これは、ワークレットの名前とワークレットが必要とする追加の引数を取ります。ワークレットは要素のカスタムプロパティにもアクセスすることができます。関数の引数として渡す必要はありません。

次の例では paint() 関数に myComponent というワークレットを渡しています。

css

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

メモ: 大きな力には大きな責任が伴います。 Houdini を使用すると、独自の石積み (masonry))グリッド、リージョンの実装を開発することができますが、そうすることが必ずしも最良の考えであるとは限りません。 CSS ワーキンググループは、すべての機能が確実に実行され、すべてのエッジケースを処理し、セキュリティ、プライバシー、およびアクセシビリティを考慮するために多くの作業を行います。 Houdini で CSS を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。