paint()

Experimental

これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

paint()CSS の関数で、 PaintWorklet で生成された <image> の値を定義します。

構文

paint(workletName, parameters)

凡例

workletName
登録された Worklet の名前です。
parameters
PaintWorklet へ渡される省略可能な追加の引数です。

CSS の paint() 関数で追加の引数を渡すことができます。この例では、二つの引数を渡しています。リストアイテムのグループの背景画像が塗りつぶしか輪郭線だけかと、輪郭線の太さです。

li {
   --boxColor: hsla(55, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
   --boxColor: hsla(155, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, filled,  3px);
}

li:nth-of-type(3n+1) {
   --boxColor: hsla(255, 90%, 60%, 1.0);
   background-image: paint(hollowHighlights, stroke, 1px);
}

boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。

仕様書

仕様書 状態 備考
CSS Painting API Level 1
Paint Notation の定義
草案 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報