CSS @container: Maîtriser les requêtes de conteneur pour une conception responsive moderne

Dans le paysage en constante évolution de la conception web, la réalisation d'interfaces véritablement responsives qui s'adaptent à leur environnement immédiat, plutôt qu'à la simple fenêtre d'affichage, est une aspiration de longue date. Historiquement, les Media Queries CSS ont été la pierre angulaire de la conception responsive, nous permettant d'adapter les styles en fonction des dimensions de la fenêtre du navigateur. Cependant, cette approche présente des limites lorsqu'il s'agit de styliser des composants individuels au sein d'une mise en page plus large. Entrez CSS @container, une nouvelle règle puissante qui révolutionne notre approche de la conception responsive en permettant les requêtes de conteneur.

Les limites de la réactivité basée sur la fenêtre d'affichage

Pendant des années, la principale méthode pour rendre les sites web responsives reposait sur les media queries basées sur la fenêtre d'affichage. Ces requêtes, comme @media (min-width: 768px), permettent aux développeurs d'appliquer différents styles en fonction de la largeur de la fenêtre du navigateur. Cela a été incroyablement efficace pour créer des mises en page qui s'adaptent gracieusement à différentes tailles d'écran, des grands écrans d'ordinateur de bureau aux petits appareils mobiles.

Cependant, considérez un scénario où vous avez un composant, tel qu'une carte de produit ou un widget de barre latérale, qui doit s'afficher différemment en fonction de l'espace qu'il occupe dans une mise en page plus complexe. Avec uniquement des media queries basées sur la fenêtre d'affichage, le style de ce composant devient un défi. Si une carte de produit apparaît dans une large mise en page à plusieurs colonnes sur un ordinateur de bureau, elle peut nécessiter une présentation différente de celle qu'elle aurait dans une mise en page étroite à une seule colonne sur une tablette, même si la largeur globale de la fenêtre d'affichage reste la même. En effet, le conteneur du composant dicte son rendu optimal, et non la taille globale de la fenêtre d'affichage.

Le besoin de réactivité au niveau des composants a conduit à des solutions de contournement, impliquant souvent JavaScript pour mesurer les dimensions des éléments et appliquer des classes, ou un imbrication CSS complexe qui peut devenir ingérable. CSS @container vise à résoudre ces problèmes en introduisant une solution CSS native.

Présentation de CSS @container: La règle de requête de conteneur

CSS @container introduit le concept de requêtes de conteneur. Au lieu d'interroger les caractéristiques de la fenêtre d'affichage, les requêtes de conteneur nous permettent d'interroger les caractéristiques du conteneur ancêtre d'un élément qui a été explicitement défini comme conteneur de requête.

Voyez les choses de cette façon: au lieu de demander "Quelle est la largeur de la fenêtre du navigateur?", nous pouvons maintenant demander "Quelle est la largeur de l'élément qui contient ce composant?" Cela déplace l'attention du contexte global (fenêtre d'affichage) vers le contexte local (élément parent ou conteneur désigné).

Définition d'un conteneur de requête

Pour utiliser les requêtes de conteneur, vous devez d'abord désigner un élément HTML comme conteneur de requête. Ceci est réalisé en utilisant la propriété container-type. Cette propriété indique au navigateur que cet élément doit être considéré comme un point de référence pour les requêtes de conteneur ciblant ses descendants.

La valeur la plus courante pour container-type est normal. Cependant, à des fins de style, vous utiliserez souvent inline-size ou size.

• container-type: normal;: C'est la valeur par défaut. Il établit un conteneur de requête mais ne crée pas nécessairement un nouveau bloc de conteneur pour le positionnement, et il n'active pas les requêtes de taille par défaut. Vous devrez généralement combiner cela avec d'autres propriétés pour une fonctionnalité complète.
• container-type: inline-size;: C'est la valeur la plus fréquemment utilisée pour les composants responsives. Il établit un conteneur de requête qui peut être interrogé en fonction de sa dimension en ligne (la largeur dans les modes d'écriture horizontaux, ou la hauteur dans les modes d'écriture verticaux). Ceci est parfait pour les composants qui doivent s'adapter en fonction de leur espace horizontal.
• container-type: size;: Ceci établit un conteneur de requête qui peut être interrogé en fonction à la fois de sa dimension en ligne et de sa dimension de bloc (hauteur dans les modes d'écriture horizontaux, largeur dans les modes d'écriture verticaux). Ceci est utile pour les composants qui doivent s'adapter aux contraintes de largeur et de hauteur.

