Exploration de la nouvelle API CSS Houdini Painting | par Gerard van der Put | Meilleure programmation | Janv.2021

Online Coding Courses for Kids

En utilisant cette API, nous pouvons dessiner des images par programmation et utiliser ces images dans notre CSS. Voici ce que nous allons créer:

Assez impressionnant, ce sont trois éléments DIV et trois éléments DIV uniquement.

Notre fichier index.html en est la preuve:

Le «style» (dessin…) de l’arrière-plan des trois volets est réalisé avec l’API Peinture, par programmation. Les trois volets sont dessinés par la même fonction.

Jetons un œil à la classe CSS pane dans notre feuille de style:

nous peindre quelque chose appelé vitre, à la ligne 2. Cela nécessite des explications, et nous y reviendrons bientôt.

Il peut être important de noter que la fonction de peinture n’est pas exécutée une seule fois. Il est exécuté – et repeint l’image – chaque fois que le moteur de rendu du navigateur lui donne des instructions pour le faire. Des exemples de ce qui se produit sont lorsque l’utilisateur redimensionne la fenêtre du navigateur, ou lorsque d’autres propriétés CSS de l’élément DIV changent et que l’élément DIV obtient une autre dimension.

Puisque notre fonction sera “accrochée” au moteur de rendu, c’est une opération très performante et peu coûteuse.

En dehors de cela, il convient de mentionner que tous nos volets ont une taille de police différente (gardez cela à l’esprit, nous y reviendrons plus tard). Et nous voyons deux variables CSS personnalisées utilisées:

  • ‑‑dot‑spacing
  • ‑‑pane‑color

Les variables CSS ne sont pas nouvelles. Ils existent depuis 2014/2016 (resp. Firefox / Google Chrome). Mais l’une des nouvelles API CSS Houdini appelée API de propriétés et de valeurs CSS permettez nous de S’inscrire ces variables personnalisées afin que le navigateur en saura plus sur eux, ce qui vous sera utile.

Dans notre feuille de style, nous pouvons les enregistrer comme ceci:

Notez que nous aurions pu aussi faire ceci en JavaScript. Le résultat sera le même.

Alors pourquoi faisons-nous cela? Maintenant, notre navigateur et son moteur de rendu connaissent les détails de ces propriétés. Il sait que ‑‑pane‑color contient un valeur de couleur et que la valeur par défaut est «# 646464». Et ‑‑dot‑spacing contient un valeur de longueur, par défaut à «5px».

Nos deux nouvelles variables s’appellent désormais variables personnalisées enregistrées.

Retour à cette ligne:

background-image: paint(pane);

L’API Peinture nous permet de peindre une image. le paint La fonction reçoit un paramètre. Ce paramètre est un Classe JavaScript qui est enregistré en tant que Peindre dans un fichier appelé worklet.js:

Mais! Ce code ne peut pas être exécuté dans notre environnement d’exécution JavaScript normal. Il doit être exécuté dans un soi-disant – d’où le nom de fichier – Worklet:

«L’interface Worklet est une version légère de Web Workers et permet aux développeurs d’accéder à des parties de bas niveau du pipeline de rendu. Avec les Worklets, vous pouvez exécuter du code JavaScript et WebAssembly pour effectuer le rendu graphique ou le traitement audio lorsque des performances élevées sont requises. »

Nous pouvons nous assurer que le Worklet sera exécuté en ajoutant la ligne suivante à notre fichier JavaScript standard (main.js), qui est chargé dans index.html, comme ceci:

// main.js
CSS.paintWorklet.addModule("worklet.js");

Si cet appel renvoie une erreur, votre navigateur ne prend pas en charge l’API de peinture.

Maintenant, notre classe Paint «Pane» est enregistrée sous le nom «pane», et nous pouvons l’utiliser dans notre CSS comme nous l’avons vu précédemment:

background-image: paint(pane);

Détails du volet de classe Paint

Passons en revue les détails de la classe Paint dans worklet.js:

La fonction statique inputProperties devrait renvoyer une liste de propriétés CSS qui nous intéressent lorsque nous dessinerons notre image. Ceci est arbitraire et vous pouvez ajouter n’importe quelle propriété CSS de votre choix.

La valeur renvoyée par contextOptions indique que nous voulons pouvoir utiliser la transparence dans notre canevas.

Et enfin, sur la ligne 10, le paint fonction. Dans cette fonction, nous ferons le dessin proprement dit. Dans notre cas, il reçoit trois paramètres:

  1. ctx: le contexte 2D de notre toile. Cela devrait sonner une cloche si vous connaissez l’élément HTML Canvas standard.
  2. size: une PaintSize instance avec deux propriétés: .width et .height. Ce sont les dimensions calculées de l’élément HTML pour lequel nous dessinons une image. Y compris le rembourrage, si défini.
  3. styleMap: une représentation en lecture seule d’un bloc de déclaration CSS (la source). C’est une instance d’un StylePropertyMapReadOnly et ne contient que des valeurs pour les propriétés que nous avons définies dans la fonction statique inputProperties.

Pour plus de détails sur le dernier paramètre, vous pouvez lire sur le API de modèle d’objet typé CSS et / ou lire sur le StylePropertyMapReadOnly interface.

Pointe: Vous pouvez obtenir un StylePropertyMapReadOnly complet (contenant tous les styles CSS calculés) pour tout élément HTML du DOM en appelant computedStyleMap, dans les navigateurs qui le prennent en charge:

const styleMap =
document.getElementById('myElement').computedStyleMap();

Pour clarifier comment nous pouvons récupérer les valeurs d’une telle instance, j’ai créé un extrait de code avec quelques commentaires en ligne:

Close Menu