Les requêtes de conteneur offrent une approche hautement dynamique et flexible de la conception responsive. Les requêtes de conteneur utilisent la règle at @container. Le fonctionnement est semblable à celui d'une requête média avec @media, mais @container interroge un conteneur parent pour obtenir des informations de style plutôt que la fenêtre d'affichage et l'user-agent.
Les requêtes de conteneur font partie de la version de référence désormais 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 principale 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 des mises en page macro, des requêtes de conteneur pour des micromises 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. Apprenez-en plus sur les requêtes de conteneur et sur le nouveau responsive design.
Cet article fait partie d'une série expliquant comment les entreprises d'e-commerce peuvent améliorer leurs sites Web à l'aide de nouvelles fonctionnalités CSS et UI. Cette fois-ci, nous allons voir comment certaines entreprises ont utilisé et tiré profit 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 sur ses pages Activités à découvrir et Cargo, l'entreprise a pu unifier ce code en un seul codebase pour ces sites. Elles sont ainsi réactives et ont gagné du temps de développement. L'exemple suivant illustre ce processus en utilisant la page de fret:
Code
Dans l'exemple suivant, .bpdpCardWrapper est le conteneur parent, nommé bpdpSection.
Si le conteneur bpdpSection a une largeur minimale de 744 pixels, les éléments 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
| Avant (plusieurs code base) | Après (code base unique) | |
|---|---|---|
| Infrastructure | Infrastructure distincte (coût élevé). | Même infrastructure (coût réduit). |
| Design | Interface utilisateur distincte, mais cohérence médiocre | Difficile à résoudre, mais possible. |
| Performances | Facile à gérer, le système étant distinct, il constitue un double des efforts déployés pour améliorer les performances. | Il s'agit d'une page et d'une fonctionnalité spécifiques, mais le score PageSpeedInsights de redBus est supérieur à 80. |
| Développement | Des équipes de développeurs distinctes. | Délai entre 30 et 40 % en moins |
Tokopedia
Les pages d'informations détaillées sur les produits de Tokopedia contiennent plusieurs onglets pour les informations sur le magasin et les produits. 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 de plus petite taille (voir la vidéo "Avant" suivante).
Pour résoudre ce problème de mise en page, l'équipe a adopté facilement et rapidement les requêtes de conteneur. Après cette implémentation, l'équipe a pu bénéficier 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 éléments width, margin, et padding des composants enfants sont ajustés.
La définition de container-type sur inline-size interroge la taille de sens intégré du parent. Dans les langues latines comme l'anglais, il s'agit de la largeur du conteneur parent, car le texte s'affiche 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 dans du texte sur son site. Cela indique que les conteneurs peuvent être trop petits, ce qui entraîne une 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 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'une 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, puis y implémenter des requêtes de conteneur. Ensuite, recherchez progressivement d'autres cas et améliorez 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êtes de conteneur
- Démonstration: Fiches de requête de conteneur
- Vidéo: Nouveautés de l'interface utilisateur Web - I/O 2023
- Souhaitez-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 tiré parti des nouvelles fonctionnalités CSS et UI, telles que les animations basées sur le défilement, le pop-up, les requêtes de conteneur et le sélecteur has().