Vous pouvez également spécifier un nom de conteneur en utilisant la propriété container-name. Cela vous permet de cibler des conteneurs spécifiques lorsque vous avez plusieurs conteneurs de requête dans un arbre de composants, empêchant ainsi un style non intentionnel.

Exemple: Configuration d'un conteneur de requête

            
.product-card-container {
  container-type: inline-size;
  container-name: product-card;
  width: 50%; /* Exemple de largeur pour le conteneur lui-même */
  margin: 20px;
  border: 1px solid #ccc;
  padding: 15px;
}

            

              
                Copy
              
            
          

Dans cet exemple, l'élément avec la classe .product-card-container est maintenant un conteneur de requête nommé 'product-card', et sa taille en ligne (largeur) peut être interrogée.

Écriture de requêtes de conteneur

Une fois qu'un élément est désigné comme conteneur de requête, vous pouvez utiliser la règle @container pour appliquer des styles à ses descendants en fonction des caractéristiques du conteneur. La syntaxe est similaire aux media queries mais utilise le mot-clé container au lieu de media.

Syntaxe:

            
@container [<name> | <family>] <condition> {
  /* Règles CSS à appliquer */
}

            

              
                Copy
              
            
          

• [<name> | <family>] (Facultatif): Spécifie le nom ou la famille du conteneur à interroger. S'il est omis, il interroge tout conteneur ayant un container-type défini.
• <condition>: C'est là que vous spécifiez les caractéristiques du conteneur que vous souhaitez interroger. Les conditions courantes incluent width, height, inline-size, block-size, aspect-ratio, orientation et resolution.

