// シス担のミカタ
フロントエンド - CSS・スタイリング

CSS Houdini しーえすえす ふーでぃに

CSS Custom PropertiesPaint APIWorkletCSS Typed OMブラウザレンダリングポリフィル
Houdiniについて教えて

簡単に言うとこんな感じ！

CSSの「中身」に直接手を入れられる魔法のAPIセットだよ！今まで「CSSでは無理だからJavaScriptで頑張るしかない…」だったカスタムエフェクトが、ブラウザのレンダリングエンジンに直結して超高速で動かせるようになるんだ。名前の由来は脱出マジシャンのフーディニ、つまり「CSSの制約から脱出する」ってことなの！

CSS Houdiniとは

CSS Houdini（フーディニ）は、CSSのレンダリングエンジン（ブラウザが画面を描画する仕組み）の一部を開発者向けに開放する、複数のAPIの総称です。通常のCSSは「ブラウザが用意したプロパティを組み合わせるだけ」でしたが、Houdiniを使うとブラウザが行う描画・レイアウト・アニメーションの処理に直接フックを書き込めるようになります。

たとえばこれまで、特殊なグラデーションやカスタムチェックボックス、複雑なアニメーションを実装したい場合は、JavaScriptでDOMを操作するか、Canvas要素で描画するしかありませんでした。これらの手法は「メインスレッドをブロックする」（他の処理を止めてしまう）という問題がありパフォーマンスが落ちやすい弱点がありました。Houdiniはブラウザのレンダリングパイプラインに低レベルでアクセスできる公式の手段を提供し、ハイパフォーマンスなカスタムスタイルを実現します。

Houdiniは単一の仕様ではなく、W3CのCSS Working Groupが策定する複数の仕様（API群）のまとめ名です。各APIが段階的にブラウザに実装されており、2024年現在ではChromiumベースのブラウザを中心に主要なAPIが利用可能になっています。

Houdiniを構成するAPI群

API名役割主な用途
Paint APIカスタム背景・ボーダーの描画ウェーブ背景、カスタムチェックボックス
Animation Workletメインスレッド外でのアニメーション制御スクロール連動アニメーション
Layout APIカスタムレイアウトアルゴリズムMasonry風レイアウト
CSS Typed OMCSSプロパティの型付きJSアクセスパフォーマンスの高いCSS値操作
Properties & Values APIカスタムプロパティに型・初期値を定義CSS変数の型安全な利用
Parser APICSSの解析フック独自CSS記法の追加（仕様策定中）
Font Metrics APIフォントのメトリクスへのアクセステキスト描画の精密制御（策定中）

覚え方：「Houdiniは脱出マジシャン」

CSSの「できない」制約から脱出するための鍵がHoudiniだと覚えましょう。各APIはすべて「ブラウザのここにアクセスできなかった」という壁を一枚ずつ取り除くものです。

Workletとは何か

Houdiniの多くのAPIはWorklet（ワークレット）という仕組みを使います。WorkletはWeb Workerに似た「メインスレッドとは別の軽量なJavaScript実行環境」です。描画やアニメーションの計算をメインスレッドから切り離すことで、ページの動作をブロックせず滑らかな表示を実現します。

通常のJS操作
  メインスレッド ──── JS処理 ──── レイアウト ──── ペイント ──── 表示
                       ↑ ここが詰まるとカクつく

Houdiniを使った場合
  メインスレッド ──────────────── レイアウト ──── ペイント ──── 表示
  Worklet       ──── カスタム処理─────────────────↑ 直接フック

歴史と背景

  • 2013年頃：Webのスタイリングはベンダープレフィックス（-webkit-など）が乱立。ブラウザ差異に悩まされ、新しいCSSプロパティの普及に何年もかかる問題が顕在化
  • 2016年：「CSS Houdini Task Force」がW3CとApple・Google・Mozilla・Microsoftなどの主要ブラウザベンダー合同で発足。“脱出マジシャン”の名前はこの時期に付けられた
  • 2018年：Chrome 65でPaint APIが初めて実装され、実用段階に突入
  • 2019年：CSS Properties & Values API（CSS.registerProperty()）がChromeに実装。CSS変数に型と初期値を定義できるように
  • 2020年：Animation Workletがオリジントライアル（試験公開）。@propertyルール（Properties & Values APIの宣言的記法）がChrome 85で実装
  • 2021年：@propertyがW3Cの勧告候補に昇格。各ブラウザへの実装が加速
  • 2023年：@propertyがFirefox・Safariでも実装完了し、主要3ブラウザで利用可能に
  • 2024年現在：Paint APIはChromiumベースで安定、Layout APIはまだ実験的。ポリフィル（古いブラウザ向け代替実装）も整備されてきている

