Containerqueries bieden een zeer dynamische en flexibele benadering van responsief ontwerp. Containerqueries maken gebruik van de @container at-regel. Dit werkt op een vergelijkbare manier als een mediaquery met @media , maar in plaats van de viewport en user agent, vraagt @container een parent-container om stylinginformatie.
Door te reageren op de grootte van de container, stellen containerquery's componenten in staat zich aan te passen aan hun positie in een interface. Een kaartcomponent kan bijvoorbeeld zijn grootte en stijl aanpassen aan de container waarin deze is geplaatst, of dat nu een zijbalk, een hero-sectie of een raster in het hoofdgedeelte van een pagina is.
Zoals in de volgende afbeelding te zien is, kunt u mediaqueries voor macro-layouts, containerqueries voor micro-layouts en op gebruikersvoorkeuren gebaseerde mediaqueries combineren om een krachtig responsief ontwerpsysteem te creëren. Lees meer over containerqueries en het nieuwe responsieve ontwerp .
Dit artikel maakt deel uit van een serie waarin we bespreken hoe e-commercebedrijven hun websites hebben verbeterd met behulp van nieuwe CSS- en UI-functies. Deze keer duiken we in hoe sommige bedrijven containerqueries hebben gebruikt en er profijt van hebben gehad.
rode bus
redBus onderhoudt en levert verschillende code voor de mobiele en desktopversies. Na het implementeren van containerqueries op hun Things-to-do- en cargo- pagina's, konden ze deze code samenvoegen tot één codebase voor beide sites. Dit maakte de sites responsief en bespaarde ontwikkeltijd. Het volgende voorbeeld illustreert dit aan de hand van de cargo-pagina:
Code
In het volgende voorbeeld is .bpdpCardWrapper de bovenliggende container, genaamd bpdpSection .
Als de container bpdpSection een minimale breedte van 744px heeft, worden de font-size en line-height voor de componenten die zijn geselecteerd door .bpdpCardContainer en .subTxt, .bpdpAddress bijgewerkt.
//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;
}
}
Invloed
| Voorheen (meerdere codebases) | Na (één codebasis) | |
|---|---|---|
| Infrastructuur | Aparte infrastructuur (hoge kosten). | Dezelfde infrastructuur (lagere kosten). |
| Ontwerp | Aparte gebruikersinterface, maar gebrekkige consistentie. | Een lastige, maar wel haalbare oplossing. |
| Prestatie | Eenvoudig te hanteren omdat het systeem gescheiden is, maar het dupliceert wel de inspanning die nodig is om de prestaties te verbeteren. | Dit verschilt per pagina en functie, maar de PageSpeedInsights- score van redBus ligt boven de 80. |
| Ontwikkeling | Afzonderlijke ontwikkelaarsteams. | 30% - 40% tijdsbesparing. |
Tokopedia
De productdetailpagina's (PDP's) van Tokopedia bevatten meerdere tabbladen voor de winkel en productinformatie. Voorheen was de lay-out van deze pagina verdeeld in drie kolommen en werd de productnaam aan de linkerkant soms afgesneden op kleinere schermformaten (zie de volgende "Voor"-video).
Om dit lay-outprobleem op te lossen, hebben ze snel en eenvoudig containerqueries geïmplementeerd. Na deze implementatie beschikten ze over een flexibele lay-out waarbij de productnaam altijd volledig zichtbaar was (zie de volgende "Na"-video).
Voor
Na
Code
De volgende code vraagt de grootte op van de bovenliggende container met de naam infowrapper . Als de maximale breedte van de infowrapper 360px is, worden de width , margin, en padding van de onderliggende componenten aangepast.
Door het container-type in te stellen op inline-size wordt de inline-direction size van het bovenliggende element opgevraagd. In Latijnse talen zoals Engels is dit de breedte van de bovenliggende container, aangezien de tekst van links naar rechts inline loopt.
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;
}
`;
Aandachtspunten bij het gebruik van containerquery's
Tokopedia ontdekte hun use case door te zoeken naar tekstellipsen op hun site. Deze duidden op containers die mogelijk te klein waren, waardoor de inhoud voor de gebruiker werd afgesneden.
Een ander goed voorbeeld van het gebruik van containerqueries voor e-commercewebsites is het opsporen van hergebruikte componenten. De 'Toevoegen aan winkelwagen'- knop kan bijvoorbeeld anders worden weergegeven, afhankelijk van de bovenliggende container (bijvoorbeeld alleen het pictogram als deze zich in de productkaart bevindt en een pictogram met tekst als het een primaire CTA op de pagina is). De knop zou een goede kandidaat kunnen zijn voor containerqueries.
Je kunt ervoor kiezen om je site stapsgewijs te verbeteren. Je zou bijvoorbeeld kunnen beginnen met kleinere use cases, zoals het ellips-voorbeeld van Tokopedia, en daar containerqueries implementeren. Vervolgens kun je geleidelijk meer use cases vinden en de CSS verbeteren.
Bronnen:
- Containerquery's worden correct verwerkt in stabiele browsers.
- Containerquery's - Ontwerpen in de browser
- Containerquery-demonstraties
- Demo: containerquerykaarten
- Video: Wat is er nieuw in Web UI - I/O 2023
- Wil je een bug melden of een nieuwe functie aanvragen? We horen graag van je .
Ontdek de andere artikelen in deze serie die bespreken hoe e-commercebedrijven profiteerden van nieuwe CSS- en UI-functies zoals scroll-driven animations, popover, container queries en de has() selector.