Containerabfragen
bieten einen hochdynamischen und flexiblen Ansatz für responsives
Design. Sie verwenden die @container-Regel. Das funktioniert ähnlich wie eine Media Query mit @media. Statt Viewport und User-Agent wird jedoch @container ein übergeordneter
Container nach Stylinginformationen abgefragt.
Durch die Reaktion auf die Containergröße ermöglichen Containerabfragen, dass sich Komponenten an ihre Position in einer Benutzeroberfläche anpassen. Eine Kartenkomponente kann beispielsweise ihre Größe und Stile an den Container anpassen, in dem sie platziert ist, sei es eine Seitenleiste, ein Hero-Bereich oder ein Raster im Hauptteil einer Seite.
Wie in der folgenden Abbildung gezeigt, können Sie Media Queries für Makro-Layouts und Containerabfragen für Mikro-Layouts mit Media Queries basierend auf Nutzerpräferenzen kombinieren, um ein leistungsstarkes responsives Designsystem zu erstellen. Weitere Informationen zu Containerabfragen und dem neuen responsiven Design
Dieser Artikel ist Teil einer Reihe, in der beschrieben wird, wie E-Commerce-Unternehmen ihre Websites mit neuen CSS- und UI-Funktionen verbessert haben. Dieses Mal sehen wir uns an, wie einige Unternehmen Containerabfragen verwendet und davon profitiert haben.
redBus
redBus verwaltet und stellt unterschiedlichen Code für die mobile und die Desktopversion bereit. Nach der Implementierung von Containerabfragen auf den Things-to-do und Cargo Seiten konnte das Unternehmen diesen Code in einer einzigen Codebasis für diese Websites zusammenführen. Dadurch wurden die Websites responsiv und die Entwicklungszeit wurde verkürzt. Das folgende Beispiel veranschaulicht dies anhand der Seite „Cargo“:
Code
Im folgenden Beispiel ist .bpdpCardWrapper der übergeordnete Container mit dem Namen bpdpSection.
Wenn der Container bpdpSection eine Mindestbreite von 744 Pixel hat, werden die font-size und line-height für die Komponenten aktualisiert, die von .bpdpCardContainer und .subTxt, .bpdpAddress ausgewählt wurden.
//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 Codebasen) | Nachher (eine Codebasis) | |
|---|---|---|
| Infrastruktur | Separate Infrastruktur (hohe Kosten) | Gleiche Infrastruktur (geringere Kosten) |
| Design | Separate UI, aber schlechte Konsistenz | Schwierig zu lösen, aber möglich |
| Leistung | Einfach zu handhaben, da das System separat ist, aber der Aufwand zur Leistungsverbesserung wird verdoppelt | Dies ist seiten- und funktionsspezifisch, aber der redBus PageSpeedInsights-Wert liegt über 80. |
| Entwicklung | Separate Entwicklerteams | 30–40 % weniger Zeitaufwand |
Tokopedia
Die Produktdetailseiten von Tokopedia enthalten mehrere Tabs für die Shop- und Produktinformationen. Bisher war das Layout dieser Seite in drei Spalten unterteilt und bei kleineren Bildschirmgrößen wurde der Produktname auf der linken Seite manchmal abgeschnitten (siehe das folgende Video „Vorher“).
Um dieses Layoutproblem zu beheben, hat das Unternehmen Containerabfragen einfach und schnell eingeführt. Nach der Implementierung konnte ein flexibles Layout verwendet werden, bei dem der Produktname immer vollständig sichtbar war (siehe das folgende Video „Nachher“).
Vorher
Nachher
Code
Der folgende Code fragt die Größe des übergeordneten Containers infowrapper ab.
Wenn die maximale Breite von infowrapper 360 Pixel beträgt, werden die
width, margin, und padding der untergeordneten Komponenten angepasst.
Wenn Sie container-type auf inline-size setzen, wird die Größe des übergeordneten Elements in Inline-Richtung abgefragt. In lateinischen Sprachen wie Deutsch wäre das die Breite des übergeordneten Containers, da der Text 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;
}
`;
Überlegungen bei der Verwendung von Containerabfragen
Tokopedia hat seinen Anwendungsfall gefunden, indem das Unternehmen auf seiner Website nach Textauslassungen gesucht hat. Diese wiesen auf Container hin, die möglicherweise zu klein sind, wodurch 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. Die Schaltfläche In den Warenkorb wird beispielsweise je nach übergeordnetem Container unterschiedlich angezeigt (z. B. nur das Symbol, wenn sie sich auf der Produktkarte befindet, und das Symbol mit Text, wenn sie ein primärer CTA auf der Seite ist). Die Schaltfläche könnte ein guter Kandidat für Containerabfragen sein.
Sie können Ihre Website schrittweise verbessern. Sie könnten beispielsweise mit kleineren Anwendungsfällen wie dem Auslassungsbeispiel von Tokopedia beginnen und dort Containerabfragen implementieren. Suchen Sie dann nach und nach nach weiteren Anwendungsfällen und verbessern Sie das CSS.
Ressourcen:
- Containerabfragen in stabilen Browsern
- Containerabfragen – Design im Browser
- Containerabfrage-Demos
- Demo: Containerabfragekarten
- Video: What's new in Web UI - I/O 2023
- Möchten Sie einen Fehler melden oder eine neue Funktion anfordern? Wir freuen uns auf Ihr Feedback.
In den anderen Artikeln dieser Reihe erfahren Sie, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie scrollgesteuerte Animationen, Popover, Containerabfragen und dem Selektor has() profitiert haben.