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. Zo kan een kaartcomponent zijn grootte en stijl aanpassen aan de container waarin hij geplaatst is, of het nu een zijbalk, een hero-sectie of een raster in de hoofdtekst van een pagina is.

Zoals in de volgende afbeelding wordt getoond, kunt u mediaquery's voor macro-indelingen, containerquery's voor micro-indelingen en op gebruikersvoorkeuren gebaseerde mediaquery's combineren 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 nieuwe CSS- en UI-functies. Deze keer duiken we in hoe sommige bedrijven containerquery's hebben gebruikt en er profijt van hebben gehad.

rodeBus

redBus onderhoudt en levert verschillende code voor de mobiele en desktopversies. Na de implementatie van containerquery's op hun pagina's 'Things-to-do' en 'Cargo' , konden ze deze code samenvoegen tot één codebase voor deze sites. Dit maakte ze responsief en bespaarde ontwikkeltijd. Het volgende voorbeeld demonstreert dit met behulp van de pagina 'Cargo':

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

De Product Detail Pages (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 afgekapt voor kleinere schermformaten (zie de volgende "Voor"-video).

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

Voor

Na

Code

De volgende code vraagt ​​de grootte van de bovenliggende container met de naam infowrapper op. Als de maximale breedte van de infowrapper 360 px 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-richting van de bovenliggende container opgevraagd. In Latijnse talen zoals Engels zou dit de breedte van de bovenliggende container zijn, aangezien 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;
  }
`;

Waar u rekening mee moet houden bij het gebruik van containerquery's

Tokopedia ontdekte hun use case door te letten op tekstellipsen op hun site. Dit duidde op containers die mogelijk te klein waren, waardoor de content voor de gebruiker werd afgekapt.

Een andere goede use case voor containerquery's voor e-commercesites is het zoeken naar hergebruikte componenten. De knop 'Toevoegen aan winkelwagen ' kan bijvoorbeeld anders worden weergegeven op basis 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 containerquery's.

Je kunt ervoor kiezen om incrementele verbeteringen aan je site door te voeren. Je kunt bijvoorbeeld beginnen met kleinere use cases, zoals het ellipsvoorbeeld van Tokopedia, en daar containerquery's implementeren. Zoek 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? We horen graag van je .

Ontdek de andere artikelen in deze serie die gaan over hoe e-commercebedrijven profiteren van nieuwe CSS- en UI-functies zoals scroll-aangedreven animaties, popovers, containerquery's en de has() selector.

• Waarom zijn web-UI-mogelijkheden belangrijk voor uw e-commercesite?
• Casestudies van scroll-gestuurde animaties
• Bekijk casestudy's van Transitions
• Popover-casestudies
• :has() selector casestudies