HoudiniとこれまでのCSSカスタマイズの比較

従来手法との違い

CSSカスタマイズ手法の比較 通常のCSS ブラウザ任せの描画 カスタム不可 型なしCSS変数 （文字列として扱われる） 新機能はブラウザの 実装待ち パフォーマンス制御 不可 JS+DOM操作 何でもカスタム可能 ただし記述量が多い メインスレッド処理 →カクつきやすい CSSと責務が混在 保守しにくい 再利用しにくい （コンポーネント依存） CSS Houdini 描画を自由にカスタム CSSとして宣言的に使える Workletで別スレッド処理 →高パフォーマンス カスタムプロパティに型 →アニメーションも滑らか 再利用可能な カスタムペイント部品 シンプルだが限界あり 柔軟だがコスト高 両方のいいとこどり

Paint APIのコード例

最も広く使われているPaint APIを使ったカスタム背景の例です。

// my-painter.js（Workletファイル）
registerPaint('wavy-background', class {
  static get inputProperties() {
    return ['--wave-color', '--wave-height'];
  }
  paint(ctx, size, properties) {
    const color = properties.get('--wave-color').toString();
    const height = parseInt(properties.get('--wave-height'));
    ctx.beginPath();
    ctx.moveTo(0, size.height / 2);
    for (let x = 0; x < size.width; x++) {
      ctx.lineTo(x, size.height / 2 + Math.sin(x * 0.05) * height);
    }
    ctx.strokeStyle = color;
    ctx.lineWidth = 2;
    ctx.stroke();
  }
});
/* CSSでカスタムペインターを呼び出す */
.hero {
  --wave-color: #3b82f6;
  --wave-height: 20;
  background: paint(wavy-background);
}
// HTMLのscriptでWorkletを登録
CSS.paintWorklet.addModule('my-painter.js');

@property による型付きカスタムプロパティ（最も普及している機能）

/* 型と初期値を定義することでアニメーションが滑らかになる */
@property --hue-rotate {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.colorful {
  filter: hue-rotate(var(--hue-rotate));
  transition: --hue-rotate 1s ease;
}
.colorful:hover {
  --hue-rotate: 180deg;
}

通常のCSS変数（--hue-rotate: 0deg のような記述だけ）はブラウザが「ただの文字列」として扱うのでアニメーションできません。@property で <angle> 型と宣言することで値の補間（トゥイーン）が可能になります。

関連する規格・RFC

規格内容
CSS Houdini W3C WikiHoudini Task Forceの仕様一覧・進捗まとめ
CSS Properties and Values API Level 1@property / CSS.registerProperty() の公式仕様（W3C勧告候補）
CSS Painting API Level 1Paint Workletの公式仕様（W3C勧告候補）
CSS Typed OM Level 1型付きCSSプロパティアクセスの公式仕様
Web AnimationsAnimation Workletのベースとなるアニメーションモデル仕様

関連用語

  • CSS Custom Properties — CSS変数（--variable）の仕組み。Houdiniで型定義できるようになる
  • Web Workers — メインスレッドと別にJSを動かす仕組み。WorkletはこれのCSS特化版
  • Canvas API — JS+<canvas>で自由に描画する従来手法。Paint APIの代替だった
  • CSS Animations — @keyframesによるCSSアニメーション。Houdiniで制御範囲が広がる
  • CSS Cascade — CSSの適用優先順位の仕組み。Houdiniはここに深く関わる
  • レンダリングパイプライン — ブラウザが画面を描画する処理フロー。Houdiniが介入する対象
  • ポリフィル — 新しいAPI未対応ブラウザへの代替実装。Houdiniにも公式ポリフィルが存在する
  • Web Components — カスタムHTML要素を作る仕組み。Houdiniと組み合わせてデザインシステムを構築できる