InMy.Live

Je ne peux pas contenir mon excitation en écrivant les premiers mots de cet article. Mesdames et messieurs, les requêtes de conteneur CSS sont enfin là ! Oui, tu l’as bien lu. Ils sont actuellement pris en charge dans Google Chrome (105) et bientôt dans Safari 16. Il s’agit d’une étape importante pour le développement Web. Pour moi, je le vois comme lorsque nous avons commencé à créer des sites Web réactifs via des requêtes multimédias, ce qui change la donne. Les requêtes de conteneur sont tout aussi importantes (de mon point de vue, du moins).

Lorsque j’ai écrit le premier article sur les requêtes de conteneur en avril 2021, la syntaxe a changé plusieurs fois, et je vois cela comme une chance d’écrire un nouvel article et de garder le précédent pour référence. Dans cet article, j’expliquerai comment fonctionnent les requêtes de conteneur, comment nous pouvons les utiliser et à quoi ressemble la syntaxe, et je partagerai quelques exemples concrets et cas d’utilisation.

Êtes-vous prêt à découvrir la nouvelle fonctionnalité CSS qui change la donne ? Plongeons dedans.

Introduction

Lors de la conception d’un composant, nous avons tendance à ajouter différentes variantes et à les modifier soit en fonction d’une classe CSS, soit en fonction de la taille de la fenêtre d’affichage. Ce n’est pas idéal dans tous les cas et peut nous obliger à écrire du CSS en fonction d’une classe de variation ou d’une taille de fenêtre.

Prenons l’exemple suivant.

Nous avons un composant de carte qui devrait passer à un style horizontal lorsque la fenêtre d’affichage est suffisamment grande. À première vue, cela peut sembler correct. Cependant, c’est un peu complexe quand on y pense plus profondément.

Si nous voulons utiliser la même carte à différents endroits, comme dans une barre latérale où l’espace est restreint, et dans la section principale où nous avons plus d’espace, nous devrons utiliser des variantes de classe.

.c-article {
  /* Default stacked style */
}

@media (min-width: 800px) {
  /* Horizontal style. */
  .c-article--horizontal {
    display: flex;
    align-items: center;
  }
}

Si nous n’appliquons pas la classe de variation au composant de la carte, nous pourrions nous retrouver avec quelque chose comme ce qui suit.

Remarquez comment le composant de la carte dans sa version empilée est trop volumineux. Pour moi, cela ne semble pas bon du point de vue de l’interface utilisateur.

Avec les requêtes de conteneur, nous pouvons simplement écrire du CSS qui répond à la largeur du parent ou du conteneur. Considérez la figure suivante :

Remarquez comment, dans une requête multimédia, nous interrogeons un composant en fonction de la fenêtre d’affichage ou de la largeur de l’écran. Dans les requêtes de conteneur, la même chose se produit, mais au niveau parent.

Que sont les requêtes de conteneur ?

Un moyen d’interroger un composant par rapport au parent le plus proche qui a un confinement défini via le container-type propriété.

C’est ça. C’est exactement comme ça que nous avions l’habitude d’écrire du CSS dans les requêtes multimédias, mais pour un niveau de composant.

Syntaxe des requêtes de conteneur

Pour interroger un composant en fonction de sa largeur parent, nous devons utiliser le container-type propriété. Considérez l’exemple suivant :

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

Avec cela, nous pouvons commencer à interroger un composant. Dans l’exemple suivant, si le conteneur du .card l’élément a une largeur égale à 400px ou plus, nous devons ajouter un style spécifique.

@container (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

Bien que ce qui précède fonctionne, cela peut devenir un peu écrasant lorsque vous avez plusieurs conteneurs. Pour éviter cela, il vaut mieux nommer un conteneur.

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

Maintenant, nous pouvons ajouter le nom du conteneur à côté de @container comme ce qui suit :

@container card (min-width: 400px) {
  .card {
    display: flex;
    align-items: center;
  }
}

Reprenons l’exemple initial et voyons comment nous pouvons tirer parti des requêtes de conteneur pour éviter d’avoir plusieurs classes CSS.

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

.c-article {
  /* Default stacked style */
}

@container card (min-width: 400px) {
  /* Horizontal style. */
  .c-article {
    display: flex;
    align-items: center;
  }
}

Prise en charge du navigateur

Les requêtes de conteneur sont désormais prises en charge dans Chrome 105 et bientôt dans Safari 16.

Il en va de même pour les unités de requête de conteneur.

De plus, il existe un polyfill que vous pouvez utiliser aujourd’hui. Je ne l’ai pas encore testé, mais c’est dans le plan.

Cas d’utilisation pour les requêtes de conteneur CSS

Avec le lancement stable des requêtes de conteneur dans Google Chrome, je suis ravi d’ajouter un nouveau petit projet qui est lab.ishadeed.com. Ceci est inspiré des expériences de grille CSS de Jen Simmons. Il comprend de nouvelles démos pour les requêtes de conteneur que vous pouvez jouer avec votre navigateur.

L’atelier propose 10 exemples différents pour vous permettre d’explorer l’utilité des requêtes de conteneur. Je prévois d’en ajouter d’autres à l’avenir.

Vous pouvez les consulter à partir de ce lien. Bon redimensionnement !

Fin

C’est un grand jour pour CSS, et j’ai hâte de voir ce que vous allez créer avec les requêtes de conteneur CSS.

j’ai écrit un ebook

Je suis ravi de vous faire savoir que j’ai écrit un ebook sur le débogage CSS.

Si vous êtes intéressé, rendez-vous sur debuggingcss.com pour un aperçu gratuit.