Casestudy's voor containerquery's

Swetha Gopalakrishnan

Saurabh Rajpal

Containerquery's bieden een zeer dynamische en flexibele benadering van responsief ontwerp. Containerquery's gebruiken de @container at-regel. Dit werkt op een vergelijkbare manier als een mediaquery met @media , maar in plaats daarvan vraagt @container een bovenliggende container om stijlinformatie in plaats van de viewport en user-agent.

Containerquery's maken deel uit van Baseline Newly Available .

Door te reageren op de containergrootte zorgen containerquery's ervoor dat componenten zich kunnen aanpassen aan hun locatie in een interface. Een kaartcomponent kan bijvoorbeeld de grootte en stijl aanpassen aan de container waarin deze is geplaatst, of het nu een zijbalk, een hero-sectie of een raster in de hoofdtekst van een pagina is.

Zoals u in de volgende afbeelding ziet, kunt u mediaquery's voor macro-indelingen en containerquery's voor micro-indelingen combineren met op gebruikersvoorkeuren gebaseerde mediaquery's om een ​​krachtig responsief ontwerpsysteem te creëren. Lees meer over containerquery's en het nieuwe responsieve ontwerp .

Dit artikel maakt deel uit van een serie waarin wordt besproken hoe e-commercebedrijven hun websites hebben verbeterd met behulp van nieuwe CSS- en UI-functies. Deze keer duiken we in hoe sommige bedrijven containerquery's gebruikten en ervan profiteerden.

rodeBus

redBus onderhoudt en levert verschillende code voor zijn mobiele en desktopversies. Nadat ze containerquery's hadden geïmplementeerd op hun Things-to-do- en vrachtpagina 's, konden ze deze code verenigen in één enkele codebase voor deze sites. Dit maakte ze responsief en bespaarde ontwikkeltijd. Het volgende voorbeeld demonstreert dit met behulp van de vrachtpagina:

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 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

Tokopedia

Tokopedia's Product Detail Pages (PDP) bevatten meerdere tabbladen voor de winkel- en productinformatie. Voorheen was de lay-out van deze pagina verdeeld in drie kolommen en soms werd de productnaam aan de linkerkant afgekapt voor kleinere schermformaten (zie de volgende "Before" video).

Om dit lay-outprobleem op te lossen, hebben ze eenvoudig en snel containerquery's overgenomen. Na deze implementatie konden ze beschikken over een flexibele lay-out waarbij de productnaam altijd volledig zichtbaar was (zie de volgende "Na" video).

Voor

Na

Code

De volgende code vraagt ​​naar de grootte 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.

Als u het container-type instelt op inline-size wordt de inline-richtinggrootte van het bovenliggende item opgevraagd. In Latijnse talen zoals Engels zou dit de breedte van de bovenliggende container zijn, omdat de tekst inline van links naar rechts 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;
  }
`;

Dingen waarmee u rekening moet houden bij het gebruik van containerquery's

Tokopedia vond hun gebruiksscenario door te letten op tekstellipsen op hun site. Dit duidde op containers die mogelijk te klein waren, waardoor de inhoud voor de gebruiker werd afgesloten.

Een ander goed gebruiksscenario voor containerquery's voor e-commercesites is het letten op hergebruikte componenten. De knop Toevoegen aan winkelwagentje kan bijvoorbeeld anders worden weergegeven op basis van de bovenliggende container (bijvoorbeeld alleen het pictogram als dit op de productkaart staat en het pictogram met tekst als het een primaire CTA op de pagina is). De knop kan een goede kandidaat zijn voor containerquery's.

U kunt ervoor kiezen om stapsgewijze verbeteringen aan uw site aan te brengen. U kunt bijvoorbeeld beginnen met kleinere gebruiksscenario's, zoals het ellipsvoorbeeld van Tokopedia, en daar containerquery's implementeren. Vind vervolgens geleidelijk meer cases en verbeter de CSS.

Bronnen:

• Containerquery's komen terecht in stabiele browsers
• Containerquery's - Ontwerpen in de browser
• Demo's voor containerquery's
• Demo: containerquerykaarten
• Video: Wat is er nieuw in Web UI - I/O 2023
• Wil je een bug melden of een nieuwe functie aanvragen? Wij willen van u horen .

Ontdek de andere artikelen in deze serie waarin wordt besproken hoe e-commercebedrijven profiteerden van het gebruik van nieuwe CSS- en UI-functies, zoals scrollgestuurde animaties, popover, containerquery's en de has() selector.

• Waarom zijn Web UI-mogelijkheden belangrijk voor uw e-commercesite?
• Casestudy's van scrollgestuurde animaties
• Bekijk de casestudy's van Transitions
• Popover-casestudies
• :has() selector-casestudies