paint()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction CSS paint() définit une valeur de type image générée avec un PaintWorklet.

Syntaxe

css

paint(nomWorklet, parametres)

Paramètres

nomWorklet: Le nom du worklet enregistré.
paramètres: Des paramètres supplémentaires, optionnels, à passer à paintWorklet.

Exemples

Utilisation simple

Il est possible de passer des arguments supplémentaires grâce à la fonction CSS paint(). Dans cet exemple, on passe deux arguments : le premier indiquant si l'image passée en arrière-plan est pleine ou constitue uniquement un contour, le second indiquant la largeur du contour ainsi formé.

<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 11</li>
  <li>Élément 12</li>
  <li>Élément 13</li>
  <li>Élément 14</li>
  <li>Élément 15</li>
  <li>Élément 16</li>
  <li>Élément 17</li>
  <li>Élément 18</li>
  <li>Élément 19</li>
  <li>Élément 20</li>
</ul>

CSS.paintWorklet.addModule(
  "https://mdn.github.io/houdini-examples/cssPaint/intro/worklets/hilite.js",
);

css

li {
  --boxColor: hsla(55, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 2px);
}

li:nth-of-type(3n) {
  --boxColor: hsla(155, 90%, 60%, 1);
  background-image: paint(hollowHighlights, filled, 3px);
}

li:nth-of-type(3n + 1) {
  --boxColor: hsla(255, 90%, 60%, 1);
  background-image: paint(hollowHighlights, stroke, 1px);
}

On a ajouté une propriété personnalisée dans le sélecteur pour définir boxColor. Cette propriété personnalisée est accessible depuis l'objet PaintWorklet.

Spécifications

Specification
CSS Painting API Level 1 # paint-notation

Compatibilité des navigateurs

BCD tables only load in the browser