このページは Cloud Translation API によって翻訳されました。

クロスブラウザのペイントワークレットと Houdini.how

数回クリックするだけで、Houdini のペイントワークレットで CSS を強化できます。

Una Kravets

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 を使用する代わりに、このワークレットを境界とクリッピングに適用します。

上記の例では、同じペイントワークレットを異なる引数（以下のコードを参照）で使用して、この結果を実現しています。Glitch でのデモをご覧ください。

.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 での使用も検討中です。

Caniuse のサポート — CSS Painting API は現在、Chromium ベースのブラウザでサポートされています。

ただし、ブラウザが完全にサポートされていなくても、Houdini Paint API を使用すれば、クリエイティブなスタイルにすることができます。また、CSS Paint Polyfill を使えば、すべての最新ブラウザでスタイルが機能するのを確認できます。そして、独自の実装をいくつか紹介し、リソースとワークレットライブラリを提供するため、私のチームは houdini.how を構築しました。

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 リポジトリをご確認ください。どのようなアイデアが浮かんだか、ぜひお聞かせください。