Exemple: Application de styles à une carte de produit dans son conteneur

            
.product-card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Interrogation du conteneur nommé 'product-card' */
@container product-card (min-width: 400px) {
  .product-card {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .product-card img {
    margin-right: 20px;
    margin-bottom: 0;
  }
}

@container product-card (min-width: 600px) {
  .product-card {
    padding: 30px;
  }

  .product-card h3 {
    font-size: 1.8em;
  }
}

            

              
                Copy
              
            
          

Dans cet exemple complet:

• Le .product-card-container est défini comme conteneur de requête.
• L'élément .product-card à l'intérieur reçoit des styles par défaut.
• Lorsque le .product-card-container a une largeur de 400px ou plus, le .product-card passe à une mise en page flex basée sur les lignes, aligne le texte à gauche et ajuste les marges de l'image.
• Lorsque le .product-card-container a une largeur de 600px ou plus, le remplissage et la taille de la police du titre du .product-card sont encore ajustés.

Cela démontre comment un seul composant peut adapter sa mise en page interne et son style en fonction uniquement de l'espace disponible dans son conteneur parent, sans dépendre de la taille globale de la fenêtre d'affichage.

Principales caractéristiques et propriétés des requêtes de conteneur

Au-delà de la règle de base @container et de container-type, il existe plusieurs autres propriétés et caractéristiques connexes qui améliorent la puissance des requêtes de conteneur:

1. container-name

Comme mentionné précédemment, container-name vous permet d'attribuer un identifiant unique à un conteneur de requête. Ceci est crucial lorsque vous avez des composants imbriqués ou plusieurs composants indépendants sur une page, chacun ayant potentiellement ses propres définitions de requête de conteneur.

Exemple:

            
.sidebar {
  container-type: inline-size;
  container-name: sidebar-queries;
}

.main-content {
  container-type: inline-size;
  container-name: main-content-queries;
}

@container sidebar-queries (min-width: 200px) {
  /* Styles pour les éléments du conteneur de la barre latérale */
}

@container main-content-queries (min-width: 700px) {
  /* Styles pour les éléments du conteneur de contenu principal */
}

            

              
                Copy
              
            
          

2. Interrogation de différents axes de conteneur

Les requêtes de conteneur peuvent cibler non seulement la dimension en ligne (généralement la largeur) mais aussi la dimension de bloc (généralement la hauteur) d'un conteneur. Ceci est particulièrement utile pour les composants qui doivent s'adapter aux contraintes de largeur et de hauteur.

• width / inline-size: Requêtes basées sur la dimension horizontale du conteneur.
• height / block-size: Requêtes basées sur la dimension verticale du conteneur.
• aspect-ratio: Requêtes basées sur le rapport entre la largeur et la hauteur du conteneur.
• orientation: Requêtes basées sur le fait que la inline-size du conteneur est supérieure ou égale à sa block-size (portrait) ou inférieure (landscape).

Exemple utilisant block-size:

            
.chart-container {
  container-type: size;
  container-name: chart;
  height: 300px;
}

.chart {
  /* Styles de graphique par défaut */
}

@container chart (min-height: 250px) {
  .chart {
    /* Ajustements pour les graphiques plus grands */
    font-size: 1.1em;
  }
}

@container chart (orientation: landscape) {
  .chart {
    /* Ajustements pour les graphiques plus larges que hauts */
    transform: rotate(90deg);
  }
}

            

              
                Copy
              
            
          

3. Unités de requête de conteneur

Les requêtes de conteneur introduisent de nouvelles unités CSS qui sont relatives aux dimensions d'un conteneur de requête, similaires aux unités de fenêtre d'affichage (vw, vh) mais spécifiques au conteneur.

• cqw: 1% de la taille en ligne du conteneur.
• cqh: 1% de la taille de bloc du conteneur.
• cqi: Équivalent à cqw.
• cqb: Équivalent à cqh.
• cqmin: Le plus petit de cqi ou cqb.
• cqmax: Le plus grand de cqi ou cqb.

Ces unités sont incroyablement puissantes pour créer des styles de composants étroitement couplés qui évoluent proportionnellement avec leurs conteneurs.

Exemple:

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

.product-card h3 {
  font-size: 2.5cqi; /* La taille de la police évolue avec la taille en ligne du conteneur */
  margin-bottom: 1cqi;
}

.product-card p {
  font-size: 1.2cqi;
}

            

              
                Copy
              
            
          

Dans cet exemple, les tailles de police du titre et du paragraphe dans le .product-card s'ajusteront automatiquement en fonction de la largeur de leur conteneur parent, assurant ainsi la lisibilité à travers différentes tailles de composants.

4. La propriété contain (et sa relation avec container-type)

La propriété CSS contain ne fait pas directement partie de la syntaxe de requête de conteneur mais est très pertinente. Elle indique au navigateur le contenu d'un élément pour aider le navigateur à optimiser le rendu. Lorsque vous définissez container-type sur inline-size ou size, cela implique une forme de confinement. Le navigateur sait que les styles à l'intérieur de ce conteneur dépendent de sa taille et n'a pas besoin de rendre à nouveau les parties non liées de la page lorsque le conteneur est redimensionné.

Plus précisément, container-type: inline-size; est un raccourci qui définit implicitement contain: layout style inline-size;. Il s'agit d'une optimisation des performances cruciale.

Cas d'utilisation pratiques et exemples globaux

La polyvalence des requêtes de conteneur les rend applicables dans un large éventail de scénarios, en particulier pour les publics mondiaux où les diverses mises en page et contextes d'appareils sont courants.

1. Menus de navigation responsives

Les éléments de navigation doivent souvent s'adapter d'une liste horizontale sur les grands écrans à un menu hamburger replié sur les petits écrans. Avec les requêtes de conteneur, un composant de navigation peut être placé dans une barre latérale ou un en-tête flexible, et il peut ajuster indépendamment sa mise en page en fonction de la largeur de cette barre latérale ou de cet en-tête, quelle que soit la taille globale de la fenêtre d'affichage.

Scénario global: Imaginez un site de commerce électronique international où les catégories de produits peuvent être affichées dans une barre latérale sur un ordinateur de bureau en Europe, mais dans une section plus étroite sur un appareil mobile en Asie. Un composant de navigation compatible avec les conteneurs garantit qu'il est toujours affiché de manière optimale dans son contexte immédiat.

2. Composants d'interface utilisateur adaptatifs (boutons, cartes, formulaires)

Les éléments d'interface utilisateur courants comme les boutons, les cartes et les champs de formulaire peuvent en bénéficier énormément. Une carte de produit peut afficher les détails côte à côte lorsque son conteneur est large, mais les empiler verticalement lorsque le conteneur est étroit. Un bouton peut modifier son remplissage ou la taille de son texte.

Scénario global: Une plateforme de réservation de voyages peut afficher les détails du vol dans un format de carte compact dans une liste de résultats de recherche. Si cette liste est placée dans une barre latérale étroite sur une tablette, la carte doit adapter sa mise en page pour être plus verticale. Si elle se trouve dans une zone de contenu principal plus large, elle peut afficher plus d'informations horizontalement.

3. Mises en page et tableaux de bord complexes

Les tableaux de bord avec plusieurs widgets ou les mises en page d'articles complexes bénéficient de composants qui peuvent se redistribuer et se restyler en fonction de la colonne dans laquelle ils résident. Cela permet un contrôle plus granulaire sur la présentation des informations.

Scénario global: Un tableau de bord d'informations financières pourrait avoir plusieurs widgets affichant des symboles boursiers, des analyses de marché et des flux d'actualités. Chaque widget peut être un conteneur de requête, garantissant que l'affichage du symbole boursier, la réactivité du graphique ou la longueur de l'extrait de nouvelles s'ajustent correctement en fonction de la largeur spécifique allouée à ce widget dans le système de grille du tableau de bord.

4. Styles d'impression et contenu exporté

Bien que les media queries soient généralement utilisées pour l'impression, les requêtes de conteneur peuvent également aider à gérer le style des composants lorsque le contenu est exporté ou imprimé, assurant ainsi la cohérence en fonction du 'conteneur' (par exemple, une largeur de page spécifique dans une feuille de style d'impression).

