Fallstudien zu Containerabfragen

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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.

Unterstützte Browser

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Quelle

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

Bild, das zeigt, wie verschiedene Arten von Styling zusammenwirken
web.dev – das neue Responsive.

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

Vorher (mehrere Codebases) Nach (einfache Codebasis)
Infrastruktur Separate Infrastruktur (hohe Kosten). Dieselbe Infrastruktur (geringere Kosten).
Design Separate Benutzeroberfläche, aber schlechte Konsistenz. Sie sind zwar schwierig zu lösen, aber möglich.
Leistung Einfach zu handhaben, da das System getrennt ist, aber die Bemühungen zur Leistungsverbesserung dupliziert. Dies ist seiten- und funktionsspezifisch, aber der PageSpeedInsights-Wert von redBus liegt über 80.
Entwicklung Trennen Sie Entwicklerteams. Zeitersparnis von 30 % bis 40 %.

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

Vor der Implementierung von Containerabfragen werden die Wörter „ISKU 10 in 1 Obeng satu..“ links oben bei kleineren Bildschirmgrößen abgeschnitten.

Nachher

Durch die Implementierung von Containerabfragen wird das Layout so angepasst, dass der Text im Darstellungsbereich bleibt.

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:

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.