paint()
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Le type de données CSS paint() définit une valeur de type <image> générée avec un PaintWorklet.
Syntaxe
paint(workletName, ...parameters) Paramètres
workletName-
Le nom du worklet enregistré.
parametersFacultatif-
Des paramètres supplémentaires, optionnels, à passer à
paintWorklet.
Syntaxe formelle
<paint()> =
paint( <ident> , <declaration-value>? )
Exemples
Utilisation simple de paint()
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 le paint 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 type paint() 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 de paint() avec paramètres
Vous pouvez passer des arguments optionnels à la fonction CSS paint(). Dans cet exemple, nous passons deux arguments qui contrôlent si le background-image d'un groupe d'éléments de liste est « rempli » ou possède un contour (« stroke »), ainsi que la largeur de ce contour :
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 |