👯 👼 🙏 API de peinture CSS 🤛🏻 👨🏽‍🌾 🎅🏼

Selon l'auteur du document, dont nous publions la traduction aujourd'hui, l'API CSS Paint est une technologie incroyablement intéressante. De plus, nous parlons non seulement de ses capacités actuelles, mais aussi des phénomènes qui lui sont présentés, et que son apparition marque le début de changements très remarquables dans le monde CSS. Ici, nous allons parler de l'API CSS Paint et des raisons de son apparition, et parler de la façon de l'utiliser.

Qu'est-ce que l'API CSS Paint?

L'API en question n'est qu'une petite partie du nouvel ensemble de spécifications en cours de développement dans le cadre du projet CSS Houdini. Décrivant brièvement ce projet, son essence se résume au fait qu'il donne aux développeurs un accès de bas niveau aux mécanismes CSS internes.

L'API CSS Paint vous permet d'appeler la fonction paint() dans des situations où, dans des conditions normales, le travail serait effectué, par exemple, avec une certaine valeur qui décrit une sorte d'image. Un exemple courant de ceci est la propriété background-image , lorsque vous travaillez avec laquelle vous pouvez utiliser la fonction url() pour transmettre au système un lien vers le fichier image:

 area { background-image: url('assets/myimage.jpg'); }

L'API CSS Paint vous permet d'appeler, au lieu d'une fonction similaire, la fonction paint() , et de lui passer le soi-disant worklet, décrit par JavaScript. Un vorklet peut être perçu comme un morceau de code qui permet à un développeur de dessiner par programme presque tout ce qu'il veut. Et, puisque nous parlons de JavaScript, l'image peut être rendue dynamique. En soi, cette API est très similaire à l'API HTML5 Canvas, et nous allons maintenant parler de la façon dont tout cela fonctionne.

Fonctionnalités de l'API CSS Paint

Si maintenant vous avez le sentiment que tout cela semble bon, mais semble compliqué, et que vous pensez que vous êtes assez à l'aise avec des images ordinaires, gardez à l'esprit que les images ordinaires ne perdent pas leur pertinence avec l'avènement des nouvelles technologies. Les utiliser, comme ils l'ont toujours fait, est parfaitement normal. Le fait que quelque chose de nouveau soit apparu à l'horizon, et probablement prometteur, ne signifie pas que tout le monde doit immédiatement utiliser cette nouvelle solution pour résoudre tous les problèmes existants. Cependant, les images ordinaires sont statiques. La nouvelle API attire avec l'idée de créer des images dynamiques.

Pensons au gradient linéaire de la fonction CSS. La chose est très puissante. Jetez un œil à cela par exemple. Mais pouvez-vous imaginer à quel point il serait plus facile d'obtenir le même effet formé par des calques superposés si vous n'aviez pas à utiliser beaucoup d'images d'arrière-plan? Mais ce n'est pas le seul point. Si vous explorez l'API CSS Paint, vous pouvez comprendre comment ces images sont créées lors de l'exécution du programme, ce qui peut être très utile (en fait, c'est ce que nous prévoyons de faire ici).

Qu'en est-il de la fonction CSS à gradient conique ? On peut dire qu'il n'est pas encore supporté par les navigateurs sans polyfill. L'utilisation de la nouvelle API vous permet de créer des dégradés coniques, d'ajuster leurs paramètres, qui ne sont pas particulièrement différents de ceux de la spécification. Tout cela signifie qu'en pratique, en utilisant la nouvelle API, vous pouvez créer votre propre polyfill natif. Et c'est tout simplement merveilleux.

Gardez à l'esprit que tout cela fait partie d'un groupe plus large de fonctionnalités connues sous le nom de CSS Houdini. Voici ce que la documentation du projet en dit: "Le but du CSS-TAG Houdini Task Force (CSS Houdini) est de développer conjointement des mécanismes qui brisent le mystère de la technologie de stylisation des pages Web et de construction de leurs mises en page."

Sonne bien, non? Et, en fait, ces nouveaux mécanismes visent à permettre aux développeurs d'étendre les fonctionnalités de CSS lui-même, en leur donnant de meilleurs outils de style, une prise en charge multi-navigateur et la possibilité de créer des polyfills.

Le processus de normalisation des nouvelles technologies peut prendre un certain temps. Tout d'abord, une suggestion est faite pour une nouvelle fonctionnalité CSS. Ensuite - une spécification est écrite, d'autres processus se produisent. En conséquence, les fabricants de navigateurs mettent en œuvre de nouvelles spécifications. Et, comme les développeurs ne peuvent souvent pas attendre pour commencer à utiliser de nouvelles fonctionnalités le plus tôt possible, ils doivent tenir compte du fait que les navigateurs plus anciens peuvent ne pas prendre en charge les innovations, et que si certaines spécifications ne sont pas encore entièrement implémentées, elles peuvent, au cours de leur développement, changer sérieusement. Il n'y a peut-être rien à dire sur les nuances typiques de la mise en œuvre de différentes technologies dans différents navigateurs. Le projet Houdini peut aller assez loin pour atténuer ces problèmes, nous permettant de développer nous-mêmes la fonctionnalité du navigateur, de l'utiliser et d'attendre calmement que les fabricants de navigateurs mettent en œuvre certaines fonctionnalités. Voici quelques documents sur ce sujet. Le premier est dédié aux atouts d'Houdini, et le second est d'utiliser les capacités de ce projet pour créer des animations complexes.

