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

css

paint(workletName, ...parameters)

Paramètres

workletName: Le nom du worklet enregistré.
parameters Facultatif: 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 :

html

<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 :

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;
}

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 :

<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",
);

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);
}

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

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨14 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content