Aller au contenu

Container Queries

Le World Wide Web Consortium (W3C) est responsable d'établir les standards du Web, qui sont par la suite intégrés dans les navigateurs. En décembre 2021, le W3C a ajouté dans ses spécifications une fonctionnalité longtemps demandée des intégrateurs Web, le Container queries. Jusqu'à présent, les media queries permettaient de changer l'affichage selon la taille de l'écran seulement. Avec les Container Queries, il est désormais possible d'ajuster le style d'un élément en fonction des propriétés de son conteneur, généralement sa taille.

Le principe

css_container_queries

Source : https://web.dev/cq-stable/

Utilisation des Container Queries

L'utilisation des Container Queries se déroule en 2 étapes:

  1. Identification du conteneur parent
  2. Interrogation des propriétés du conteneur

1. Identification du conteneur parent

Cette étape consiste à préciser dans le CSS qu'un élément dans la page aura un impact sur le style d'un autre élément qui est son enfant (imbriqué). Cela se fait en créant un "contexte de confinement" (containment context).

En des mots plus simples, il faut déclarer dans le CSS qu'on a un élément qui influencera le style d'un sous-élément. Cela s'effectue en utilisant la propriété container-type en lui donnant l'une des 3 valeurs possibles:

  • size : La condition se basera les dimensions en ligne et en bloc du conteneur. Applique le confinement de la disposition, du style et de la taille au conteneur. Utilité principale : pour changer le style d'un élément en fonction de la hauteur et la largeur de son conteneur
  • inline-size : La condition portera sur les dimensions en ligne du conteneur. Applique la disposition, le style et le confinement de taille en ligne à l'élément. Utilité principale : pour changer le style d'un élément en fonction de la largeur du conteneur
  • normal : la condition ne portera pas sur la dimension du conteneur, seulement sur les styles. Contexte principal d'utilisation : pour définir un conteneur sans interroger ses dimensions. 
<div id="conteneur">
  <article class="carte">
    Contenu de la carte ...
  </article>
  <article class="carte">
    Contenu de la carte ...
  </article>
</div>

#conteneur {
  container-type: inline-size;
}

2. Interrogation des propriétés du conteneur

Cette étape consiste à préciser les conditions qui redéfinieront le style d'un élément. Cette partie ressemble beaucoup aux Media Queries. 

@container (width < 700px) {
  .carte h2 {
    font-size: 0.9em;
  }
}

Exemple

See the Pen Container - Exemple 1 by carinecroteau (@carinecroteau) on CodePen.

Le contenu des 2 premières cartes (celles présentes dans le conteneur ayant la propriété container-type: inline-size;) changera de taille lorsque la largeur du conteneur sera inférieure à la taille spécifiée.

Opérateurs logiques

Les opérateurs sont les mêmes que pour les Media Queries (and, or et not). 

@container (width > 400px) and (height > 400px) {
  /* Mon code css */
}

@container (width > 400px) or (height > 400px) {
  /* Mon code css */
}

@container not (width < 400px) {
  /* Mon code css */
}

Unités de mesure propres aux Container Queries

Des unités de mesure ont été ajoutées et peuvent être utilisées lorsque des Containers Queries sont définies dans le CSS :

  • cqw : 1% de la largeur du conteneur
  • cqh : 1% de la hauteur du conteneur
  • cqi : 1% de la dimension inline du conteneur
  • cqb : 1% de la dimension block du conteneur
  • cqmin : la plus petite valeur entre cqi et cqb
  • cqmax : la plus grande valeur entre cqi et cqb

Aller plus loin

Envie d'en apprendre davantage? Voici d'autres informations sur les Container Queries :

Sources