【シーエスエスフーディーニ】

CSS Houdini とは?

💡 CSSの舞台裏に忍び込んで、魔法の演出を自分で作れるようになる仕組み
📌 このページのポイント
CSS Houdini — ブラウザ内部APIへのアクセス ブラウザ レンダリングパイプライン パース Properties API レイアウト Layout API 描画 Paint API 合成 Animation Worklet JavaScript(Worklet) 各段階に低レベルAPIでアクセス可能 Houdini = レンダリングの各段階をJSで拡張できる仕組み
CSS Houdiniのイメージ
ひよこ ひよこ

CSS Houdiniって名前がかっこいいけど、何ができるの?

ペンギン先生 ペンギン先生

簡単に言うと、ブラウザCSSを処理するエンジンの中身にJavaScriptからアクセスできる仕組みだよ。たとえばPaint APIを使えば、CSSの背景にキャンバスのような自由な描画ができるんだ

ひよこ ひよこ

それってcanvasとは違うの?

ペンギン先生 ペンギン先生

canvasはHTMLの1要素だけど、Paint APICSSプロパティとして使えるんだ。background-imageにworkletを指定するだけで、どの要素にも適用できるし、リサイズにも自動対応するよ

ひよこ ひよこ

Paint API以外にもあるの?

ペンギン先生 ペンギン先生

Layout APIで独自のレイアウトアルゴリズムを作ったり、Properties and Values APIでカスタムプロパティに型や初期値を定義したりできるよ。Animation Workletでメインスレッドをブロックしないアニメーションも作れるんだ

ひよこ ひよこ

でもまだ全部のブラウザで使えるわけじゃないよね?

ペンギン先生 ペンギン先生

そうだね。Paint APIやProperties and Values APIはChromium系ブラウザで使えるけど、Layout APIやAnimation Workletはまだ実験的な段階。ただ、使える部分から段階的に採用する「プログレッシブ・エンハンスメント」で導入する現場も増えてきているよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
CSS Houdini」って出てきたら「CSSの内部エンジンを拡張できる低レベルAPI群」と思えればだいたいOK!
📖 おまけ:英語の意味
「CSS Houdini」 = CSS フーディーニ
💬 脱出王として知られるマジシャン「ハリー・フーディーニ」が由来。CSSの制約から「脱出」して自由な表現を可能にする、という意味が込められているよ
← 用語集にもどる