Pour faire un design responsive, ou au moins pour afficher les éléments de façon agréable selon la taille de l'appareil utilisé par l'utilisateur, on utilise souvent des Media Queries.
CSS a récemment introduit une nouvelle fonctionnalité, les Container queries. Elle nous permettent de se baser sur la taille d'un container afin de déterminer les styles de son contenu, au lieu de se baser sur la taille de l'écran comme avec les media queries.
Prenons un exemple concret. Je souhaiterais construire une carte, qui affiche un titre et une liste. Je voudrais que le titre soit plus gros lorsque ma carte est plus large que 400px.
Commençons par le HTML :
Ensuite, le CSS. On peut définir un 'container-type' sur notre élément "card", qui peut prendre ces différentes valeurs : inline-size, size or normal. Je la définis à ‘inline-size’ car je ne me préoccupe ici que de la largeur.
Je peux également définir un nom pour mon nouveau container, avec la propriété 'container-name', afin que ce soit plus facile à utiliser par la suite.
Enfin, je peux écrire la Container Query avec l'annotation '@container', suivie du container-name "card" définie précédemment afin de cibler précisément cet élément. Ici, la règle est simple : un plus gros titre h1 lorsque la largeur du container est > 400px.
Et voici le résultat :
Container = 350px :
Container = 450px :
🥳 Ca fonctionne !
C'est une fonctionnalité CSS majeure, qui sera très utile dans plein de cas !
Le navigateur Chrome la supporte depuis la version 105, Firefox pas encore. Vous pouvez vous référer au site caniuse pour obtenir des informations mises à jour.
Sources :
