CSS Container Queries

Publié le : 28 févr. 2024

Introduction

Lorsqu’on veut créer un design responsive, on utilise généralement les media queries pour adapter le design en fonction de la taille de l’écran. Cependant, les media queries ne permettent pas de s’adapter à la taille du conteneur parent.

Dans certaines situations, cela pose problème car on a parfois besoin de définir des styles en fonction de la taille du conteneur parent.

Les containers permettent de définir des styles en fonction de la taille du conteneur parent plutôt que de le faire avec les medias queries et la taille de l’écran.

La syntaxe

container-type

Il faut d’abord définir le type de conteneur avec la règle container-type :

.container {
  container-type: inline-size;
}

la propriété container-type permet de définir le type de container sur lequel on veut appliquer les styles. Il existe plusieurs types de containers :

• size : la requête de taille de conteneur se fera à la fois en ligne et en bloc
• inline-size : la requête de taille de conteneur se fera uniquement en ligne (le plus courant)
• normal : reste uniquement un conteneur de requête pour les requêtes de style de conteneur (container style queries)

Container-name

Il est conseillé de bien nommer les containers pour lesquels on veut appliquer des styles. Pour cela, on utilise la propriété container-name. On peut d’ailleurs définir une liste de noms en fonction de nos besoins.

.container {
  container-name: small large;
}

Shortand

On peut combiner les deux propriétés container-type et container-name en une seule propriété container :

.container {
  container: small large / inline-size;
}

@container

Comme pour les media queries, on utilise la règle @container pour définir les styles en fonction de la taille du conteneur parent.

.card {
  color: red;

  @container small (320px < width <= 640px) {
    color: blue;
  }

  @container large (640px < width <= 768px) {
    color: green;
  }
}

Nouvelles unités

Container Width & Height Units :

• cqh : container query height
• cqw : container query width

Container Logical Directions :

• cqi : container query inline
• cqb : container query block

Container Minimum & Maximum Lengths :

• cqmin : Container query minimum size
• cqmax : Container query maximum size

Démo

Dans cette démo, on utilise les media queries pour la layout du main. Puis, on utilise les container queries pour les cards dans des containers différents. On calcule également les tailles des titres avec les nouvelles unités (cqi)

Liens

• https://web.dev/blog/how-to-use-container-queries-now?hl=fr
• https://css-tricks.com/css-container-queries/
• https://ishadeed.com/article/css-container-query-guide/

Conclusion

Les containers sont une vraie avancée pour la gestion du Responsive Design en CSS. Comme toute nouvelle fonctionnalité, il faudra un peu de temps pour s’habituer à définir les bonnes pratiques.

La partie sur les containers size queries est terminée pour cet article, j’espère que vous avez apprécié la lecture. La suite logique des containers queries abordera les containers style queries.