このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
paint()
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
構文
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(幅)を渡しています。
<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>
CSS.paintWorklet.addModule(
"https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);
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 にアクセスすることができます。
[フレーム]
仕様書
| 仕様書 |
|---|
| CSS Painting API Level 1 # paint-notation |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。