Les requêtes de conteneur
offrent une approche très dynamique et flexible de la conception adaptative. Elles utilisent la règle at @container. Cela fonctionne de la même manière qu'une requête média avec @media, mais au lieu de cela, @container interroge un conteneur parent pour obtenir des informations de style plutôt que la fenêtre d'affichage et l'agent utilisateur.
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 illustré ci-dessous, vous pouvez combiner des requêtes média pour les mises en page macro, des requêtes de conteneur pour les mises en page micro et des requêtes média basées sur les préférences de l'utilisateur pour créer un système de conception adaptative puissant. En savoir plus sur les requêtes de conteneur et la nouvelle conception adaptative.
Cet article fait partie d'une série qui explique comment les entreprises de commerce électronique 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é les requêtes de conteneur et en ont tiré parti.
redBus
redBus gère et diffuse différents codes pour ses versions mobile et ordinateur. Après avoir implémenté des requêtes de conteneur sur ses pages "Things-to-do" (Activités) et "cargo" (marchandises), l'entreprise a pu unifier ce code en une seule base de code pour ces sites. Cela les a rendus adaptatifs et a permis de gagner du temps de développement. L'exemple suivant illustre cela à l'aide de la page "cargo" :
Code
Dans l'exemple suivant, .bpdpCardWrapper est le conteneur parent, nommé bpdpSection.
Si le conteneur bpdpSection a une largeur minimale de 744 pixels, la font-size et la line-height des composants sélectionnés par .bpdpCardContainer et .subTxt, .bpdpAddress sont mises à 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
| Avant (plusieurs bases de code) | Après (une seule base de code) | |
|---|---|---|
| Infrastructure | Infrastructure distincte (coût élevé) | Même infrastructure (coût réduit) |
| Conception | Interface utilisateur distincte, mais cohérence médiocre | Difficile à résoudre, mais possible |
| Performances | Facile à gérer, car le système est distinct, mais duplique les efforts d'amélioration des performances | Cela dépend de la page et de la fonctionnalité, mais le score PageSpeedInsights de redBus est supérieur à 80. |
| Développement | Équipes de développement distinctes | Réduction du temps de 30 à 40 % |
Tokopedia
Les pages de détails produit (PDP) de Tokopedia contiennent plusieurs onglets pour les informations sur la boutique et les informations produit. Auparavant, la mise en page de cette page était divisée en trois colonnes, et parfois le nom du produit à gauche était tronqué pour les écrans plus petits (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, elle a pu disposer d'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 infowrapper est de 360 pixels, les
width, margin, et padding des composants enfants sont ajustés.
La définition de container-type sur inline-size interroge la taille de la direction en ligne 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 trouvé son cas d'utilisation en recherchant des points de suspension sur son site. Cela indiquait que les conteneurs étaient peut-être trop petits, ce qui entraînait la coupure du contenu pour l'utilisateur.
Un autre cas d'utilisation intéressant des requêtes de conteneur pour les sites de commerce électronique consiste à rechercher les 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 s'il se trouve dans la fiche produit et l'icône avec du texte s'il s'agit d'un CTA principal sur la page). Le bouton peut être un bon candidat pour les requêtes de conteneur.
Vous pouvez choisir d'apporter des améliorations progressives à votre site. Par exemple, vous pouvez commencer par des cas d'utilisation plus petits, comme l'exemple de points de suspension de Tokopedia, et y implémenter des requêtes de conteneur. Ensuite, trouvez progressivement d'autres cas et améliorez le CSS.
Ressources :
- Les requêtes de conteneur arrivent dans les navigateurs stables
- Requêtes de conteneur : conception dans le navigateur
- Démonstrations de requêtes de conteneur
- Démonstration : cartes de requêtes de conteneur
- Vidéo : Nouveautés de l'interface utilisateur Web – I/O 2023
- Vous souhaitez signaler un bug ou demander une nouvelle fonctionnalité ? Nous sommes à votre écoute.
Découvrez les autres articles de cette série qui expliquent comment les entreprises de e-commerce ont bénéficié de l'utilisation de nouvelles fonctionnalités CSS et d'interface utilisateur telles que les animations pilotées par le défilement, les pop-ups, les requêtes de conteneur et le sélecteur has().