Les Container Queries changent fondamentalement l'approche du responsive design. Fini le responsive basé sur la taille de la fenêtre — on répond maintenant à la taille du conteneur parent.
Pendant vingt ans, le responsive design reposait sur les media queries : on adapte la mise en page en fonction de la largeur de la fenêtre du navigateur. Cette approche fonctionne pour la structure globale d'une page, mais elle atteint ses limites pour les composants réutilisables. Un composant card se comporte différemment selon qu'il est dans une sidebar de 300px ou dans une grille principale de 800px — mais une media query ne peut pas savoir ça.
Les Container Queries, désormais supportées par tous les navigateurs modernes, résolvent ce problème élégamment. On
déclare un élément comme conteneur avec container-type: inline-size, puis on écrit des règles qui s'appliquent en
fonction de la taille de ce conteneur. Un composant card peut maintenant s'adapter lui-même à son contexte d'affichage,
sans connaissance de la page globale. C'est le principe de l'intrinsic design poussé à son maximum.
Les cas d'usage sont nombreux : composants de design system vraiment portables, cards qui passent d'une disposition verticale à horizontale selon l'espace disponible, typographie qui s'adapte au conteneur plutôt qu'à la fenêtre. Combinées avec les Container Style Queries (adapter les styles en fonction des custom properties du conteneur parent), les possibilités deviennent impressionnantes. C'est sans doute la feature CSS la plus impactante depuis Flexbox.