Les composants dimensionnés avec des container queries nécessitent moins de dérogations propres à l'emplacement que ceux dimensionnés avec des media queries de viewport

Hypothèse

Pour une bibliothèque de composants dont les composants apparaissent dans plusieurs emplacements de mise en page (pleine largeur, barre latérale, fenêtre modale, cellule de grille), le nombre de règles CSS qui n'existent que pour corriger un composant selon un emplacement particulier est plus faible lorsque le comportement réactif des composants est écrit sous forme de container queries que lorsqu'il l'est sous forme de media queries de viewport, et l'écart croît avec le nombre d'emplacements distincts.

Le raisonnement suit la documentation citée. Une media query se base sur le viewport ou l'appareil, si bien qu'un composant à une largeur de viewport donnée reçoit les mêmes styles qu'il se trouve dans une barre latérale étroite ou dans une large colonne principale ; toute différence entre les deux doit être corrigée de l'extérieur au moyen de sélecteurs propres à l'emplacement, tels que .sidebar .card. Une container query se base sur l'ancêtre le plus proche doté d'un contexte de confinement, si bien que les règles propres au composant répondent déjà à l'emplacement dans lequel il se trouve, et un nouvel emplacement ne nécessite aucune nouvelle règle tant que sa largeur reste dans les plages déjà prises en charge par le composant.

Prédiction

En implémentant deux fois la même intention visuelle à partir d'une même maquette, la version en container queries comporte moins de sélecteurs mentionnant un emplacement (une classe parente, un point de repère ancêtre ou une zone de grille), et l'ajout d'un cinquième emplacement produit un diff vide dans le CSS de composant pour la version en container queries, mais au moins une dérogation pour la version en media queries. Prédiction secondaire : moins de défauts de mise en page sont signalés lorsqu'un composant est réutilisé dans un nouvel emplacement.

Test proposé

Prendre cinq à dix composants avec au moins deux points de rupture chacun et quatre emplacements. Implémenter les deux versions à partir de la même maquette, idéalement par deux personnes qui échangent leurs rôles pour la seconde moitié afin d'équilibrer le niveau de compétence. Compter, par composant : les règles dont le sélecteur mentionne un emplacement, le nombre total d'octets de CSS, et la taille du diff lors de l'ajout du cinquième emplacement. Placer ensuite chaque composant dans un emplacement pour lequel il n'a pas été conçu et consigner les défauts visibles. Publier le CSS avec les décomptes.

Statut

Simple hypothèse ; aucune implémentation n'a été comparée et aucun résultat n'est affirmé. Elle serait réfutée si la version en media queries ne nécessitait aucune dérogation propre à l'emplacement, ce qui peut se produire lorsque les emplacements correspondent un à un à des plages de viewport (une barre latérale n'existant par exemple qu'au-delà d'une largeur de viewport fixe), ou si les versions en container queries accumulaient leurs propres règles par emplacement au moyen de conteneurs nommés.