用語集 › 🕸️ Web › CSS Houdini
【シーエスエスフーディーニ】

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 APIはCSSプロパティとして使えるんだ。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の制約から「脱出」して自由な表現を可能にする、という意味が込められているよ
🔗 あわせて読みたい
← 用語集にもどる