Prise en charge de l'API CSS Paint par les navigateurs

Puis-je utiliser l'API CSS Paint aujourd'hui? Nous pouvons donner une réponse positive à cette question, même s'il convient de noter que loin de tous les navigateurs prennent en charge cette technologie. Pour obtenir des informations de support pour cette API, vous pouvez utiliser la ressource caniuse.com .

Prise en charge de l'API CSS Paint par différents navigateurs (juillet 2018)

Comme vous pouvez le voir, cette API ne prend en charge que Chrome jusqu'à présent. Mais quoi qu'il en soit, parlons de la façon de l'utiliser. Nous couvrirons les constructions logicielles nécessaires pour faire fonctionner la nouvelle API. Cela inclut de nouvelles fonctionnalités CSS et certains mécanismes JavaScript assez récents. Notre exemple sera divisé en trois étapes.

Étape # 1: CSS

Rappelons que pour créer une image à l'aide de l'API CSS Paint, les widgets sont des fragments de code JS. Par conséquent, pour commencer, nous devons donner un nom au worklet et l'appeler en CSS. awesomePattern . En conséquence, le CSS ressemblera à ceci:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); };

Les préparatifs préliminaires sont terminés, mais tant que le reste de notre exemple n'est pas prêt, tout cela ne fonctionnera pas.

Étape # 2: JavaScript

Maintenant, nous devons décrire le worklet à l'aide de JS. Ici, il est montré comment, dans le script principal, un autre script est chargé qui implémente les fonctionnalités dont nous avons besoin.

 CSS.paintWorklet.addModule('patternWorklet.js');

À ce stade, encore une fois, rien ne se passe, car le plus intéressant est caché dans le fichier patternWorklet.js .

Dans le fichier patternWorklet.js nous devons enregistrer la classe du vorklet:

 registerPaint('awesomePattern', Shape);

Ici, nous appelons la fonction registerPaint() et lui transmettons ce que nous considérons comme un worklet, dans ce cas awesomePattern . De plus, nous transmettons à cette fonction un lien vers la classe que nous écrirons, dans ce cas, Shape . Cette commande doit être ajoutée après la déclaration de la classe correspondante. Lorsque vous déclarez et utilisez des classes, vous ne pouvez pas vous fier à quelque chose comme un mécanisme pour augmenter les déclarations de fonctions. Avant de pouvoir utiliser une classe, vous devez la déclarer.

Ensuite, nous allons utiliser la syntaxe pour déclarer les classes ECMAScript 2015 et écrire une classe qui dessinera l'image d'arrière-plan. Étant donné que cette classe est maintenant enregistrée en tant que classe de classe ouvrière, nous pouvons utiliser certains mécanismes spéciaux qui y seront automatiquement disponibles.

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } }

Le rappel paint() a les ctx , geom et properties . Le paramètre ctx est le même que le contexte de rendu 2D qui peut être obtenu à partir de l' <canvas> . Eh bien, c'est presque pareil. Le fait est que l' <canvas> vous permet de lire des données de pixels, mais l'API CSS Paint ne le permet pas. Malgré les différences, en utilisant ctx , nous pouvons utiliser les mêmes méthodes de sortie graphique que celles utilisées lors de l'utilisation de l' <canvas> . Dans cet exemple, en utilisant la fonction arc() , nous dessinons un cercle.

Les deux premières valeurs passées à la fonction arc() sont les coordonnées X et Y du centre du cercle, en pixels, par rapport à l'origine située dans le coin supérieur gauche de l'élément. Cependant, je veux que le cercle soit au centre de l'élément. Pour résoudre ce problème, le paramètre geom nous est utile. Il donne accès à l'objet PaintSize , qui est une description des paramètres de l'image. En particulier, en y faisant référence, nous pouvons lire les paramètres de width et de height , et c'est exactement ce dont nous avons besoin pour centrer le cercle.

En conséquence, nous arrivons à ce code:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape);

Vous pouvez voir la version de travail de l'exemple sur CodePen . À proprement parler, c'est ce que ce code génère.

Cercle créé avec les API CSS Paint

Tout cela est bien, mais notre exemple est très simple. Voyons, au lieu du cercle habituel, dessiner quelque chose de plus intéressant. Par exemple - tel un astérisque - logo du site css-tricks.com.

