M

MLOG

Français

Maîtrisez les container queries CSS pour un web design vraiment responsive. Apprenez à adapter les mises en page en fonction de la taille du conteneur, et non seulement de la fenêtre, pour une expérience utilisateur fluide sur tous les appareils.

Débloquer le Responsive Design : Un Guide Complet sur les Container Queries CSS

Pendant des années, le responsive web design a reposé principalement sur les media queries, permettant aux sites web d'adapter leur mise en page et leur style en fonction de la largeur et de la hauteur de la fenêtre (viewport). Bien qu'efficace, cette approche peut parfois sembler limitative, surtout lorsqu'il s'agit de composants complexes qui doivent s'adapter indépendamment de la taille globale de l'écran. C'est là qu'interviennent les Container Queries CSS – un nouvel outil puissant qui permet aux éléments de réagir à la taille de leur élément conteneur, plutôt qu'à la fenêtre elle-même. Cela ouvre un nouveau niveau de flexibilité et de précision dans le responsive design.

Que sont les Container Queries CSS ?

Les Container Queries CSS sont une fonctionnalité CSS qui permet d'appliquer des styles à un élément en fonction de la taille ou d'autres caractéristiques de son conteneur parent. Contrairement aux media queries, qui ciblent la fenêtre (viewport), les container queries ciblent un élément spécifique. Cela permet de créer des composants qui adaptent leur style en fonction de l'espace disponible dans leur conteneur, quelle que soit la taille de l'écran.

Imaginez un composant de carte qui s'affiche différemment selon qu'il est placé dans une barre latérale étroite ou dans une zone de contenu principal large. Avec les media queries, vous devriez ajuster le style de la carte en fonction de la taille de l'écran, ce qui pourrait entraîner des incohérences. Avec les container queries, vous pouvez définir des styles qui s'appliquent spécifiquement lorsque le conteneur de la carte atteint une certaine largeur, assurant une expérience cohérente et réactive sur différentes mises en page.

Pourquoi utiliser les Container Queries ?

Les container queries offrent plusieurs avantages par rapport aux media queries traditionnelles :

Comment implémenter les Container Queries CSS

L'implémentation des container queries CSS implique deux étapes clés : la définition du conteneur et l'écriture des requêtes.

1. Définir le conteneur

D'abord, vous devez désigner un élément comme un *conteneur*. Cela se fait à l'aide de la propriété container-type. Il existe deux valeurs principales pour container-type :

Vous pouvez également utiliser container-name pour donner un nom à votre conteneur, ce qui peut être utile pour cibler des conteneurs spécifiques dans vos requêtes. Par exemple :

.card-container {
  container-type: inline-size;
  container-name: cardContainer;
}

Ce code déclare l'élément avec la classe .card-container comme un conteneur. Nous spécifions inline-size pour permettre des requêtes basées sur la largeur du conteneur. Nous lui avons également donné le nom cardContainer.

2. Écrire les Container Queries

Une fois que vous avez défini le conteneur, vous pouvez écrire des container queries en utilisant la règle-at @container. La syntaxe est similaire à celle des media queries :

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Cette requête applique les styles entre les accolades uniquement lorsque le conteneur nommé cardContainer a une largeur minimale de 400px. Elle cible l'élément .card (probablement un enfant de .card-container) et ajuste sa mise en page. Si le conteneur est plus étroit que 400px, ces styles ne seront pas appliqués.

Raccourci : Vous pouvez également utiliser la version abrégée de la règle `@container` lorsque vous n'avez pas besoin de spécifier un nom de conteneur :

@container (min-width: 400px) {
  /* Styles à appliquer lorsque le conteneur a une largeur d'au moins 400px */
}

Exemples pratiques de Container Queries

Voyons quelques exemples pratiques de la manière dont vous pouvez utiliser les container queries pour créer des mises en page plus responsives et adaptables.

Exemple 1 : Composant de carte

Cet exemple montre comment adapter un composant de carte en fonction de la largeur de son conteneur. La carte affichera son contenu en une seule colonne lorsque le conteneur est étroit et en deux colonnes lorsque le conteneur est plus large.

HTML :


  

    Card Image
    

      
Card Title

      
This is some sample content for the card.

      Learn More

CSS :

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.card {
  display: flex;
  flex-direction: column;
}

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

Dans cet exemple, le .card-container est déclaré comme conteneur. Lorsque la largeur du conteneur est inférieure à 500px, la .card utilisera une mise en page en colonne, empilant l'image et le contenu verticalement. Lorsque la largeur du conteneur est de 500px ou plus, la .card passera à une mise en page en ligne, affichant l'image et le contenu côte à côte.

