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

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

Houdini ペイントワークレットを使用して CSS を強化する方法は、数クリックで簡単に利用できます。

Una Kravets

CSS Houdini は、デベロッパーが記述するスタイルをより細かく制御できる一連の低レベルのブラウザ API を表す包括的な用語です。

Houdini では、型付きオブジェクトモデルにより、よりセマンティックな CSS を実現できます。デベロッパーは、Properties and Values API を使用して、構文、デフォルト値、継承を備えた高度な CSS カスタムプロパティを定義できます。

また、ペイント、レイアウト、アニメーションのワークレットも導入されます。これにより、作成者はブラウザのレンダリングエンジンのスタイル設定とレイアウトプロセスに簡単にフックできるため、さまざまな可能性が開かれます。

Houdini ワークレットについて

Houdini ワークレットは、メインスレッドから実行され、必要に応じて呼び出せるブラウザインストラクションです。ワークレットを使用すると、モジュラー CSS を記述して特定のタスクを実行できます。インポートと登録には 1 行の JavaScript が必要です。CSS スタイルのサービスワーカーと同様に、Houdini ワークレットはアプリに登録され、登録後は CSS で名前で使用できます。

ワークレットファイルを作成するワークレットモジュールを登録する（CSS.paintWorklet.addModule(workletURL)）ワークレットを使用する（background: paint(confetti)）

CSS Painting API を使用して独自の機能を実装する

CSS Painting API は、このようなワークレット（Paint ワークレット）の例です。これにより、デベロッパーはキャンバスのようなカスタムペイント関数を定義し、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 ポリフィルを使用して、すべての最新ブラウザでスタイルが機能することを確認できます。独自の実装をいくつか紹介し、リソースとワークレットライブラリを提供するために、私のチームは houdini.how を構築しました。

Houdini.how

ワークレットページのスクリーンショット。 — Houdini.how ホームページのスクリーンショット。

Houdini.how は、Houdini ワークレットとリソースのライブラリとリファレンスです。CSS Houdini について知っておくべきすべての情報（ブラウザのサポート、さまざまな API の概要、使用方法、その他のリソース、ライブペイントワークレットのサンプル）が記載されています。Houdini.how の各サンプルは CSS Paint API をベースとしているため、すべての最新ブラウザで動作します。ぜひお試しください。

Houdini の使用

Houdini ワークレットは、ローカルでサーバー経由で実行するか、本番環境で HTTPS で実行する必要があります。Houdini ワークレットを使用するには、ローカルにインストールするか、unpkg などのコンテンツ配信ネットワーク（CDN）を使用してファイルを提供する必要があります。その後、ワークレットをローカルに登録する必要があります。

Houdini.how ショーケースワークレットを独自のウェブプロジェクトに組み込む方法はいくつかあります。プロトタイピング用に CDN 経由で使用することも、npm モジュールを使用して独自にワークレットを管理することもできます。どちらの場合も、CSS Paint Polyfill も含めて、クロスブラウザ互換性を確保する必要があります。

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 を生成し、その 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 リポジトリをご覧ください。皆様がどのようなデザインを生み出すのか、楽しみにしています！