5. Systèmes de conception et composants réutilisables

Les requêtes de conteneur changent la donne pour les systèmes de conception. Les développeurs peuvent créer des composants véritablement indépendants et réutilisables qui n'ont pas besoin d'être spécifiquement adaptés à toutes les mises en page possibles. Le style d'un composant est intrinsèquement lié à son conteneur, ce qui le rend plus prévisible et plus facile à mettre en œuvre dans différents projets et contextes.

Scénario global: Une société mondiale construisant un nouveau portail interne peut tirer parti d'un système de conception avec des composants compatibles avec les conteneurs. Un composant de bouton, par exemple, peut être conçu pour être esthétique qu'il se trouve dans une fenêtre modale étroite, un pied de page large ou un champ de formulaire standard, le tout sans nécessiter de classes spécifiques pour chaque scénario.

Prise en charge du navigateur et mise en œuvre

Les requêtes de conteneur sont une fonctionnalité CSS relativement nouvelle. Bien que la prise en charge du navigateur s'améliore rapidement, il est essentiel de vérifier les dernières tables de compatibilité pour une utilisation en production.

• Chrome/Edge: La prise en charge est disponible depuis un certain temps, nécessitant souvent un indicateur initialement, mais est maintenant largement prise en charge.
• Firefox: La prise en charge est disponible.
• Safari: La prise en charge est disponible.
• Autres navigateurs: La prise en charge est en croissance, mais vérifiez toujours pour votre public cible.

Pour les navigateurs qui ne prennent pas en charge les requêtes de conteneur, vous devrez mettre en œuvre une stratégie de repli. Cela implique souvent d'utiliser JavaScript pour détecter la prise en charge et fournir une expérience responsive plus traditionnelle basée sur la fenêtre d'affichage, ou d'utiliser d'anciennes techniques CSS.

