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

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

わずか数クリックで、Houdini のペイントワークレットを使用して CSS を強化できます。

Una Kravets

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

Houdini では、Typed Object Model により、よりセマンティックな 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 があります。デベロッパーはこの API を使用して、背景、枠線、マスクなどとして CSS で直接使用できるキャンバスのようなカスタムペイント関数を定義できます。独自のユーザーインターフェースで CSS 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 ワークレットとリソースのライブラリとリファレンスです。ブラウザサポート、各種 API の概要、使用方法に関する情報、追加のリソース、ライブペイントワークレットのサンプルなど、CSS Houdini について知っておくべきすべての情報を提供します。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 リポジトリをご覧ください。皆様からの投稿をお待ちしております。