Exemple 2 : Menu de navigation

Cet exemple montre comment adapter un menu de navigation en fonction de l'espace disponible. Lorsque le conteneur est étroit, les éléments du menu seront affichés dans une liste déroulante. Lorsque le conteneur est plus large, les éléments du menu seront affichés horizontalement.

HTML :

CSS :

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-container ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

Dans cet exemple, le .nav-container est déclaré comme conteneur. Lorsque la largeur du conteneur est inférieure à 600px, les éléments du menu seront affichés sous forme de liste verticale. Lorsque la largeur du conteneur est de 600px ou plus, les éléments du menu seront affichés horizontalement à l'aide de flexbox.

Exemple 3 : Liste de produits

Une liste de produits de commerce électronique peut adapter sa mise en page en fonction de la largeur du conteneur. Dans des conteneurs plus petits, une simple liste avec l'image du produit, son titre et son prix peut bien fonctionner. À mesure que le conteneur s'agrandit, des informations supplémentaires comme une courte description ou l'évaluation des clients peuvent être ajoutées pour améliorer la présentation. Cela permet également un contrôle plus granulaire que le ciblage unique de la fenêtre.

HTML :


  

    Product 1
    
Product Name 1

    
$19.99

  

  

    Product 2
    
Product Name 2

    
$24.99

CSS :

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

Ce code CSS établit d'abord le `product-listing-container` en tant que conteneur. Pour les conteneurs étroits (moins de 400px), chaque article de produit occupe 100% de la largeur. À mesure que le conteneur s'élargit au-delà de 400px, les articles sont disposés sur deux colonnes. Au-delà de 768px, les articles sont affichés sur trois colonnes.

Support des navigateurs et Polyfills

Les container queries bénéficient d'un bon support dans les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, les navigateurs plus anciens peuvent ne pas les supporter nativement.

Pour prendre en charge les anciens navigateurs, vous pouvez utiliser un polyfill. Une option populaire est le container-query-polyfill, que l'on peut trouver sur npm et GitHub. Les polyfills comblent les lacunes des fonctionnalités non prises en charge, vous permettant d'utiliser les container queries même dans les navigateurs plus anciens.

Bonnes pratiques pour l'utilisation des Container Queries

Voici quelques bonnes pratiques à garder à l'esprit lors de l'utilisation des container queries :

Pièges courants et comment les éviter

Container Queries vs. Media Queries : Choisir le bon outil

Bien que les container queries offrent des avantages significatifs, les media queries ont toujours leur place dans le responsive design. Voici une comparaison pour vous aider à décider quel outil est le meilleur pour différentes situations :

Caractéristique Container Queries Media Queries
Cible Taille du conteneur Taille de la fenêtre
Adaptabilité Basée sur le composant Basée sur la page
Flexibilité Élevée Moyenne
Duplication de code Plus faible Plus élevée
Cas d'utilisation Composants réutilisables, mises en page complexes Ajustements globaux de la mise en page, adaptabilité de base

En général, utilisez les container queries lorsque vous avez besoin d'adapter le style d'un composant en fonction de la taille de son conteneur, et utilisez les media queries lorsque vous avez besoin de faire des ajustements de mise en page globaux en fonction de la taille de la fenêtre. Souvent, une combinaison des deux techniques est la meilleure approche.

L'avenir du Responsive Design avec les Container Queries

Les container queries représentent une avancée significative dans le responsive design, offrant une plus grande flexibilité et un meilleur contrôle sur la façon dont les éléments s'adaptent à différents contextes. À mesure que le support des navigateurs continue de s'améliorer, les container queries deviendront probablement un outil de plus en plus important pour les développeurs web. Elles permettent aux designers et aux développeurs de créer des sites web véritablement adaptatifs et conviviaux qui offrent une expérience transparente sur tous les appareils et toutes les tailles d'écran.

Conclusion

Les Container Queries CSS sont un ajout puissant à la boîte à outils du responsive design. En permettant aux éléments de réagir à la taille de leur élément conteneur, elles permettent une véritable adaptabilité basée sur les composants et ouvrent de nouveaux niveaux de flexibilité et de précision dans la conception web. En comprenant comment implémenter et utiliser efficacement les container queries, vous pouvez créer des sites web plus adaptables, maintenables et conviviaux qui offrent une meilleure expérience pour tous.

Ressources