Études de cas sur les requêtes de conteneur

Swetha Gopalakrishnan

Saurabh Rajpal

Les requêtes de conteneurs offrent une approche hautement dynamique et flexible du responsive design. Les requêtes de conteneur utilisent la règle d'instruction @container. Cela fonctionne de manière similaire à une requête multimédia avec @media, mais @container interroge un conteneur parent pour obtenir des informations de style plutôt que le viewport et l'user-agent.

Les requêtes de conteneur font partie de la nouvelle référence disponible.

En répondant à la taille du conteneur, les requêtes de conteneur permettent aux composants de s'adapter à leur emplacement dans une interface. Par exemple, un composant de carte peut adapter sa taille et ses styles en fonction du conteneur dans lequel il est placé, qu'il s'agisse d'une barre latérale, d'une section hero ou d'une grille dans le corps principal d'une page.

Comme le montre l'illustration suivante, vous pouvez combiner des requêtes média pour les mises en page de macro, des requêtes de conteneur pour les micro mises en page, et des requêtes média basées sur les préférences de l'utilisateur afin de créer un système de responsive design puissant. En savoir plus sur les requêtes de conteneur et le nouveau design responsif

Cet article fait partie d'une série qui explique comment les entreprises d'e-commerce ont amélioré leurs sites Web à l'aide de nouvelles fonctionnalités CSS et d'interface utilisateur. Cette fois, nous allons voir comment certaines entreprises ont utilisé et tiré parti des requêtes de conteneur.

redBus

redBus gère et diffuse un code différent pour ses versions mobile et classique. Après avoir implémenté des requêtes de conteneur sur leurs pages Activités à découvrir et Cargo, ils ont pu unifier ce code dans un seul codebase pour ces sites. Ils sont ainsi plus réactifs et ont gagné du temps de développement. L'exemple suivant illustre ce processus à l'aide de la page relative aux fret:

Code

Dans l'exemple suivant, .bpdpCardWrapper est le conteneur parent, nommé bpdpSection.

Si le conteneur bpdpSection a une largeur minimale de 744 px, les font-size et line-height des composants sélectionnés par .bpdpCardContainer et .subTxt, .bpdpAddress sont mis à jour.

//Code for Container Queries
.bpdpCardWrapper {
   container-type: inline-size;
   container-name: bpdpSection;
}
@container bpdpSection (min-width: 744px){
   .bpdpCardContainer{
      font-size: 1rem;
      line-height: 1.5rem;
   }

   .subTxt, .bpdpAddress{
       font-size: 0.875rem;
       line-height: 1.25rem;
   }
}

Impact

Tokopedia

Les pages d'informations détaillées sur les produits de Tokopedia contiennent plusieurs onglets permettant d'accéder aux informations sur le magasin et les produits. Auparavant, la mise en page de cette page était divisée en trois colonnes et le nom de produit à gauche était parfois tronqué pour des tailles d'écran plus petites (voir la vidéo "Avant" ci-dessous).

Pour résoudre ce problème de mise en page, l'entreprise a adopté facilement et rapidement les requêtes de conteneur. Après cette implémentation, ils ont pu obtenir une mise en page flexible où le nom du produit était toujours entièrement visible (voir la vidéo "Après" ci-dessous).

Avant

Après

Code

Le code suivant interroge la taille du conteneur parent nommé infowrapper. Si la largeur maximale de la infowrapper est de 360 px, les width, margin, et padding des composants enfants sont ajustés.

Définir container-type sur inline-size interroge la taille de l'orientation intégrée du parent. Dans les langues latines comme l'anglais, il s'agit de la largeur du conteneur parent, car le texte s'affiche en ligne de gauche à droite.

export const styCredibilityContainer = css`
  container-name: infowrapper;
  container-type: inline-size;
`;

export const styBtnShopFollow = css`
  margin-left: auto;
  width: 98px;
  @container infowrapper (max-width: 360px) {
    width: 100%;
    margin-top: 2px;
    margin-bottom: 8px;
    padding-left: 60px;
  }
`;

export const styBottomRow = css`
  margin-top: 4px;
  padding-left: 60px;
  display: flex;
  align-items: center;

  @container infowrapper (max-width: 360px) {
    padding-left: 0px;
  }

  > div {
    text-align: left;
    margin-top: 0 !important;
  }
`;

Éléments à prendre en compte lors de l'utilisation de requêtes de conteneur

Tokopedia a identifié son cas d'utilisation en recherchant des points de suspension dans le texte sur son site. Cela indique que les conteneurs peuvent être trop petits, ce qui entraîne la coupure du contenu pour l'utilisateur.

Un autre bon cas d'utilisation des requêtes de conteneur pour les sites d'e-commerce consiste à rechercher des composants réutilisés. Par exemple, le bouton Ajouter au panier peut s'afficher différemment en fonction du conteneur parent (par exemple, uniquement l'icône si elle se trouve dans la fiche produit et l'icône avec du texte s'il s'agit d'un incitation à l'action principale sur la page). Le bouton peut être un bon candidat pour les requêtes de conteneur.

Vous pouvez apporter des améliorations progressives à votre site. Par exemple, vous pouvez commencer par des cas d'utilisation plus petits, comme l'exemple d'ellipse de Tokopedia, et implémenter des requêtes de conteneur. Ensuite, trouvez progressivement d'autres cas et améliorez le CSS.

Ressources :

• Les requêtes de conteneur s'affichent dans les navigateurs stables
• Requêtes de conteneur – Conception dans le navigateur
• Démonstrations de requêtes de conteneur
• Démonstration: cartes de requête de conteneur
• Vidéo: Nouveautés de l'UI Web – I/O 2023
• Voulez-vous signaler un bug ou demander une nouvelle fonctionnalité ? Votre avis nous intéresse.

Découvrez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont bénéficié de l'utilisation de nouvelles fonctionnalités CSS et d'UI telles que les animations basées sur le défilement, les popovers, les requêtes de conteneur et le sélecteur has().

• Pourquoi les fonctionnalités d'UI Web sont-elles importantes pour votre site d'e-commerce ?
• Études de cas sur les animations liées au défilement
• Afficher les études de cas sur Transitions
• Études de cas sur les pop-ups
• Études de cas sur le sélecteur:has()