Requête de conteneur

Une requête de conteneur applique des styles en fonction de la taille d'un conteneur parent, et non de tout le viewport. Elle permet à un composant de s'adapter à l'espace où il se trouve réellement, si bien que la même carte s'affiche correctement dans une large colonne principale comme dans une barre latérale étroite. C'est la pièce qui manquait au responsive design pour de vraies mises en page par composants.

Comment fonctionne une requête de conteneur

On désigne un élément comme conteneur de requête, puis on écrit des règles sur sa largeur.

• Déclarer le conteneur : .card-wrap { container-type: inline-size; }
• L'interroger : @container (min-width: 400px) { .card { display: flex; } }
• Le nommer au besoin avec container-name pour cibler un ancêtre précis.

Requête de conteneur ou media query

Les deux appliquent des styles conditionnels, mais mesurent des choses différentes.

Les unités de requête de conteneur

En plus des règles, des unités dimensionnent selon le conteneur : cqw (1 % de sa largeur), cqh (hauteur), et cqi / cqb (taille inline et block). Elles laissent le texte et l'espacement s'adapter au composant plutôt qu'à l'écran.

Pourquoi c'est important pour les design systems

Dans un système par composants, la même carte, liste ou objet média est placé dans de nombreuses mises en page. Les media queries ne savent pas quelle largeur fait ce créneau ; les requêtes de conteneur, si. Cela rend les composants vraiment autonomes, et c'est pourquoi les design systems les ont adoptées vite.

Compatibilité et bonnes pratiques

Les requêtes de conteneur sont prises en charge par tous les navigateurs modernes. Déclarez le conteneur sur un wrapper plutôt que sur le composant lui-même pour qu'il reste réutilisable, et gardez les media queries pour la structure de la page tout en utilisant les requêtes de conteneur pour les éléments à l'intérieur.

Les requêtes de conteneur chez BeBranded

Chez BeBranded, nous construisons des composants qui s'adaptent à leur créneau avec les requêtes de conteneur, pour qu'une carte se comporte correctement où qu'elle se trouve. Cela fait partie du front-end systématique et orienté composants de notre travail de design.