Fallstudien zu Containerabfragen

Swetha Gopalakrishnan

Saurabh Rajpal

Containerabfragen bieten einen hochdynamischen und flexiblen Ansatz für responsives Webdesign. Containerabfragen verwenden die @-Regel @container. Das funktioniert ähnlich wie bei einer Medienabfrage mit @media. Bei @container wird jedoch ein übergeordneter Container statt des Viewports und des User-Agents für Stilinformationen abgefragt.

 Containerabfragen sind Teil von Baseline Newly Available.

Durch die Reaktion auf die Containergröße ermöglichen Containerabfragen die Anpassung von Komponenten an ihre Position in einer Schnittstelle. So kann beispielsweise die Größe und der Stil einer Kartenkomponente an den Container angepasst werden, in dem sie sich befindet, z. B. an eine Seitenleiste, einen Hero-Bereich oder ein Raster im Hauptbereich einer Seite.

Wie in der folgenden Abbildung dargestellt, können Sie Mediaabfragen für Makrolayouts, Containerabfragen für Mikrolayouts und Mediaabfragen auf Grundlage der Nutzereinstellungen kombinieren, um ein leistungsstarkes responsives Designsystem zu erstellen. Hier finden Sie weitere Informationen zu Containerabfragen und zum neuen responsiven Design.

Dieser Artikel ist Teil einer Reihe, in der erläutert wird, wie E-Commerce-Unternehmen ihre Websites mit neuen CSS- und UI-Funktionen optimieren. Dieses Mal sehen wir uns an, wie einige Unternehmen Containerabfragen genutzt und davon profitiert haben.

redBus

redBus verwaltet und stellt für die mobile und die Desktopversion unterschiedliche Codes bereit. Nachdem sie Containerabfragen auf den Seiten Mögliche Aktivitäten und Fracht implementiert hatten, konnten sie diesen Code in einer einzigen Codebasis für diese Websites zusammenführen. Dadurch wurden sie responsiv und es konnte Entwicklungszeit gespart werden. Im folgenden Beispiel wird dies mithilfe der Frachtseite veranschaulicht:

Code

Im folgenden Beispiel ist .bpdpCardWrapper der übergeordnete Container mit dem Namen bpdpSection.

Wenn der Container bpdpSection eine Mindestbreite von 744 Pixeln hat, werden font-size und line-height für die von .bpdpCardContainer und .subTxt, .bpdpAddress ausgewählten Komponenten aktualisiert.

//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;
   }
}

Auswirkungen

Tokopedia

Die Produktdetailseiten (PDPs) von Tokopedia enthalten mehrere Tabs für den Shop und Produktinformationen. Bisher war das Layout dieser Seite in drei Spalten unterteilt und bei kleineren Bildschirmgrößen wurde der Produktname links manchmal abgeschnitten (siehe Video „Vorher“ unten).

Um dieses Layoutproblem zu lösen, hat das Team ganz einfach und schnell Containerabfragen eingeführt. Nach dieser Implementierung konnte ein flexibles Layout verwendet werden, bei dem der Produktname immer vollständig sichtbar war (siehe Video „Nachher“ unten).

Vorher

Nachher

Code

Mit dem folgenden Code wird die Größe des übergeordneten Containers mit dem Namen infowrapper abgefragt. Wenn die maximale Breite der infowrapper 360 Pixel beträgt, werden die width, margin, und padding der untergeordneten Komponenten angepasst.

Wenn Sie container-type auf inline-size festlegen, wird die Größe des übergeordneten Elements in der Ausrichtung „inline“ abgefragt. In lateinischen Sprachen wie Englisch wäre dies die Breite des übergeordneten Containers, da der Text inline von links nach rechts fließt.

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;
  }
`;

Was Sie bei der Verwendung von Containerabfragen beachten sollten

Tokopedia hat seinen Anwendungsfall gefunden, indem es nach Textellipsen auf seiner Website gesucht hat. Dies weist darauf hin, dass Container möglicherweise zu klein sind, sodass der Inhalt für den Nutzer abgeschnitten wird.

Ein weiterer guter Anwendungsfall für Containerabfragen für E-Commerce-Websites ist die Suche nach wiederverwendeten Komponenten. Beispielsweise kann die Schaltfläche In den Einkaufswagen je nach übergeordnetem Container unterschiedlich angezeigt werden (z. B. nur das Symbol, wenn es sich auf der Produktkarte befindet, und nur das Symbol mit Text, wenn es sich um einen primären CTA auf der Seite handelt). Die Schaltfläche könnte ein guter Kandidat für Containerabfragen sein.

Sie können Ihre Website schrittweise verbessern. Sie können beispielsweise mit kleineren Anwendungsfällen wie dem Ellipsenbeispiel von Tokopedia beginnen und dort Containerabfragen implementieren. Anschließend können Sie nach und nach mehr Fälle finden und die Preisvergleichsportal-Suche verbessern.

Ressourcen:

• Containerabfragen sind in stabilen Browsern verfügbar
• Containerabfragen im Browser entwerfen
• Demos zu Containerabfragen
• Demo: Karten für Containerabfragen
• Video: Neues in der Web-UI – I/O 2023
• Möchten Sie einen Fehler melden oder eine neue Funktion anfordern? Ihre Meinung ist uns wichtig.

In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von neuen CSS- und UI-Funktionen wie Scroll-gesteuerten Animationen, Popover, Containerabfragen und dem has()-Selektor profitiert haben.

• Warum sind Web-UI-Funktionen für Ihre E-Commerce-Website wichtig?
• Fallstudien zu scrollbasierten Animationen
• Fallstudien zu Transitions ansehen
• Fallstudien zu Popovers
• Fallstudien zur Auswahl:has()