Requêtes de conteneur ou requêtes média

Les requêtes média réagissent aux dimensions de la fenêtre d’affichage. Les requêtes de conteneur réagissent aux dimensions du conteneur parent. Cette distinction détermine quel outil utiliser pour chaque problème.

Utilisez les requêtes média pour :

• Les changements de mise en page globale (une ou deux colonnes)
• L’affichage ou le masquage de grandes sections de la page (tiroir de navigation sur mobile)
• La mise à l’échelle de base de la typographie à l’échelle de la page
• Les styles d’impression
• Les requêtes liées aux préférences de l’utilisateur (mode sombre, réduction des animations)

Utilisez les requêtes de conteneur pour :

• Les changements de mise en page au niveau des composants (carte horizontale ou verticale)
• Les composants placés dans des conteneurs inconnus (barre latérale, zone principale, barre latérale dans la zone principale)
• Les composants réutilisables d’un système de conception
• Les widgets intégrés à des pages tierces

Une carte stylisée avec des requêtes média fonctionne à un point de rupture donné sur une page de 1 200 px de large. Si cette carte est déplacée dans une barre latérale, elle peut nécessiter des points de rupture différents. Avec les requêtes de conteneur, la même carte fonctionne directement : elle s’adapte à l’espace dont elle dispose.

Les applications réelles utilisent les deux. Les requêtes média définissent la mise en page globale (la barre latérale apparaît aux grandes largeurs d’écran) ; les requêtes de conteneur définissent le comportement des composants au sein de cette mise en page.

Contrairement aux requêtes média, qui n’ajoutent aucune spécificité, les requêtes de conteneur ajoutent une spécificité liée au contexte. Une règle située dans @container (min-width: 400px) possède la même spécificité que la même règle placée à l’extérieur, mais elle ne s’applique que dans le contexte de ce conteneur.

Les requêtes de conteneur sont prises en charge par tous les navigateurs modernes depuis 2023 (Chrome 105+, Firefox 110+, Safari 16+). Vous pouvez les utiliser sans risque dès aujourd’hui dans de nouveaux projets, sans solutions de repli pour les cibles de navigateurs modernes.

Pour les projets nécessitant la prise en charge d’anciens navigateurs, utilisez @supports pour tester la prise en charge des requêtes de conteneur :

Les requêtes de conteneur ont leurs propres caractéristiques en matière de performances : chaque élément container-type crée une limite de confinement de la mise en page. Cela empêche les changements de taille à l’intérieur d’affecter l’extérieur, ce qui constitue en fait un avantage en matière de performances. Les changements de requêtes média peuvent déclencher des recalculs globaux de la mise en page.

Chrome DevTools affiche un badge « cq » à côté des éléments conteneurs dans le panneau Elements. Cliquez dessus pour visualiser les limites des conteneurs et tester les conditions des requêtes de conteneur avec l’inspecteur de mise en page de DevTools.

Un composant de carte d’un système de conception doit passer d’une mise en page empilée à une mise en page côte à côte selon la largeur disponible, quel que soit le contexte. Quelle approche est préférable ?

Les requêtes média réagissent à la fenêtre d’affichage globale ; les requêtes de conteneur réagissent à la taille d’un conteneur parent. Utilisez les requêtes média pour les décisions de mise en page globale et les requêtes liées aux préférences de l’utilisateur. Utilisez les requêtes de conteneur pour les composants réutilisables qui doivent s’adapter à leur contexte. Combinez les deux : les requêtes média pour la mise en page globale de la page, et les requêtes de conteneur pour l’adaptation des composants au sein de cette mise en page.