API CSS Paint : worklets

L’API CSS Paint est une fonctionnalité de CSS Houdini qui vous permet d’écrire des fonctions de module JavaScript afin de générer des arrière-plans, des bordures et des masques de manière programmatique — ce qui étend les possibilités de rendu de background-image en CSS.

Un module de peinture est un fichier JavaScript qui s’exécute dans un espace de module séparé (et non sur le thread principal). Il enregistre un peintre CSS personnalisé qui peut être utilisé comme valeur CSS.

Une classe de module implémente la méthode paint() :

Chargez le module depuis votre JavaScript principal :

Référencez le nom du peintre enregistré dans toute propriété qui accepte une image :

Les peintres peuvent lire les propriétés personnalisées CSS en les déclarant comme propriétés d’entrée :

Le paramètre ctx est un PaintRenderingContext2D — une version limitée du contexte Canvas 2D. Vous utilisez des méthodes familières : fillRect, arc, bezierCurveTo, etc.

L’API CSS Paint permet :

• des arrière-plans géométriques complexes sans SVG
• des arrière-plans fondés sur des données variables (barres de progression, graphiques d’activité)
• des effets d’ondulation sur les boutons pilotés par des propriétés personnalisées
• des effets de bordure complexes (en tirets, hachurés)
• des séparateurs ondulés et des formes organiques

Les modules de peinture s’exécutent en dehors du thread principal (dans un contexte de module distinct) et ne redessinent l’interface que lorsque leurs propriétés personnalisées CSS changent. Cette approche est plus efficace que le dessin fondé sur Canvas, qui s’exécute sur le thread principal.

L’API CSS Paint est prise en charge dans Chrome 65 et versions ultérieures, ainsi que dans Edge 79 et versions ultérieures. Firefox et Safari ne la prennent pas en charge en 2024. Utilisez-la comme amélioration progressive.

Prévoyez toujours une solution de secours et utilisez @supports pour appliquer le module de peinture uniquement lorsqu’il est pris en charge :

Quelle méthode une classe de module de peinture CSS doit-elle implémenter pour effectuer le dessin ?

L’API CSS Paint permet aux modules JavaScript de générer des images CSS par programmation. Écrivez une classe avec une méthode paint(), enregistrez-la avec registerPaint(), chargez-la avec CSS.paintWorklet.addModule(), puis utilisez-la sous la forme background: paint(name). Les générateurs de peinture peuvent lire les propriétés personnalisées CSS pour créer des éléments visuels fondés sur des données. Prévoyez des solutions de secours avec @supports.