わずか数クリックで、Houdini のペイント ワークレットを使用して CSS を強化できます。
CSS の Houdini は、 では、デベロッパーが環境をより細かく制御および強化できる、一連の低レベル ブラウザ API について説明しています。 記述するスタイル。
Houdini では、Typed Object: セマンティックな CSS に対応しています。 モデル。デベロッパーは 構文、デフォルト値、継承を使用して高度な CSS カスタム プロパティを定義するには、 Properties and Values API。
また、ペイント、レイアウト、アニメーションも導入されます。 ワークレットを使用すると、 作成者がスタイルとレイアウトのプロセスを簡単に把握できるようにすることで、さまざまな可能性を秘めています。 使用されます
Houdini ワークレットについて
Houdini ワークレットは、メインスレッドから実行されるブラウザの指示で、 必要ありません。ワークレットを使用すると、特定のタスクを実行するモジュラー CSS を記述できます。また、 インポートして登録する JavaScript 行。CSS スタイルの Service Worker と同様に、Houdini ワークレット がアプリケーションに登録され、一度登録されると、名前で CSS で使用できます。
ワークレット ファイルの書き込み ワークレット モジュールの登録（CSS.paintWorklet.addModule(workletURL)） ワークレットの使用
(background: paint(confetti))
CSS Painting API を使用して独自の機能を実装する
CSS Painting API は、 ワークレット（Paint ワークレット）。デベロッパーはキャンバスのようなカスタム ペイント関数を定義できます。 背景、枠線、マスクなどとして CSS で直接使用できます。多岐にわたる世界が存在します。 独自のユーザー インターフェースで CSS ペイントを使用する方法の可能性。
たとえば、ブラウザで斜めの枠線機能が実装されるのを待つのではなく、次のように記述できます。 独自のペイント ワークレットを使用するか、既存の公開済みワークレットを使用できます。境界の半径を使用するのではなく、 このワークレットを枠線とクリッピングに適用します。
<ph type="x-smartling-placeholder">.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 の一つであり、その仕様は W3C です。 おすすめします。現在のところ、Chromium ベースのすべてのブラウザで、部分的に有効になっています をサポートしており、Firefox でも検討中です。
<ph type="x-smartling-placeholder">
ただし、ブラウザが完全にサポートされていなくても、Houdini Paint API を使用すれば、クリエイティビティを発揮できます。 CSS ペイントを使用すると、あらゆる最新ブラウザでスタイルを適用できます。 ポリフィル。また、Google Cloud の リソースとワークレット ライブラリを提供するため、 houdini.how.
Houdini.how
<ph type="x-smartling-placeholder">
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>
CSS Paint Polyfill を unpkg に含めるには:
<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 ペイント ポリフィルを組み込むか、直接インポートする必要もあります。 Bundler によってのみ取得されます。
以下に、最新のバンドラで 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 リポジトリをご覧ください。 皆様のご意見をぜひお聞かせください。