Requêtes de conteneur, la prochaine étape vers un CSS véritablement modulaire

Martin Van Hoofdéveloppeur front-end senior chez iO, récemment expliqué à Devoxx Belgium comment les requêtes sur les conteneurs CSS facilitent les applications Web réactives modulaires basées sur des composants. Avec les conteneurs de requêtes, les composants micro-frontaux peuvent modifier leur disposition interne indépendamment des autres composants de la page.

Dans son discours Requêtes de conteneur : la prochaine étape vers un CSS véritablement modulaire chez Devoxx Belgium, Van Hoof a expliqué son objectif comme suit :

Cette conférence portera sur l’écriture de composants réutilisables et sur la manière dont nous fournissons la mise en page réactive la plus optimale […].

Compte tenu de la prolifération des facteurs de forme d’affichage observés ces dernières années, le design réactif est une préoccupation clé dans les applications Web. De plus, pour maintenir une expérience utilisateur optimale, les applications doivent également adapter leur apparence à l’utilisateur en modifiant la taille de la fenêtre ou l’orientation de l’écran. Les entreprises veulent écrire une application une seule fois et la faire fonctionner parfaitement, quelle que soit la taille de l’écran sur lequel l’application est affichée. Les applications étant désormais couramment écrites sous la forme d’un assemblage de composants, le même objectif est transmis aux composants de l’application. Dans un contexte micro-frontal, les composants doivent minimiser les hypothèses sur le contexte environnant et contenir autant que possible toute la logique et la configuration dont ils ont besoin pour remplir leur fonction.

Van Hoof fournit un exemple de composant qui affiche des informations météorologiques. Les informations pertinentes incluent la température moyenne pour la journée en cours, un graphique montrant l’évolution de la température sur une période de temps donnée, et la température moyenne pour chaque jour de cette période.

READ  La nouvelle équipe GB subit une lourde défaite face à la Belgique

Le composant doit sélectionner les informations à afficher et comment les afficher en fonction de la quantité d’espace disponible. Dans une fenêtre limitée, le composant peut renoncer à visualiser la moyenne hebdomadaire détaillée de la température. Dans une fenêtre suffisamment grande, le composant peut alternativement révéler des données détaillées complètes. De même, l’emplacement de toute information doit être adapté à la fenêtre d’affichage afin de maximiser l’expérience utilisateur.

Widget météo pour différentes tailles de fenêtres

Sans la possibilité d’interroger la fenêtre disponible, les composants ne peuvent pas y réagir. La proxy le plus proche utilisé par les développeurs est la taille de la fenêtre d’affichage de la page combinée aux options de configuration (par ex. size="large", size="small"). Concrètement, en utilisant Requête sur les médias CSS et les classes CSS, le CSS nécessaire peut rapidement croître en taille, comme O(m*n) où est-il m est le nombre de points d’arrêt dans la fenêtre e n est le nombre d’options de configuration.

Utilisation des requêtes multimédia CSS pour adapter le style du composant à la fenêtre du composant

Avec Requête sur les conteneurs CSS, les développeurs peuvent directement définir des styles de composants en réponse à différentes tailles de fenêtres. Les options de configuration ne sont plus nécessaires.

Utilisation des requêtes de conteneur pour adapter le style du composant à la fenêtre du composant

Van Hoof discute des avantages des requêtes de conteneur :

Nous pouvons supprimer des tonnes et des tonnes de CSS qui occupent d’autres parties de la page Web, des parties dont nous n’avons peut-être même pas conscience. Nous ne pouvons que les supprimer et les remplacer par des styles pour ce widget et c’est la puissance des requêtes de conteneur.

Cas d'utilisation animé de conteneurs de requêtes

L’animation ci-dessus montre un widget e-commerce affichant un onglet avec des informations sur le produit. Le même widget est répété avec différentes tailles sur la même page. La mise en page s’adapte à la vue de la page. Le style et la mise en page du papier (par exemple, la taille de la police ou le rapport des composants) s’adaptent également à la taille du papier.

READ  FCC TSR Honda France quatrième plus rapide du ...

Les requêtes du conteneur CSS sont toujours à un étape initiale de spécification (dans le cadre de Spécification CSS de confinement de niveau 3) et ne sont pas encore une norme CSS. Cependant, les requêtes de conteneur sont déjà disponibles dans les navigateurs plus récents (par exemple, Chrome 105+, Edge 105+, Safari 16).

Les polyfills du navigateur actuel exploitent ceux de JavaScript API ResizeObserver. Les conteneurs de requêtes éliminent ainsi le besoin de modifier dynamiquement les règles CSS avec JavaScript. En outre conséquences possibles sur les performances et l’impact sur l’expérience utilisateur (par exemple, des flashs de contenu non stylisé), la définition déclarative des règles de style en CSS peut imposer une meilleure séparation des préoccupations.

Les développeurs peuvent trouver plus d’informations dans tutoriel sur les conteneurs de requêtes. Plus loin exemples d’utilisation issus de la communauté sont également disponibles en ligne.

Devoxx Belgique est une conférence de développeurs organisée chaque année. Devoxx Belgium 2022 s’est déroulé du 10 au 14 octobre 2022.

LEAVE A REPLY

Please enter your comment!
Please enter your name here