Il ne faut pas confondre les requêtes multimédias (media queries) qui permettent de changer l’état d’un élément en fonction de la taille du viewport (la fenêtre du navigateur) et les requêtes de conteneur dont la fonction est de changer l’état d'un élément selon la taille de son conteneur.
Les requêtes de conteneur sont particulièrement pratiques pour la conception réactive et les composants réutilisables.
Nous verrons dans cet article comment mettre en oeuvre ces requêtes et comment elles peuvent être utiles dans certains cas.
La syntaxe ayant changé plusieurs fois, nous aborderons naturellement la dernière.
Fonctionnement des requêtes de conteneur
Il nous faut aborder deux notions essentielles pour parler du fonctionnement des requêtes de conteneur.
Propriété container
Tout d'abord, nous devons mettre en place un contexte de confinement (containment context) sur un conteneur avec la propriété container. Celle-ci est le raccourci pour les propriétés container-name et container-type, réciproquement pour le nom du conteneur et le type de changement.
En ce qui concerne le nom, il est optionnel. En effet, par défaut, une requête de conteneur recherche le conteneur ancêtre le plus proche du type approprié . Cependant, si vous souhaitez mettre en place plusieurs requêtes différentes, dans ce cas, il vous faudra déclarer des noms.
Soyez tout de même prudent avec le nom que vous donnez, celui-ci étant sensible à la casse. De plus, il doit s'agir d'un nom valide (une propriété personnalisée est autorisée ainsi qu'une liste de mots séparée d'un espace) qui ne soit pas égal à default et ne doit pas être entre des guillemets.
En ce qui concerne le type, il existe trois valeurs :
-size : La requête est interrogée sur les dimensions en ligne et en bloc du conteneur. On peut changer la mise en page, le style ainsi que la taille du conteneur.
-inline-size : La requête est interrogée sur les dimensions en ligne du conteneur. On peut changer la mise en page, le style ainsi que la taille en ligne du conteneur.
-normal : L'élément n'est pas un conteneur de requêtes pour les requêtes de taille de conteneur, mais reste un conteneur de requêtes pour les requêtes de style conteneur.
Dans la déclaration raccourcie, les noms s'écrivent en premier, avant la barre oblique, puis vient le type.
Règle@ @container
Parlons maintenant de la seconde notion pour définir une requête de conteneur, la règle @container qui va permettre d'appliquer des styles dans le contexte de confinement.
Ces styles seront effectifs une fois le changement de taille effectué. Le code se présente ainsi :
@container (max-width: 600px) {
h2 {
font-size: 2rem;
}
}
/* nouvelle syntaxe , voir https://caniuse.com/css-media-range-syntax pour le support navigateurs*/
@container (width <= 600px) {
h2 {
font-size: 2rem;
}
}
Vous pouvez utiliser un conteneur pour appliquer des styles à n'importe lequel de ses enfants mais pas au conteneur lui-même(EN)
Unités de longueur de requête de conteneur
Les requêtes de conteneur possèdent leurs propres unités. Elles fonctionnent de la même manière que les unités de requêtes multimédias ( vw, vh, vmin, ...), mais si celles-ci se trouvent à l'intérieur d'un conteneur de taille, elles utiliseront les dimensions du conteneur au lieu des dimensions de la fenêtre.
Ci-dessous, la liste des unités disponibles :
cqw : correspond à 1% de la largeur d'un conteneur de requête.
cqh : correspond à 1% de la hauteur d'un conteneur de requête.
cqi : correspond à 1% de la taille en ligne d'un conteneur de requête.
cqb : correspond à 1% de la taille de bloc d'un conteneur de requête.
cqmin : correspond à la plus petite valeur de cqi ou cqb
cqmax : correspond à la plus grande valeur de cqi ou cqb
Par défaut, tous les éléments sont des conteneurs de style. C'est d'ailleurs pour cette raison que l'on spécifie une valeur de taille lorsque l'on souhaite modifier la taille d'un conteneur avec une requête.
Il s'agit donc du même principe. Vous pouvez interroger le style calculé d'un élément de parent direct ou indirect à l'aide de requêtes de style. Ces requêtes permettent d'interroger le style de n'importe quel élément parent d'une page et d'appliquer des styles à ses enfants en fonction des styles de son parent.
Il suffit simplement de le déclarer comme ceci :
/* accepte toute déclaration de style valide*/
@container style(){
...
}
Si vous souhaitez interroger les styles d'un élément qui n'est pas un parent direct, vous devez attribuer un nom à cet élément.
Attention toutefois, le support est assez pauvre pour le moment et il risque d'y avoir des changements ainsi que des ajouts.
Cas d'utilisation de requêtes de conteneur
Changement de taille (largeur) sur une carte
Voici un exemple simple, celui d'une carte, avec une photo et du texte. L'objectif est de changer la taille de la carte sur la largeur lorsque celle-ci atteint une largeur définie via la requête (ici 400px), afin de créer deux colonnes.
L'objectif dans cet exemple est de faire en sorte que l'en-tête devienne collant lorsque le contenu de la fenêtre est suffisamment long. Nous allons utiliser pour ce faire le positionnement CSS avec la valeur sticky.
Un autre cas qui peut s'avérer intéressant est celui d'une pagination. En version mobile, nous avons deux boutons suivant et précédent. Puis, une fois que la taille laisse un espace suffisant, nous voyons apparaître une liste de liens tandis que les deux boutons disparaissent.
Nous pouvons légitimement nous interroger sur l'intérêt d'utiliser les requêtes de style. En effet, pourquoi ne pas utiliser une classe tout simplement pour appliquer un style particulier à un élément ?
L'objectif des requêtes de style est de rendre le CSS plus lisible et plus facile à modifier. Les requêtes de style vise également à réduire la spécificité que l'on obtient en utilisant une classe spécifique ou encore en stylisant des attributs HTML (tel que data-), qui n'est pas une bonne pratique.
En théorie, nous devrions pouvoir faire ceci, à savoir que lorsqu'un élément contient une couleur noire, l'arrière-plan est blanc :
En pratique, ce n'est pas possible (pour l'instant). Le seul moyen est d'utiliser des propriétés personnalisées.
Tableau de prix
Pour commencer, un exemple simple. Nous allons ajouter une couleur d'arrière plan sur un élément afin de le mettre en valeur avec une requête de style.
Il est également possible de viser les pseudo-éléments (autrement dit du contenu généré) avec les requêtes de style. Ainsi allons-nous pouvoir définir le style et la position de la flèche de l'infobulle.
