Pendant longtemps, les media queries ont été le seul moyen de rendre les interfaces utilisateur réactives à différentes tailles d’écran. Mais même cela avait ses limites. L’un des principaux problèmes liés à l’utilisation des requêtes multimédias était que vous ne pouviez styliser un élément qu’en réponse aux changements de taille de l’écran, et non l’élément conteneur le plus proche.
Les requêtes de conteneur ont été introduites pour résoudre ce problème. Elles ont également connu un essor avec la popularité de frameworks comme React et Vue.js qui fonctionnent en créant des « composants » modulaires d’interface utilisateur. Apprenez à utiliser les requêtes de conteneur pour créer des éléments réactifs dans votre CSS.
Le code utilisé dans cet article est disponible dans ce dépôt GitHub et est libre d’utilisation sous la licence MIT.
Pourquoi utiliser les CSS Container Queries ?
Pour comprendre l’importance des requêtes de conteneur, utilisons un exemple qui facilite la compréhension du concept. Mais d’abord, vous devez cloner le code de départ à partir de ce dépôt GitHub.
Une fois que vous avez réussi à cloner le dépôt, exécutez le code. Vous trouverez une page web similaire à l’image suivante :
Cette page présente une grille composée de deux colonnes : la section principale et la barre latérale. La section principale est correcte, mais la barre latérale (qui est beaucoup plus petite que le contenu principal) semble un peu écrasée.
La mise en page est réactive. Lorsque vous réduisez le navigateur, vous pouvez voir que la carte se transforme en une colonne verticale :
En d’autres termes, lorsque le contenu commence à devenir illisible, la mise en page se transforme en une colonne verticale où l’image est empilée sur le contenu. Cet effet est dû aux requêtes média, qui sont le seul moyen de déterminer la taille des éléments en fonction de la taille totale de l’écran.
Dans ce cas, lorsque la taille de votre écran est inférieure à 800 pixels, vous empilez tous les éléments les uns sur les autres à l’aide de l’alignement Flexbox. Sur les écrans plus grands, nous plaçons le contenu côte à côte :
@media(max-width: 800px) {
.card {
flex-direction: column;
}
.card-header {
width: 100%;
}
} Pendant longtemps, les media queries ont été l’un des principaux principes de conception web pour créer des mises en page réactives avec CSS (et cela a été suffisant pour la plupart des choses). Mais vous rencontrerez certainement des scénarios dans lesquels les media queries ne suffiront pas, ou du moins ne constitueront pas une solution pratique.
L’un de ces scénarios est la présence d’une barre latérale (comme dans l’exemple ci-dessus). Dans ce cas, il faut sélectionner directement la carte de la barre latérale et essayer de la réduire :
.sidebar .card {
/* Make the sidebar card smaller */
}
@media(max-width: 800px) {
/* Style the page when the screen is narrower than 800px */
}
Cela peut s’avérer assez compliqué si vous travaillez avec de nombreux éléments, car vous devez sélectionner manuellement tous les éléments et les redimensionner. Vous vous retrouveriez avec plus de code et une complexité supplémentaire.
C’est là que les requêtes sur les conteneurs peuvent être utiles. Au lieu d’être contraint d’utiliser la fenêtre d’affichage comme dimensionnement, vous pouvez utiliser n’importe quel élément de votre page comme conteneur. Ce conteneur peut alors avoir ses propres largeurs sur lesquelles vous baserez vos media queries.
Comment créer une requête de conteneur
Pour créer une requête de conteneur, commencez par cibler l’élément que vous souhaitez utiliser comme conteneur (dans ce cas, la section principale et la barre latérale). À l’intérieur du bloc, vous devez définir la propriété type de conteneur à inline-size:
main, .sidebar {
container-type: inline-size
}
Lorsque vous enregistrez votre fichier CSS, rien ne change sur la page. Mais vous pouvez maintenant utiliser les requêtes de conteneur pour redimensionner et remodeler les cartes imbriquées dans la section principale et la section latérale. Dans la requête de conteneur suivante, vous transformez les cartes en colonnes verticales sur les écrans dont la largeur est inférieure ou égale à 500 pixels :
@container(max-width: 500px) {
.card {
flex-direction: column;
}
.card-header {
width: 100%;
}
}
Cette requête fonctionnera comme une requête média normale. Mais au lieu de mesurer la taille de votre écran, vous mesurez la taille de vos conteneurs (sections principale et latérale). Ainsi, lorsque votre conteneur a une taille de 500px ou plus, vous utilisez la vue horizontale. Sinon, vous utilisez la vue verticale (par défaut pour flexbox).
Dans l’image ci-dessus, vous pouvez voir que la barre latérale prend une forme verticale parce qu’elle est plus petite que 500px. En revanche, le contenu principal conserve sa disposition horizontale parce qu’il est plus grand que 500px. Si vous réduisez la taille de votre navigateur, votre barre latérale et votre contenu principal utiliseront tous deux l’alignement vertical lorsqu’ils atteindront 500px ou moins.
La requête de conteneur est incroyablement puissante car elle vous permet de redimensionner les choses en fonction du conteneur plutôt que de la largeur totale du navigateur. C’est particulièrement utile lorsqu’il s’agit de composants (comme dans React ou Vue).
Avec les requêtes de conteneur, vous pouvez facilement redimensionner vos composants d’interface utilisateur en fonction de leur conteneur, ce qui vous permet de créer des composants complètement autonomes.
Nommer les conteneurs
Lorsque vous créez un @conteneur recherche d’abord le conteneur de l’élément ciblé dans la requête. Dans notre cas, il s’agirait du conteneur principal et du conteneur de la barre latérale.
Et même si les cartes se trouvaient à l’intérieur d’un autre conteneur, il ignorerait les autres conteneurs et ne choisirait que le conteneur le plus proche de lui. Cela fait partie d’un concept CSS plus large connu sous le nom de sélecteurs CSS.
Dans l’exemple suivant, nous avons transformé l’élément body en conteneur :
body {
container-type: inline-size;
}
Nous disposons à présent de trois conteneurs distincts : body, main et side section. Par défaut, les cartes que nous ciblons dans la requête de conteneur sont plus proches de la section principale ou de la barre latérale que du corps. Il utilise donc les sections principale et latérale comme conteneurs pour la requête de conteneur.
Pour remplacer ce comportement, vous devez faire deux choses. Premièrement, vous devez donner à votre élément body un nom de conteneur :
body {
container-type: inline-size;
container-name: body;
}
Ensuite, lorsque vous créez votre requête de conteneur, vous devez spécifier le nom du conteneur à la suite de @conteneur.
@container body (max-width: 1000px){
/* CSS rules that target the body container */
}
Cette fonction est utile si vous souhaitez utiliser un élément spécifique comme conteneur plutôt que le conteneur le plus proche de l’élément que vous ciblez. En d’autres termes, vous pouvez sélectionner n’importe quel conteneur spécifique et affiner votre mise en page.
Unités de conteneur
Une autre caractéristique importante des conteneurs est la possibilité d’utiliser des unités de conteneur. Ces unités fonctionnent de la même manière que les unités d’affichage (il s’agit exactement du même type d’unités). Cependant, les unités de conteneur utilisent cqw (pour le réglage de la largeur) et cqh (pour la hauteur). Ces unités déterminent la largeur et la hauteur exactes de votre conteneur.
En savoir plus sur les requêtes de média CSS
Les requêtes de conteneur CSS vous permettent d’utiliser des éléments spécifiques comme points de référence pour vos requêtes de média. Cette technique est très pratique pour créer des éléments modulaires et autonomes qui peuvent fonctionner indépendamment du conteneur dans lequel ils se trouvent. Mais les requêtes de conteneur utilisent les mêmes principes que les requêtes de média, et c’est quelque chose que vous devez maîtriser si vous voulez être un développeur CSS de premier plan.