Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
paint()
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Letype de donnéesCSSpaint() définit une valeur de type<image> générée avec unPaintWorklet.
Syntaxe
paint(workletName, ...parameters)Paramètres
workletNameLe nom duworklet enregistré.
parametersFacultatifDes paramètres supplémentaires, optionnels, à passer à
paintWorklet.
Syntaxe formelle
<paint()> =
paint(<ident> ,<declaration-value>?)
Exemples
Utilisation simple depaint()
A partir du HTML suivant :
<ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> <li>Élément 4</li> <li>Élément 5</li> <li>Élément 6</li> <li>Élément 7</li> <li>Élément 8</li> <li>Élément 9</li> <li>Élément 10</li> <li>Élément N</li></ul>Avec JavaScript, nous enregistrons lepaint worklet :
CSS.paintWorklet.addModule( "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/boxbg.js",);Dans le CSS, on définit la propriétébackground-image comme un typepaint() avec le nom du worklet,boxbg, ainsi que toutes les variables (par ex. :--box-color et--width-subtractor) que le worklet utilisera :
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;}Utilisation depaint() avec paramètres
Vous pouvez passer des arguments optionnels à la fonction CSSpaint(). Dans cet exemple, nous passons deux arguments qui contrôlent si lebackground-image d'un groupe d'éléments de liste est « rempli » ou possède un contour (« stroke »), ainsi que la largeur de ce contour :
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item N</li></ul>CSS.paintWorklet.addModule( "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",);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);}On a inclus une propriété personnalisée dans le bloc du sélecteur définissant une couleur de boîte (boxColor). Les propriétés personnalisées sont accessibles au PaintWorklet.
Spécifications
| Specification |
|---|
| CSS Painting API Level 1 # paint-notation |