Les requêtes de style et de conteneur en CSS

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.

La valeur block-size n'existe pas.

Voici ce que cela donne en terme de code :

.votre-classe {


container-name: votre-nom;
container-type: inline-size;
  
  
}	

/* ou */

 .votre-classe {


container: votre-nom / inline-size;
  
  
}

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;
  }

}


/* ou */

@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

Vous pouvez vérifier la prise en charge des navigateurs concernant ces unités.

  h2 {
  
     font-size: clamp(2rem, 8cqi, 4rem);
  }
	

Les requêtes de style

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^(EN) ainsi que des ajouts^(EN).

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.

Ci-dessous, un exemple similaire avec, en plus, l'utilisation des sous-grilles CSS (subgrid CSS) :

Nous pouvons dès lors construire une mise en page plus aboutie.

Changement de taille (hauteur) sur une fenêtre

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.

Pagination

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.

Responsive bouton

Dans cet exemple, nous allons faire en sorte que le bouton "Ajouter au panier" s'adapte à la taille du conteneur.

Cas d'utilisation de requêtes de style

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 :

@container style(color: black) {

  .class {
  
    background: white;
  }
}
	

En pratique, ce n'est toujours pas possible (octobre 2025). 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.

Mode nuit

Contenu généré CSS

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 d'une infobulle.

Requêtes de conteneur d'état de défilement

Tout comme une requête de conteneur classique, il est necéssaire de déclarer le type de conteneur et d'utiliser la règle @container.

Il existe pour l'instant trois types d'état de défilement :

• État bloqué (stuck) : possibilité de changer le style lorsqu'un élément est collé à un bord.
• État ancré (snapped) : Déclenche des modifications de style lorsqu'un élément est aligné sur un axe.
• État de défilement (scrollable) :Déclenche des changements de style lorsqu'un élément déborde.

C'est assez simple à mettre en place.

.conteneur {


container-type: scroll-state

}



@container scroll-state(/*ici l'état à appliquer*/) {

  .contenu {
  
   ...
   
  }
}

Menu collant

Dans le cas suivant, celui d'une requête d'état bloqué, pour parvenir à coller notre menu en haut d'une page, nous allons utiliser la valeur scroll-state de la propriété container-type dans le conteneur.

Puis, nous allons déclarer la règle@ @container à l'intérieur de laquelle se situera l'élément collant, notre menu. On ajoute les changements de style à appliquer au défilement et éventuellement des transitions. En somme, rien de compliqué.

Haut de page (back to top)

Bien entendu, cette approche ne permet pas de calculer quand apparaîtra le bouton, si ce n'est en retardant la transition. Il est préférable d'utiliser CSS Scroll-driven ou encore mieux une méthode en JS.

Carrousel

En ce qui concerne les requêtes d'état ancré, nous allons avoir besoin d'utiliser le module CSS Scroll-Snap (article).

État de défilement : Tableau responsive sticky position avec ombrage au scroll

Sources, inspirations, ressources :

Source originale exemple CSS container height

Source originale Source exemple pagination

Article ^(EN) style queries

Article ^(EN) container queries

Un excellent article^(EN) sur les requêtes de conteneur et de style

Source originale exemple infobulle