数回クリックするだけで、Houdini のペイント ワークレットで CSS を強化できます。
CSS Houdini とは、デベロッパーが作成するスタイルをより詳細に制御、強化できる、一連の低レベルのブラウザ API の総称です。
Houdini では、型付きオブジェクト モデルによって、よりセマンティックな CSS を実現しています。デベロッパーは、Properties and Values API を使用して、構文、デフォルト値、継承を備えた高度な CSS カスタム プロパティを定義できます。
また、ペイント、レイアウト、アニメーションのワークレットも導入され、作成者がブラウザのレンダリング エンジンのスタイル設定とレイアウト プロセスを簡単に利用できるようになるため、可能性の世界が広がります。
Houdini ワークレットについて
Houdini ワークレットは、メインスレッド外で実行され、必要に応じて呼び出すことができるブラウザの命令です。ワークレットを使用すると、特定のタスクを実行するためのモジュラー CSS を作成できます。インポートと登録に JavaScript を 1 行入力するだけで済みます。CSS スタイルの Service Worker と同様に、Houdini ワークレットはアプリケーションに登録され、登録後は CSS で名前を指定して使用できます。
ワークレット ファイルの書き込み ワークレット モジュールの登録(CSS.paintWorklet.addModule(workletURL)
) ワークレットの使用(background: paint(confetti)
)
CSS Painting API を使用して独自の機能を実装する
このようなワークレット(Paint ワークレット)の一例である CSS Painting API を使用すると、デベロッパーは背景、枠線、マスクなどとして CSS で直接使用できるキャンバスのようなカスタム ペイント関数を定義できます。独自のユーザー インターフェースで CSS Paint を使用する方法は無限にあります。
たとえば、ブラウザで角度付き枠線機能が実装されるのを待たずに、独自の Paint ワークレットを作成したり、既存の公開済みワークレットを使用したりできます。次に、border-radius を使用する代わりに、このワークレットを境界とクリッピングに適用します。
.angled {
--corner-radius: 15 0 0 0;
--paint-color: #6200ee;
--stroke-weight: 0;
/* Mask every angled button with fill mode */
-webkit-mask: paint(angled-corners, filled);
}
.outline {
--stroke-weight: 1;
/* Paint outline */
border-image: paint(angled-corners, outlined) 0 fill !important;
}
現在、CSS Painting API は最もサポートされている Houdini API の 1 つであり、その仕様は W3C の推奨案です。この機能は現在、Chromium ベースのすべてのブラウザで有効になっており、Safari では部分的にサポートされています。Firefox での使用も検討中です。
ただし、ブラウザが完全にサポートされていなくても、Houdini Paint API を使用すれば、クリエイティブなスタイルにすることができます。また、CSS Paint Polyfill を使えば、すべての最新ブラウザでスタイルが機能するのを確認できます。そして、独自の実装をいくつか紹介し、リソースとワークレット ライブラリを提供するため、私のチームは houdini.how を構築しました。
Houdini.how
Houdini.how は、Houdini のワークレットとリソースのライブラリおよびリファレンスです。ブラウザのサポート、さまざまな API の概要、使用方法の情報、追加のリソース、ライブペイント ワークレットのサンプルなど、CSS Houdini について知っておくべきことがすべて揃っています。Houdini.how の各サンプルは CSS Paint API を基盤としており、最新のすべてのブラウザで動作します。試してみる
Houdini の使用
Houdini ワークレットは、サーバーを介してローカルで実行するか、本番環境の HTTPS 上で実行する必要があります。Houdini ワークレットを操作するには、ローカルにインストールするか、unpkg などのコンテンツ配信ネットワーク(CDN)を使用してファイルを提供する必要があります。次に、ワークレットをローカルで登録する必要があります。
Houdini.how は、独自のウェブ プロジェクトにショーケース ワークレットを組み込む方法がいくつかあります。これらは、プロトタイピング能力で CDN を介して使用することも、npm モジュールを使用して独自にワークレットを管理することもできます。どちらの場合も、CSS ペイント ポリフィルを含めて、ブラウザ間の互換性を確保する必要があります。
1. CDN を使用したプロトタイピング
unpkg から登録する場合は、ワークレットをローカルにインストールしなくても、worklet.js ファイルに直接リンクできます。unpkg はメイン スクリプトとして worklet.js に解決されますが、自身で指定することもできます。unpkg は HTTPS 経由で提供されるため、CORS の問題は発生しません。
CSS.paintWorklet.addModule("https://unpkg.com/<package-name>");
構文とフォールバック値のカスタム プロパティは登録されません。代わりに、ワークレットにフォールバック値が埋め込まれています。
必要に応じてカスタム プロパティを登録するには、properties.js ファイルも含めます。
<script src="https://unpkg.com/<package-name>/properties.js"></script>
unpkg に CSS Paint Polyfill を含めるには:
<script src="https://unpkg.com/css-paint-polyfill"></script>
2. NPM を使用したワークレットの管理
npm からワークレットをインストールします。
npm install <package-name>
npm install css-paint-polyfill
このパッケージをインポートしても、ペイント ワークレットは自動的に挿入されません。ワークレットをインストールするには、パッケージの worklet.js に解決される URL を生成し、それを登録する必要があります。これは次のように行います。
CSS.paintWorklet.addModule(..file-path/worklet.js)
npm パッケージ名とリンクは、各ワークレット カードにあります。
また、フレームワークやバンドラの場合と同様に、スクリプトを使用して CSS Paint Polyfill を含めるか、直接インポートする必要があります。
最新のバンドラでペイント ポリフィルと Houdini を使用する方法の例を次に示します。
import 'css-paint-polyfill';
import '<package-name>/properties.js'; // optionally register properties
import workletURL from 'url:<package-name>/worklet.js';
CSS.paintWorklet.addModule(workletURL);
投稿
Houdini のサンプルを実際に使ってみたところで、今度は自分のサンプルを投稿してみましょう。 Houdini.how は、それ自体がワークレットをホストするのではなく、コミュニティの取り組みを紹介しています。提出するワークレットやリソースがある場合は、コントリビューション ガイドラインを含む GitHub リポジトリをご確認ください。どのようなアイデアが浮かんだか、ぜひお聞かせください。