Exemple de stratégie de repli (conceptuel):

            
.product-card-container {
  container-type: inline-size;
  /* Styles par défaut pour le composant */
  display: flex;
  flex-direction: column;
}

/* Repli utilisant les media queries pour les navigateurs qui ne prennent pas en charge les requêtes de conteneur */
@media (min-width: 400px) {
  .product-card-container {
    /* Styles équivalents à @container (min-width: 400px) */
    flex-direction: row;
  }
}

/* Styles spécifiques aux requêtes de conteneur */
@container (min-width: 400px) {
  .product-card-container {
    /* Styles spécifiques pour lorsque le conteneur a 400px+ */
    /* Ceux-ci remplaceront le repli de media query s'il est pris en charge */
  }
}

            

              
                Copy
              
            
          

L'approche générale consiste à laisser les requêtes de conteneur prendre le pas si elles sont prises en charge, et à fournir une expérience responsive moins granulaire mais toujours fonctionnelle via des media queries pour les anciens navigateurs.

Meilleures pratiques et conseils pour l'utilisation des requêtes de conteneur

Pour exploiter pleinement la puissance des requêtes de conteneur de manière efficace et maintenir une base de code robuste et maintenable:

• Définir les conteneurs explicitement: Définissez toujours container-type sur les éléments qui doivent agir comme conteneurs de requête. Ne vous fiez pas au comportement implicite.
• Utiliser des noms pour plus de clarté: Utilisez container-name lorsque vous traitez des conteneurs imbriqués ou multiples indépendants pour éviter les collisions de noms et vous assurer que les requêtes ciblent les éléments corrects.
• Penser d'abord au composant: Concevez et construisez vos composants en gardant à l'esprit les requêtes de conteneur. Tenez compte de leur comportement à différentes tailles de conteneur.
• Utiliser les unités de requête de conteneur avec sagesse: cqw, cqh, etc., sont puissants pour les composants évolutifs. Utilisez-les pour les tailles de police, l'espacement et autres dimensions qui doivent s'adapter proportionnellement.
• Combiner avec les media queries: Les requêtes de conteneur ne remplacent pas toutes les media queries. Utilisez les media queries pour la mise en page globale de la page, la typographie pour l'ensemble du site et les fonctionnalités d'accessibilité, et les requêtes de conteneur pour la réactivité au niveau des composants.
• Tester minutieusement: Testez vos composants dans différentes tailles de conteneur et environnements de navigateur pour vous assurer qu'ils se comportent comme prévu. Redimensionnez la fenêtre de votre navigateur, utilisez les outils de développement pour simuler différentes tailles d'éléments et vérifiez la compatibilité.
• Tenir compte des performances: Bien que les requêtes de conteneur puissent améliorer les performances en isolant le style, soyez attentif à l'imbrication trop complexe ou à un trop grand nombre de conteneurs de requête s'ils ne sont pas gérés correctement.
• Amélioration progressive: Assurez-vous que votre site reste utilisable et présentable dans les navigateurs qui ne prennent pas en charge les requêtes de conteneur en fournissant des replis élégants.

Conclusion: Une nouvelle ère de conception responsive

CSS @container représente un progrès significatif dans la conception web responsive. En permettant aux développeurs de créer des styles qui sont conscients du contexte au niveau des composants, les requêtes de conteneur débloquent un nouveau niveau de flexibilité et de modularité de la conception. Cela permet la création d'interfaces véritablement adaptables qui sont plus robustes, plus faciles à maintenir et mieux adaptées à la diversité des appareils et des mises en page rencontrées par un public mondial.

À mesure que la prise en charge du navigateur continue de mûrir, l'adoption des requêtes de conteneur deviendra de plus en plus essentielle pour la création d'expériences web modernes, sophistiquées et universellement accessibles. Adoptez cet outil puissant et redéfinissez votre approche de la conception responsive pour un monde véritablement connecté.