CSS Houdini を試してみた

2021年1月13日

お気付きかと思いますが、
トップページのエントリータイトルと
記事のタイトルにCSS Houdini
「Confetti(紙吹雪)と Multiple underline
(複数の下線)」
を実装しています。

では、
CSS Houdiniとは何でしょう？

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

CSS Houdini | MDN (mozilla.org)

・・・だそうですが、
イマイチよくわからない(汗

具体的なプロジェクトの
発足は不明ですが、
2016年あたりからニュースや
記事に取り上げられていますね。

簡単に言うと、JavaScriptからブラウザ本体をいじれるようにしよう！というプロジェクトです。 ブラウザの低レベルAPIを提供し、JavaScriptからブラウザの描画アクションにフックさせ、CSSからアクセス可能にします。

Houdini、それはCSSの進化を促すプロジェクト – The future starts today (hatenablog.com)

とどのつまり、
え？使いたいプロパティが古いブラウザに対応してない？
それならHoudiniを使って自分で作成すればいいじゃない！
と言う事のようです。

Houdiniに含まれるAPIのうち、
この記事でお話しているのは
「CSS Painting API」と呼ばれ、
現在、最もサポートされている
Houdini API の一つであり、
その仕様は W3C勧告候補です。

CSS Painting API は、CSS Houdini umbrellaの一部で、開発者は要素の背景、境界線、またはコンテンツに直接描画できる JavaScript 関数を記述できます。

CSS Painting API – Web APIs | MDN (mozilla.org)

現在、すべての
Chromiumベースのブラウザで有効になっており、
Safariで部分的にサポートされており、
Firefoxで検討中です。

しかし、完全なブラウザのサポートがなくても、
Houdini Paint APIを使用してクリエイティブになり、
CSS PaintPolyfillを使用して
すべての最新ブラウザでスタイルが機能することを
確認できます。

以下のExampleは、
Houdini.howのWorklet Libraryから
いくつか実装したものです。