Containerabfragen bieten einen hochdynamischen und flexiblen Ansatz für responsives Webdesign. Containerabfragen verwenden die At-Regel @container. Das funktioniert ähnlich wie eine Medienabfrage mit @media, allerdings fragt @container stattdessen einen übergeordneten Container nach Stilinformationen ab, nicht den Darstellungsbereich und den User-Agent.
-Containerabfragen sind Teil der neuen Referenzversion.
Durch die Reaktion auf die Containergröße können sich Komponenten bei Containerabfragen an ihre Position in einer Schnittstelle anpassen. Beispielsweise kann eine Kartenkomponente ihre Größe und ihren Stil an den Container anpassen, in dem sie platziert ist, d. h. eine Seitenleiste, ein Hero-Abschnitt oder ein Raster im Hauptteil einer Seite.
Wie in der folgenden Abbildung dargestellt, können Sie Medienabfragen für Makrolayouts, Containerabfragen für Mikrolayouts mit Medienabfragen, die auf Nutzerpräferenzen basieren, kombinieren, um ein leistungsstarkes responsives Designsystem zu erstellen. Lesen 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 mithilfe neuer CSS- und UI-Funktionen optimieren. Dieses Mal sehen wir uns an, wie einige Unternehmen Containerabfragen genutzt haben und von diesen profitieren.
redBus
redBus verwaltet unterschiedlichen Code für die mobile und die Desktopversion von redBus. Nachdem das Unternehmen Containerabfragen auf den Seiten Mögliche Aktivitäten und Cargo implementiert hatte, konnte es diesen Code in einer einzigen Codebasis für diese Websites vereinheitlichen. So war das Team reaktionsschnell und Entwicklungszeit wurde eingespart. Das folgende Beispiel veranschaulicht dies anhand der Cargo-Seite:
Code
Im folgenden Beispiel ist .bpdpCardWrapper der übergeordnete Container bpdpSection.
Wenn der Container bpdpSection eine Mindestbreite von 744 Pixeln hat, werden font-size und line-height für die durch .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 Codebasis) | Nach (einzelne Codebasis) | |
|---|---|---|
| Infrastruktur | Separate Infrastruktur (hohe Kosten) | Dieselbe Infrastruktur (geringere Kosten). |
| Design | Separate Benutzeroberfläche, aber schlechte Konsistenz. | Schwierig, aber möglich. |
| Leistung | Einfach zu handhaben, da das System getrennt ist, aber der Aufwand zur Leistungsverbesserung wiederholt. | Dies ist seiten- und funktionsspezifisch, aber die PageSpeedInsights-Punktzahl von redBus liegt über 80. |
| Entwicklung | Separate Entwicklerteams | 30–40 % kürzerer Zeitaufwand |
Tokopedia
Die Produktdetailseiten (Product Detail Pages, PDP) von Tokopedia enthalten mehrere Tabs mit Shop- und Produktinformationen. Bisher war das Layout dieser Seite in drei Spalten unterteilt. Manchmal wurde der Produktname auf der linken Seite bei kleineren Bildschirmgrößen abgeschnitten (siehe Video „Vorher“).
Um dieses Layoutproblem zu lösen, wurden schnell und einfach Containerabfragen eingeführt. Nach dieser Implementierung konnten sie ein flexibles Layout haben, bei dem der Produktname immer vollständig sichtbar war (siehe Video „Nachher“).
Vorher
Nachher
Code
Mit dem folgenden Code wird die Größe des übergeordneten Containers infowrapper abgefragt.
Wenn die maximale Breite des infowrapper 360 Pixel beträgt, werden width, margin, und padding der untergeordneten Komponenten angepasst.
Wenn Sie für container-type den Wert inline-size festlegen, wird die Größe der Inline-Richtung des übergeordneten Elements abgefragt. In lateinamerikanischen 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;
}
`;
Bei der Verwendung von Containerabfragen zu beachtende Punkte
Tokopedia fand seinen Anwendungsfall durch Auslassungspunkte auf der Website. Dies weist 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. Beispielsweise kann die Schaltfläche In den Einkaufswagen je nach übergeordnetem Container unterschiedlich dargestellt werden (z. B. nur das Symbol in der Produktkarte 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 Ellipsen-Beispiel von Tokopedia beginnen und dort Containerabfragen implementieren. Suchen Sie dann nach und nach weitere Fälle und verbessern Sie das CSS.
Weitere Informationen:
- Containerabfragen werden in stabilen Browsern landen
- Containerabfragen im Browser entwerfen
- Demos für Containerabfragen
- Demo: Container-Abfragekarten
- Video: Neues bei der Web-UI – I/O 2023
- Möchtest du einen Fehler melden oder eine neue Funktion vorschlagen? Ihre Meinung ist uns wichtig.
Lesen Sie die anderen Artikel dieser Reihe, in denen beschrieben wird, wie E-Commerce-Unternehmen von der Verwendung neuer CSS- und UI-Funktionen wie Scroll-Animationen, Pop-over-Animationen, Container-Abfragen und dem has()-Selektor profitiert haben.