Depuis des années, la requête média CSS est la pierre angulaire du design web responsive. Elle permettait aux développeurs d'adapter les mises en page en fonction de la taille de la fenêtre d'affichage — mobile, tablette ou ordinateur de bureau. Cependant, cette approche présente une limitation fondamentale : les composants sont stylisés en fonction de la taille de la page, et non de celle de leur propre conteneur. Dans une architecture frontend moderne, cela conduit souvent à un code alourdi où le même composant se comporte différemment selon son emplacement dans le DOM. Entrent en scène deux fonctionnalités CSS puissantes qui changent la donne dans la conception basée sur les composants : les requêtes de conteneur et Subgrid CSS.
La limitation du style basé sur la fenêtre d'affichage
Imaginez un composant de carte qui affiche une grande image et du texte détaillé sur un ordinateur de bureau, mais qui passe à une vue liste condensée sur mobile. Traditionnellement, vous devriez écrire des requêtes média complexes pour gérer ce changement d'état. Mais que se passe-t-il si vous placez ce même composant de carte dans une barre latérale sur un ordinateur de bureau ? Il pourrait devoir passer à la vue condensée parce que la barre latérale est étroite, même si la fenêtre d'affichage est large. Avec les requêtes média, vous ne pouvez pas facilement y parvenir sans dupliquer la logique ou utiliser des astuces JavaScript.
C'est ici que les requêtes de conteneur brillent. En permettant aux styles de s'adapter en fonction des dimensions du conteneur parent, elles permettent de créer des composants véritablement modulaires et autonomes. Un composant peut désormais être conscient de son contexte, ce qui le rend réutilisable dans différentes mises en page sans modification.
Mise en œuvre des requêtes de conteneur
Pour utiliser les requêtes de conteneur, vous devez d'abord définir un container-type sur l'élément parent. Cela établit l'élément comme un conteneur de requête de conteneur. Vous pouvez ensuite interroger des dimensions spécifiques à l'aide des règles @container.
.card-wrapper {
/* Définir le type de conteneur */
container-type: inline-size;
}
.card {
display: flex;
flex-direction: column;
}
/* Interroger la largeur du conteneur */
@container (min-width: 400px) {
.card {
flex-direction: row;
}
.card-image {
width: 40%;
}
.card-content {
width: 60%;
}
}Dans cet exemple, la carte s'empile verticalement jusqu'à ce que son conteneur ait au moins 400px de large, moment où elle passe à une disposition horizontale. Cette logique est encapsulée dans le composant, la rendant prévisible et portable.
Débloquer l'alignement avec CSS Subgrid
Alors que les requêtes de conteneur résolvent le problème de la réactivité, l'alignement des éléments de grille imbriqués avec les colonnes de la grille parente a historiquement été difficile. Avant CSS Subgrid, si vous aviez une grille à l'intérieur d'une autre grille, les éléments internes créaient leurs propres définitions de pistes de colonnes, résultant souvent dans un désalignement avec la grille externe.
CSS Subgrid permet à une grille interne d'hériter des pistes de colonnes (ou de lignes) de sa grille parente. Cela est crucial pour maintenir un alignement strict dans des mises en page complexes, telles que des tableaux de bord, des grilles de produits ou des tableaux de données.
.outer-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.inner-card {
display: grid;
/* Hériter les pistes de colonnes du parent */
grid-template-columns: subgrid;
grid-column: span 3; /* S'étendre sur toutes les colonnes parentes */
gap: 0.5rem;
}
.inner-item {
background: #f0f0f0;
padding: 1rem;
}Dans le code ci-dessus, la .inner-card s'étend sur trois colonnes de la .outer-grid. En définissant grid-template-columns: subgrid, les éléments à l'intérieur de .inner-card s'alignent parfaitement avec les trois colonnes de la grille externe, même s'ils ont leur propre contexte de grille. Cela crée une mise en page propre et mathématiquement précise, presque impossible à réaliser avec des flexbox imbriqués ou des grilles traditionnelles.
Combinaison pour des mises en page puissantes
La véritable puissance de ces fonctionnalités émerge lorsqu'elles sont combinées. Vous pouvez créer un widget de tableau de bord qui utilise Subgrid pour aligner ses points de données internes avec la grille principale, tout en utilisant les requêtes de conteneur pour modifier sa structure interne en fonction de l'espace disponible. Cette synergie permet des architectures CSS hautement réactives, maintenables et sémantiquement propres.
Alors que la prise en charge par les navigateurs pour les requêtes de conteneur et Subgrid atteint un statut quasi universel (actuellement pris en charge dans tous les principaux navigateurs modernes), c'est le moment idéal pour adopter ces techniques. Arrêtez de lutter contre la fenêtre d'affichage et commencez à construire des composants qui respectent leur propre espace. L'avenir du CSS est conscient des composants, et avec les requêtes de conteneur et Subgrid, vous avez les outils pour le construire.