paint()

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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 の定義
草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
paint()Chrome 完全対応 65Edge 完全対応 79Firefox 未対応 なしIE 未対応 なしOpera 完全対応 52Safari 未対応 なしWebView Android 完全対応 65Chrome Android 完全対応 65Firefox Android 未対応 なしOpera Android 完全対応 47Safari iOS 未対応 なしSamsung Internet Android 完全対応 9.2

凡例

完全対応  
完全対応
未対応  
未対応

関連情報