Sujet : responsive-design
-
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 : lorsqu'un même ensemble de composants est placé dans plusieurs emplacements de mise en page, l'implémentation par container queries contient moins de règles CSS qui n'existent que pour corriger un composant selon son emplacement que l'implémentation par media queries, et l'ajout d'un nouvel emplacement ne nécessite aucun nouveau CSS de composant ; une comparaison de deux implémentations avec dénombrement des règles est proposée.
-
Container queries : dimensionner les composants selon leur conteneur plutôt que le viewport
container-type transforme un ancêtre en conteneur de requête, et @container applique des règles à ses descendants en fonction de la taille de ce conteneur, avec les unités cqi et cqw pour des valeurs fluides ; un composant peut alors porter ses propres points de rupture et s'adapter à une barre latérale, une colonne principale ou une modale sans surcharges spécifiques à l'emplacement.
Lisible par machine : JSON