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 フレームワークは必要ありません。

js
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 を拡張するときは、これらの考慮事項を念頭に置き、より野心的なプロジェクトに進む前に、まずは小さいものから始めてください。

Houdini API

以下に、Houdini の傘下にある API をカバーするメインリファレンスページへのリンクと、それらの使用方法を学習する際にガイダンスが必要な場合に役立つガイドへのリンクを示します。

CSS プロパティと値 API

新しい CSS プロパティを登録するための API を定義します。 この API を使用して登録したプロパティには、型、継承の振る舞い、および初期値を定義する解析構文が提供されます。

CSS 型付きオブジェクトモデル

CSSOM 値の文字列を意味のある型の JavaScript 表現に変換したり、元に戻したりすると、パフォーマンスのオーバーヘッドが大幅に増加する可能性があります。 CSS 型付きオブジェクトモデルは、CSS 値を型付き JavaScript オブジェクトとして公開し、パフォーマンスの高い操作を可能にします。

CSS 描画 API

CSS の拡張性を改善するために開発された描画 API により、開発者は paint() CSS 関数を使って要素の背景や境界、コンテンツに直接描画する JavaScript 関数を書くことができます。

ワークレット

メインの JavaScript 実行環境から独立した、レンダリングパイプラインのさまざまな段階でスクリプトを実行するための API です。 ワークレットは概念的にはウェブワーカーに似ており、レンダリングエンジンによって呼び出され、レンダリングエンジンを拡張します。

CSS レイアウト API

CSS の拡張性を改善するように設計されたこの API は、開発者が石積みやラインスナップなどの独自のレイアウトアルゴリズムを作成できるようにします。

この API は Chrome Canary で部分的に対応されています。まだ MDN では文書化されていません。

CSS パーサー API

任意の CSS のような言語を穏やかに型付けされた表現に解析するために、CSS パーサーをより直接的に公開する API です。

この API は現在提案段階にあり、ブラウザーの実装や MDN のドキュメントはありません。

フォントメトリック API

フォントのメトリックを公開し、書体のレイアウトの結果にアクセスする API です。

この API は現在提案段階にあり、ブラウザーの実装や MDN のドキュメントはありません。

関連情報