CSS Paint Worklet : Libérer les fonctions de dessin CSS personnalisées

Le web est un paysage en constante évolution, et le CSS ne fait pas exception. L'une des évolutions récentes les plus passionnantes est CSS Houdini, une collection d'API qui exposent des parties du moteur de rendu CSS, donnant aux développeurs un contrôle sans précédent sur le style et la mise en page. Parmi ces API puissantes, le CSS Paint Worklet se distingue comme un révolutionnaire, vous permettant de définir des fonctions de dessin personnalisées qui peuvent être utilisées partout où une image CSS est acceptée. Cela signifie que vous pouvez créer des effets dynamiques, performants et visuellement époustouflants directement dans votre CSS, sans dépendre de JavaScript ou d'images externes.

Qu'est-ce qu'un CSS Paint Worklet ?

Un CSS Paint Worklet est essentiellement un module JavaScript qui définit une fonction `paint()`. Cette fonction reçoit un contexte de dessin (similaire à un contexte d'API Canvas), la taille de l'élément en cours de dessin, et toutes les propriétés personnalisées que vous avez définies dans votre CSS. Vous pouvez ensuite utiliser ces informations pour dessiner tout ce que vous pouvez imaginer, des formes simples et des dégradés aux motifs complexes et aux animations.

Considérez-le comme un petit moteur de dessin dédié, spécifiquement pour votre CSS. C'est un fil d'exécution séparé (d'où "worklet") qui s'exécute en arrière-plan, garantissant que votre code de dessin ne bloque pas le fil principal et n'affecte pas les performances de votre site web.

Pourquoi utiliser les CSS Paint Worklets ?

Il existe plusieurs raisons convaincantes d'adopter les CSS Paint Worklets :

• Performance : En déchargeant les tâches de dessin sur un fil d'exécution séparé, les Paint Worklets peuvent améliorer considérablement les performances de votre site web, en particulier lorsqu'il s'agit d'effets visuels complexes.
• Flexibilité : Les Paint Worklets offrent une flexibilité inégalée pour créer des effets visuels personnalisés. Vous pouvez créer n'importe quoi, des simples dégradés et motifs aux animations complexes et visualisations de données, le tout dans votre CSS.
• Maintenabilité : En encapsulant votre logique de dessin dans un module dédié, les Paint Worklets peuvent rendre votre code CSS plus organisé et plus facile à maintenir.
• Réutilisabilité : Vous pouvez facilement réutiliser les Paint Worklets sur plusieurs éléments et projets, ce qui vous fait gagner du temps et des efforts.
• Style dynamique : Les Paint Worklets peuvent réagir aux propriétés personnalisées CSS (variables), vous permettant de créer des effets visuels dynamiques et réactifs qui s'adaptent à différentes tailles d'écran et interactions utilisateur.

Commencer avec les CSS Paint Worklets

Voici un guide étape par étape pour commencer avec les CSS Paint Worklets :

1. Créer un fichier JavaScript pour votre Paint Worklet

Ce fichier contiendra la fonction `paint()` qui définit votre logique de dessin personnalisée. Par exemple, créons un Paint Worklet simple qui dessine un motif à damier :

            
// checkerboard.js
registerPaint('checkerboard', class {
  static get inputProperties() {
    return ['--checkerboard-size', '--checkerboard-color-1', '--checkerboard-color-2'];
  }

  paint(ctx, geom, properties) {
    const size = Number(properties.get('--checkerboard-size'));
    const color1 = String(properties.get('--checkerboard-color-1'));
    const color2 = String(properties.get('--checkerboard-color-2'));

    for (let i = 0; i < geom.width / size; i++) {
      for (let j = 0; j < geom.height / size; j++) {
        ctx.fillStyle = (i + j) % 2 ? color1 : color2;
        ctx.fillRect(i * size, j * size, size, size);
      }
    }
  }
});

            

              
                Copy
              
            
          

Explication :

• `registerPaint('checkerboard', class { ... })`: Enregistre le Paint Worklet sous le nom 'checkerboard'. C'est le nom que vous utiliserez dans votre CSS pour référencer le worklet.
• `static get inputProperties() { ... }`: Définit les propriétés personnalisées CSS que le Paint Worklet utilisera. Dans ce cas, nous utilisons `--checkerboard-size`, `--checkerboard-color-1`, et `--checkerboard-color-2`.
• `paint(ctx, geom, properties) { ... }`: La fonction principale qui effectue le dessin. Elle reçoit le contexte de dessin (`ctx`), la géométrie de l'élément dessiné (`geom`), et les propriétés personnalisées (`properties`).
• `ctx.fillStyle = ...`: Définit la couleur de remplissage du contexte de dessin.
• `ctx.fillRect(i * size, j * size, size, size)`: Dessine un rectangle rempli aux coordonnées et dimensions spécifiées.

2. Enregistrer le Paint Worklet dans votre CSS

Dans votre fichier CSS, vous devez enregistrer le Paint Worklet en utilisant la méthode `CSS.paintWorklet.addModule()` :

            
// main.js (ou un fichier similaire qui charge avant votre CSS)
if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('checkerboard.js');
}

            

              
                Copy
              
            
          

Important : Ce code doit s'exécuter avant que vous n'essayiez d'utiliser le Paint Worklet dans votre CSS. Envisagez de le placer dans une balise `