Études de cas sur les requêtes de conteneur

Swetha Gopalakrishnan

Saurabh Rajpal

Requêtes de conteneur offrent une approche hautement dynamique et flexible de l'approche conception. Les requêtes de conteneur utilisent la règle at @container. Cela fonctionne de la même manière vers une requête média avec @media, mais à la place, @container interroge un parent pour styliser les informations, plutôt que la fenêtre d'affichage et le user-agent.

Les requêtes de conteneur font partie de Baseline Newly Available.

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 fiche peut adapter son en fonction du conteneur dans lequel il est placé (barre latérale, héros, etc.). ou une grille dans le corps principal d'une page.

Comme le montre l'illustration suivante, vous pouvez combiner des requêtes média pour des macros Mises en page, requêtes de conteneur pour les micro-mises en page, avec médias basés sur les préférences de l'utilisateur des requêtes pour créer un puissant système de responsive design. Lue plus d'informations sur les requêtes de conteneur et nouveau responsive design.

</ph>

Cet article fait partie d'une série traitant de la façon dont les entreprises d'e-commerce amélioré leurs sites Web grâce à de nouvelles fonctionnalités CSS et d'interface utilisateur. Cette fois, nous plongeons sur la façon dont certaines entreprises ont utilisé et tiré parti des requêtes de conteneurs.

redBus

redBus gère et diffuse un code différent pour ses versions pour mobile et pour ordinateur. Après avoir implémenté des requêtes de conteneur Activités à découvrir et cargo, elle a pu unifier ce code en un seul codebase pour ces sites. Cela les a rendus réactifs et a permis le temps de développement. L'exemple suivant illustre ce fonctionnement à l'aide de la page relative aux fret:

Code

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

Si le conteneur bpdpSection a une largeur minimale de 744 pixels, font-size et line-height pour les composants sélectionnés par .bpdpCardContainer et .subTxt, .bpdpAddress a été 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 (PDP) de Tokopedia contiennent plusieurs onglets pour la boutique et des informations produit. Auparavant, la mise en page de cette page était divisée en trois et parfois le nom de produit à gauche était tronqué pour des tailles plus petites, tailles d'écran (voir la vidéo "Avant" suivante).

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, l'entreprise a pu utiliser une mise en page flexible, le nom du produit était toujours entièrement visible (voir la vidéo "Après" suivante).

Avant

Après

Code

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

Définir container-type sur inline-size interroge la taille de la direction d'intégration du parent. Pour les langues latines comme l'anglais, il s'agit de la largeur conteneur parent, puisque le texte est aligné 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 la présence de points de suspension sur son site. Cela indiquait que les conteneurs étaient peut-être trop petits, entraînant une coupure du contenu. pour l'utilisateur.

Un autre cas d'utilisation intéressant des requêtes de conteneur pour les sites d'e-commerce est de rechercher pour les composants réutilisés. Par exemple, le bouton Ajouter au panier peut s'afficher. 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'une incitation à l'action principale sur la page). La peut être un bon candidat pour les requêtes de conteneur.

Vous pouvez apporter des améliorations progressives à votre site. Par exemple : pourrait commencer par des cas d'utilisation plus petits, comme l'exemple des ellipses de Tokopedia, pour y implémenter des requêtes de conteneur. Ensuite, trouvez progressivement de plus en plus de cas et améliorer le CSS.

Ressources :

• Les requêtes de conteneur arrivent dans des navigateurs stables
• Requêtes de conteneur – Conception dans le navigateur
• Démonstrations de requête de conteneur
• Démonstration: Fiches 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.

Lisez les autres articles de cette série sur l'e-commerce entreprises ont profité de l'utilisation de nouvelles fonctionnalités CSS et UI, comme animations, pop-over, requêtes de conteneur et sélecteur has().

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