Nouvelles fonctionnalités CSS à attendre avec impatience en 2022

Voici quelques mises à jour des feuilles de style en cascade que vous ne voudrez pas manquer, allant des propriétés d'accrochage au défilement peu connues aux superbes nouvelles palettes de couleurs.

CSS (Cascading Style Sheets) a fait ses débuts en 1996 et est toujours un composant important et évolutif de la pile de développement Web. CSS, comme d'autres langages vivants, ajoute toujours de nouvelles fonctionnalités en réponse aux pratiques du monde réel. En raison de l'évolution rapide, même les développeurs dédiés peuvent manquer de nouvelles fonctionnalités. Découvrez quelques-unes des fonctionnalités les plus utiles de CSS dans un avenir proche.

Sous-réseau

CSS a été critiqué pour un certain nombre de défauts flagrants depuis sa création. Certaines tâches simples, telles que le centrage de quelque chose dans CSS, nécessitent des solutions de contournement et des manipulations trop complexes.
Un autre problème important consistait à obtenir une disposition de grille raisonnable, du moins jusqu'à ce que le module CSS Grid Layout intervienne.

Une disposition de grille est indiquée par la déclaration display: grid et est similaire à Flexbox en ce sens qu'elle vous permet de définir des dispositions rectangulaires tout en contrôlant votre grille en deux dimensions.
Selon les recherches, la plupart des développeurs CSS connaissent Grid Layout et beaucoup d'entre nous l'utilisent. (N'oubliez pas de l'essayer si vous ne l'avez pas fait !)

Subgrid est une toute nouvelle fonctionnalité extrêmement utile pour le module Grid Layout. La fonction de sous-grille vous permet de créer une grille enfant qui héritera de la disposition de sa grille parent.

Contrairement à l'imbrication d'un affichage de grille dans un autre, la grille enfant définit ses propres dimensions et espaces. La mise en page du parent est appliquée à la sous-grille lors de l'utilisation de la sous-grille, mais la sous-grille peut toujours remplacer certains aspects de la mise en page si nécessaire.

Subgrid n'est actuellement disponible que dans Firefox 71 et supérieur, mais il est prévu pour Safari WebKit, Google Chrome et Microsoft Edge. Une sous-grille sera une fonctionnalité de mise en page très utile à l'avenir.

Accent-couleur

Malgré leur popularité, certains éléments d'affichage sont notoirement difficiles à coiffer. Les cases à cocher et les boutons radio, par exemple, sont fréquemment remplacés par un widget personnalisé qui imite leur comportement tout en masquant l'implémentation du navigateur. Vous pouvez cibler ces éléments avec la nouvelle option CSS accent-color.

Par exemple, comme indiqué dans la liste 1, vous pouvez appliquer une couleur magenta à tous les boutons radio de votre page (voir également cet exemple en direct).

Liste 1 : Contrôle des couleurs CSS pour les boutons radio

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Défilement instantané

CSS offre un ensemble pratique de propriétés pour contrôler l'action instantanée de défilement dans un navigateur Web. Beaucoup de ces fonctionnalités sont déjà disponibles dans les versions récentes des navigateurs, tandis que d'autres sont encore en cours de déploiement.

Il convient de noter que plus d'un tiers des utilisateurs de CSS ne sont toujours pas conscients de l'accrochage au défilement.

La commande scroll-snap-* properties fournit plusieurs options pour affiner le fonctionnement de la position de défilement sur un conteneur. Les développeurs bénéficient d'une précision accrue, tandis que les utilisateurs finaux bénéficient d'une expérience utilisateur plus fluide et mieux contrôlée.

Le Listing 2 montre un exemple simple de la façon de contrôler l'accrochage du défilement sur une div (voir aussi cet exemple en direct).

Le Listing 2 est un exemple d'un simple accrochage au défilement.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

La position de défilement y dans le Listing 3 se déplace automatiquement vers l'élément enfant, peu importe où vous relâchez le mouvement de défilement. Cela est dû au fait que la propriété scroll-snap-type du conteneur de défilement est définie sur y et que les éléments enfants ont la déclaration scroll-snap-align: start .

Ce comportement peut également être modifié. Vous pouvez, par exemple, définir la propriété scroll-snap-type sur y proximité. Cela fonctionne comme prévu, ne s'accrochant que lorsque le défilement est proche de l'élément.

De plus, la propriété associée overscroll-behavior contrôle le comportement des conteneurs à défilement imbriqué.

Propriétés CSS logiques

Vous avez probablement éprouvé l'ennui d'avoir à écrire textuellement les propriétés border-left et border-right ou border-top, border-bottom si vous avez déjà voulu définir une bordure de conteneur à gauche et à droite, ou en bas et Haut. Le problème est qu'il n'y a aucun moyen d'utiliser la propriété de raccourci sans affecter les bordures que vous ne souhaitez pas modifier. Cela est également vrai pour des éléments tels que le rembourrage et les marges.

Le module CSS Logical Properties vous permet de faire référence à des choses de manière abstraite en utilisant les mots-clés inline et block. Lorsque vous faites référence à gauche et à droite, utilisez en ligne ; lorsque vous faites référence au haut et au bas, utilisez le bloc. Par exemple, pour ajouter une bordure sur les côtés gauche et droit d'un div, utilisez le code du Listing 3. (voir également un exemple en direct ici).

Liste 3 : Rembourrage gauche et droit avec logique en ligne

 div { border- inline : 10px dashed seagreen; }

Ce sont des raccourcis utiles pour les bordures, mais les mots-clés logiques inline et block peuvent également être trouvés dans une variété d'autres propriétés.

La majorité des développeurs utilisent ces raccourcis pour gérer les problèmes de direction du texte et de mode d'écriture. Dans ces cas, une propriété telle que padding-inline-end vous permet de cibler le remplissage final quelle que soit la direction du texte.

Essentiellement, l'abstraction en ligne et en bloc permet la création de styles généralisés qui peuvent être appliqués à une variété de situations. Plus d'informations peuvent être trouvées sur CSS Logical Properties and Values.

Recherches de conteneurs

Les requêtes de conteneur ne sont pas encore totalement stables en CSS, mais elles le seront bientôt. Ils auront un impact significatif sur la façon dont nous pensons au design réactif. L'idée de base est que vous pourrez définir un point d'arrêt en fonction de la taille d'un conteneur parent plutôt que simplement de la fenêtre d'affichage et du média.

Il n'y a pas de définition claire de la syntaxe, mais elle ressemblera probablement au Listing 4.

@container Liste 4.

 @container (max-width: 650px){ … }

Considérez à quel point il sera puissant d'affiner une mise en page en fonction de la taille des différents conteneurs qui apparaissent dans les couches imbriquées d'une interface utilisateur. Il s'agit d'un changement assez important qui déclenchera presque certainement une vague d'innovations d'interface.

Trois nouvelles combinaisons de couleurs

Les praticiens CSS utilisent RVB, HEX et des couleurs nommées pour embellir et animer les écrans des appareils depuis des temps immémoriaux. La déclaration de couleur de style HSL a été introduite récemment. La spécification CSS introduit désormais de nouveaux descripteurs de couleur, à savoir hwb, lab et lch.

HWB est une abréviation pour la teinte, la blancheur et la noirceur. C'est une belle touche qui se distingue par sa lisibilité humaine - vous choisissez une couleur, puis ajoutez du blanc et du noir. Il est compatible avec les versions les plus récentes de Chrome, Firefox et Safari. (La référence de la fonctionnalité Microsoft Edge est curieusement muette sur ce sujet.) Pour en savoir plus sur HWB, consultez hwb() - une notation de couleur pour les humains ? Comme RVB et HWL, il possède un canal alpha pour la transparence.

LCH, qui signifie luminosité, chroma et teinte, est remarquable pour élargir la palette de couleurs disponible. Quoi, pourquoi et comment les couleurs LCH sont-elles utilisées dans CSS ? Il s'agit d'un bon aperçu qui comprend une discussion révélatrice de la théorie des couleurs en CSS. Seul Safari prend actuellement en charge LCH.

Le plus théorique des nouveaux espaces colorimétriques est LAB, qui est dérivé de la théorie des couleurs CIE LAB. Le descripteur de couleur du laboratoire prétend couvrir tout le spectre des couleurs perceptibles par l'homme, ce qui est une affirmation audacieuse. Comme LCH, il n'est actuellement pris en charge que par Safari. Vous trouverez plus d'informations sur LAB pour CSS dans la documentation CSS de Mozilla.