- Avec l’évolution des technologies web modernes, de nombreuses tâches qui devaient autrefois être implémentées en JavaScript peuvent désormais être réalisées simplement en HTML et CSS
- De nouvelles techniques comme le styling orienté composants, le styling des éléments parents ou la définition de couleurs relatives sont désormais largement utilisables dans plusieurs navigateurs
- Elles offrent aux designers et aux développeurs des moyens plus simples et plus efficaces de créer des composants UI
Requêtes de conteneur CSS et requêtes de style
- Styling orienté composants possible
- Application de styles CSS en interrogeant la largeur et les informations de style du conteneur
- Utile pour styler des composants réutilisables avec plusieurs variantes
- Référence : Introduction aux requêtes de style CSS
Équilibrage du texte (text-wrap: balance)
- Préserver l’équilibre typographique
- Calcule automatiquement une répartition harmonieuse du texte dans les titres et les titres de cartes
- Référence : Guide d’Ahmad Shadeed
Redimensionnement automatique des champs de formulaire
- Automatisation de la taille des champs
- La taille d’un champ texte ou d’un menu de sélection s’ajuste automatiquement au contenu
- Peut être implémenté avec une simple ligne de CSS
- Référence : Explication d’Adam Argyle
Contenu masqué trouvable par la recherche (hidden=until-found)
- Amélioration de l’accessibilité de l’UI
- Le contenu masqué, comme les sections d’accordéon repliées, peut être trouvé via la recherche dans la page et par les moteurs de recherche
- Référence : Guide de Joey Arhar
Prise en charge des couleurs haute fidélité (OKLCH, OKLAB)
- 50 % de couleurs en plus prises en charge
- Nouvelle spécification colorimétrique conçue à partir de la perception humaine des couleurs
- Adaptée aux design systems et aux dégradés
- Référence : Explication de Vitaly Friedman
Couleurs relatives en CSS
- Calculer des couleurs à partir de couleurs existantes
- Le mot-clé
from permet d’ajuster la luminosité d’une couleur, de calculer une couleur complémentaire, etc.
- Référence : Snippet de code d’Adam Argyle
View Transitions API
- Transitions d’écran fluides
- Permet de créer des transitions fluides entre un écran existant et un nouvel écran à l’aide d’animations CSS
- Prend en charge les transitions dans un document unique ou entre deux documents
- Référence : Guide de Bramus Van Damme
CSS Scroll Snap
- Offrir une expérience de défilement précise
- Il est possible de configurer un conteneur de défilement pour que l’utilisateur s’aligne automatiquement sur un élément de contenu précis
- Référence : Guide d’Ahmad Shadeed
Styling du parent (:has)
- Styler un élément parent selon l’état de ses enfants
- Permet d’ajuster les styles en fonction de l’état d’autres éléments, au-delà de la simple relation parent-enfant
- Référence : Guide de Josh W. Comeau
Autres fonctionnalités remarquables
- Amélioration du styling des états de saisie :
:user-valid, :user-invalid permettent de fournir un retour après modification de la saisie par l’utilisateur
- Optimisation du clavier mobile :
inputmode et enterkeyhint améliorent le clavier virtuel
- Élément HTML
<dialog> : permet d’implémenter des modales et popovers accessibles
Conclusion
- Les nouvelles technologies front-end, à la fois récentes et pratiques, ont un impact transformateur sur le design UI et UX
- Fonctionnalités à venir : layout masonry, personnalisation de
<selectmenu>, alignement des boîtes de texte, etc.
- Merci à tous les développeurs qui font progresser la plateforme web ; espérons que cet article aidera à améliorer vos projets et applications. Bon travail !
4 commentaires
Comme d'autres l'ont déjà souligné, l'auteur ne tient absolument pas compte de la compatibilité entre navigateurs ni de la cohérence du comportement. Au-delà de cela, il existe aussi des cas où l'implémentation ou le fonctionnement diffèrent d'un navigateur à l'autre, donc on ne peut pas choisir aveuglément de nouvelles fonctionnalités. Même si la part d'utilisation de Chrome est élevée, la présence d'iOS impose au minimum de vérifier que cela fonctionne correctement sur Safari.
Je suis d’accord… mais ça semble difficile à utiliser tel quel dans un produit.
Non implémenté dans Safari et Firefox
hidden=until-found)Non implémenté dans Firefox
En pratique, il est plus simple de considérer les nouvelles fonctionnalités frontend comme des nouveautés propres à Chrome.
Dans les cas extrêmes, cela peut prendre jusqu’à 5 ans, comme pour OffscreenCanvas. (Chrome 2018, Safari 2023)
Les container queries et
:hassont vraiment super pratiques.