paint()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
構文
css
paint(workletName, ...parameters)
凡例
- workletName
-
登録された Worklet の名前です。
- parameters
-
PaintWorklet へ渡される省略可能な追加の引数です。
形式文法
<paint()> =
paint( <ident> , <declaration-value>? )
例
基本的な CSS paint() の使用例
次の HTML があったとします。
html
<ul>
<li>アイテム 1</li>
<li>アイテム 2</li>
<li>アイテム 3</li>
<li>アイテム 4</li>
<li>アイテム 5</li>
<li>アイテム 6</li>
<li>アイテム 7</li>
<li>アイテム 8</li>
<li>アイテム 9</li>
<li>アイテム 10</li>
<li>アイテム N</li>
</ul>
JavaScript では、描画ワークレットを登録します。
js
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",
);
CSS では、background-image を paint() 型として定義し、ワークレット名 boxbg をつけて、ワークレットが使用する変数（例：--box-color および --width-subtractor）を指定します。
css
body {
font: 1.2em / 1.2 sans-serif;
}
li {
background-image: paint(boxbg);
--box-color: hsl(55 90% 60%);
}
li:nth-of-type(3n) {
--box-color: hsl(155 90% 60%);
--width-subtractor: 20;
}
li:nth-of-type(3n + 1) {
--box-color: hsl(255 90% 60%);
--width-subtractor: 40;
}
引数付きの CSS paint()
CSS の paint() 関数ではオプション引数を渡すことができます。この例では、リストアイテムのグループにおける background-image を filled（塗りつぶし）にするか stroke（ストローク）の輪郭線を持つかを制御する 2 つの引数と、その輪郭線の width（幅）を渡しています。
css
body {
font: 1.2em / 1.2 sans-serif;
}
li {
--box-color: hsl(55 90% 60% / 100%);
background-image: paint(hollow-highlights, stroke, 2px);
}
li:nth-of-type(3n) {
--box-color: hsl(155 90% 60% / 100%);
background-image: paint(hollow-highlights, filled, 3px);
}
li:nth-of-type(3n + 1) {
--box-color: hsl(255 90% 60% / 100%);
background-image: paint(hollow-highlights, stroke, 1px);
}
boxColor を定義しているセレクターブロックにカスタムプロパティを設定しました。カスタムプロパティは PaintWorklet にアクセスすることができます。
仕様書
| Specification |
|---|
| CSS Painting API Level 1 # paint-notation |