Astérisque créé avec les API de peinture CSS

Voici un projet CodePen qui vous permet de le faire.

Lorsque vous examinez le code JS de ce projet, faites attention à la méthode drawStar() et aux nombreuses fonctions utilisées lors de l'utilisation de l' <canvas> .

Étape # 3: Propriétés CSS personnalisées

Grâce aux nouvelles technologies, nous pouvons aller bien plus loin que dessiner des cercles et des étoiles. Nous pouvons examiner les puissantes fonctionnalités des propriétés CSS personnalisées (variables). Ils sont d'ailleurs très intéressants d'ailleurs. Dans notre cas, ils se révèlent particulièrement utiles.

Supposons que nous voulons pouvoir changer la taille ou la couleur d'un logo créé précédemment. Ces paramètres peuvent être placés dans le code CSS sous la forme de propriétés personnalisées, puis les utiliser dans le programme via le troisième paramètre, transmis au rappel paint() . Il s'agit du paramètre des properties .

Nous ajoutons la propriété --star-scale à notre code CSS, qui vise à contrôler le redimensionnement de l'image, et la propriété --star-color , qui est utilisée pour organiser le changement de couleur du logo directement dans CSS. Voici ce que nous avons obtenu:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) };

Maintenant, revenons à la classe de workcloth. Ici, nous devons interagir avec les propriétés utilisateur décrites ci-dessus. Cela se fait à l'aide de la méthode inputProperties , qui nous donne accès à toutes les propriétés CSS et à leurs valeurs affectées.

 static get inputProperties() { return ['--star-scale','--star-color']; }

Vous pouvez maintenant travailler avec eux dans la méthode paint() :

 const size = parseInt(properties.get('--shape-size').toString());

Naturellement, les valeurs obtenues peuvent être utilisées dans le code responsable de la formation de l'image. Cela conduit au fait que si nous, dans le code CSS, modifions la valeur de la --star-scale ou --start-color , cela affectera immédiatement l'apparence de l'image.

L'influence des propriétés CSS personnalisées sur l'image finie

Cette fonctionnalité est implémentée dans le même projet CodePen que nous avons mentionné ci-dessus.

Soit dit en passant, il convient de noter que lors de l'utilisation de la nouvelle API, toutes les propriétés CSS habituelles liées à la définition de l'arrière-plan des éléments, telles que background-size et background-repeat , fonctionneront de la même manière qu'auparavant. Ils n'ont pas perdu leur pertinence.

Résumé

L'API CSS Paint est une technologie très puissante dont les capacités ne se limitent pas à la création d'images d'arrière-plan.

Imaginez que l'élément doit avoir une bordure spéciale, par exemple, qui n'est pas entièrement visible ou double. Peut-être que pour obtenir de tels effets, vous utilisez généralement les pseudo-éléments ::before ou ::after , ou peut-être un box-shadow spécialement configuré. Les bordures (et bien plus) peuvent être implémentées à l'aide de l'API CSS Paint et de la propriété border-image .

L'API CSS Paint rassemble de nombreuses fonctionnalités intéressantes, telles que les widgets, les classes ECMAScript 2015 et les fonctionnalités de l' <canvas> . De plus, il fournit au développeur un logiciel de gestion d'images basé sur JavaScript. Par exemple, en utilisant le mécanisme d'événement, vous pouvez organiser la mise à jour des propriétés personnalisées, ce qui signifie que l'image elle-même, comme par exemple ici , où l'événement click démarre le processus de mise à jour des propriétés dans la fonction requestAnimationFrame , qui vous permet de créer une animation chaque fois que l'utilisateur clique sur le bouton. De plus, même les coordonnées du curseur de la souris lorsque vous cliquez sont prises en compte.

À première vue, tout cela peut sembler un peu déroutant, mais jetons un coup d'œil à d'autres parties du projet Houdini que nous pourrions rencontrer:

L'API CSS Layout permet au développeur de faire quelque chose comme display: layout('myCustomLayout') . Un exemple typique est la création de vos propres dispositions de style maçonnerie, mais la plage d'utilisation de cette fonctionnalité est beaucoup plus large.
L'API Propriétés et valeurs CSS vous permet de définir des types de propriétés personnalisés.
L'API CSS Animation Worklet pousse les opérations de traitement d'animation au-delà du flux principal, ce qui devrait se traduire par des animations parfaitement fluides.

En conséquence, nous pouvons dire que, littéralement sous nos yeux, il y a l'émergence de technologies qui ouvrent de nombreuses nouvelles opportunités pour les développeurs Web. Les processus de normalisation et de mise en œuvre dans les navigateurs ne sont pas si rapides, mais ils auront très probablement un impact énorme sur tout ce qui concerne le style des pages Web.

Chers lecteurs! Quels domaines de l'application API CSS Paint trouvez-vous les plus intéressants?

API de peinture CSS