Fallstudien zu Containerabfragen

Swetha Gopalakrishnan

Saurabh Rajpal

Containerabfragen bieten einen äußerst dynamischen und flexiblen Ansatz für responsives Design. Für Containerabfragen wird die At-Rule @container verwendet. 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.

Containerabfragen reagieren auf die Containergröße und ermöglichen es Komponenten, sich an ihren Standort in einer Benutzeroberfläche anzupassen. 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. 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 optimiert haben. 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 anhand der Seite „Ladung“ 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 die font-size und line-height für die mit .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 einfach und schnell Containerabfragen eingeführt. Nach dieser Implementierung konnte ein flexibles Layout erstellt werden, bei dem der Produktname immer vollständig sichtbar war (siehe Video „Nachher“ unten).

Vorher

Nachher

Code

Im folgenden Code wird die Größe des übergeordneten Containers namens 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. Bei lateinischen Sprachen wie Englisch ist 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 auf Container hin, die möglicherweise zu klein sind, wodurch die Inhalte für den Nutzer abgeschnitten werden.

Ein weiterer guter Anwendungsfall für Containerabfragen für E-Commerce-Websites ist die Suche nach wiederverwendeten Komponenten. So kann die Schaltfläche In den Einkaufswagen je nach übergeordnetem Container unterschiedlich angezeigt werden, z. B. nur das Symbol, wenn sie sich auf der Produktkarte befindet, oder 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-Richtlinien verbessern.

Ressourcen:

• Containerabfragen werden in stabilen Browsern ausgeführt
• Containerabfragen – im Browser entwerfen
• Demos für Containerabfragen
• Demo: Karten für Containerabfragen
• Video: Neuigkeiten in der Web-Benutzeroberfläche – 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 scrollgesteuerten Animationen, Pop-ups, Containerabfragen und der has()-Auswahl profitiert haben.

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