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.
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">![Image montrant comment les différents types de styles fonctionnent ensemble.](https://developer.chrome.com/static/blog/css-ui-ecommerce-cq/image/new-responsive.png?authuser=9&hl=fr)
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
Avant (plusieurs code base) | Après (code base unique) | |
---|---|---|
Infrastructure | Infrastructure distincte (coût élevé) | Infrastructure identique (coût réduit) |
Conception | Interface utilisateur distincte, mais mauvaise cohérence | Difficile à résoudre, mais possible. |
Performances | Facile à utiliser, car le système est distinct, mais les efforts d'amélioration des performances sont doubles. | Il s'agit d'une page et d'une fonctionnalité spécifiques, mais le score PageSpeedInsights de redBus est supérieur à 80. |
Développement | Équipes de développeurs distinctes. | Réduction de 30 à 40 % du temps. |
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
<ph type="x-smartling-placeholder">Après
<ph type="x-smartling-placeholder">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()
.