Les Container Queries v2 (CSS) permettent d'adapter les composants à la taille ou au style de leur conteneur, et non plus seulement à la fenêtre. Fini les media queries pour chaque carte ou sidebar.
La règle @container définit un conteneur (inline-size ou style). Les enfants peuvent utiliser container-type et des requêtes comme @container (min-width: 400px). Les range queries et l'intégration avec subgrid rendent les layouts composables vraiment réutilisables. Les cartes, les grilles et les sidebars s'adaptent au contexte (sidebar étroite vs pleine largeur) sans JavaScript.
Conseil : définir des conteneurs sur les wrappers de composants (cards, listes) et utiliser des unités comme cqw pour le typage et les espacements.
Points forts / Points faibles
Points forts
- Composants vraiment réutilisables et responsifs par contexte
- Moins de media queries et de code dupliqué
- Support navigateurs désormais large (Chrome, Firefox, Safari)
- Complément naturel à Flexbox et Grid
Points faibles
- Support plus récent que les media queries, à tester sur les cibles
- Spécificité et ordre des règles à bien maîtriser
- Fallbacks pour les vieux navigateurs si nécessaire