Diese Seite wurde von der Cloud Translation API übersetzt.

Fallstudien zu Containerabfragen

Swetha Gopalakrishnan

Saurabh Rajpal

Containerabfragen bieten einen hochdynamischen und flexiblen Ansatz Design. Containerabfragen verwenden die @-Regel @container. Das funktioniert ähnlich wie zu einer Medienabfrage mit @media, aber @container fragt stattdessen eine übergeordnete Container für Stilinformationen anstelle des Darstellungsbereichs und des User-Agents.

Containerabfragen sind Teil von Baseline Newly available.

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Durch die Reaktion auf die Containergröße ermöglichen Containerabfragen die Anpassung der Komponenten in einer Benutzeroberfläche anzuzeigen. Eine Kartenkomponente kann beispielsweise je nach Container, in dem es platziert ist, sei es die Seitenleiste, oder ein Raster im Hauptteil einer Seite.

Wie in der folgenden Abbildung dargestellt, können Sie Medienabfragen für Makro Layouts, Containerabfragen für Mikrolayouts mit auf Nutzereinstellungen basierenden Medien Abfragen erstellen, um ein leistungsfähiges responsives Designsystem zu erstellen. Gelesen Weitere Informationen zu Containerabfragen responsiven Designs.

Bild, das zeigt, wie verschiedene Arten von Stilen zusammenwirken. — web.dev – das neue responsive Webdesign

Dieser Artikel ist Teil einer Reihe, in der es darum geht, wie E-Commerce-Unternehmen ihre Websites mit neuen CSS- und UI-Funktionen optimiert. Diesmal geht es um wie einige Unternehmen Containerabfragen nutzen und davon profitieren.

redBus

redBus verwaltet und stellt für seine mobilen und Desktop-Versionen unterschiedlichen Code bereit. Nach der Implementierung von Containerabfragen Mögliche Aktivitäten und cargo-Seiten haben, konnten sie diesen Code in einer einzigen Codebasis für diese Websites zu bündeln. Dadurch wurden sie responsiv und der Entwicklungszeit. 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, wird der font-size und line-height für die von .bpdpCardContainer ausgewählten Komponenten. .subTxt, .bpdpAddress wurde 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)	Nachher (einzelne Codebasis)
Infrastruktur	Separate Infrastruktur (hohe Kosten).	Gleiche Infrastruktur (geringere Kosten).
Design	Separate Benutzeroberfläche, aber schlechte Konsistenz	Es ist schwierig zu lösen, aber möglich.
Leistung	Einfach zu handhaben, da das System getrennt ist, aber der Aufwand für die Leistungsverbesserung doppelt vorhanden ist.	Dies ist seiten- und funktionsspezifisch, aber der redBus-PageSpeedInsights-Wert liegt über 80.
Entwicklung	Separate Entwicklerteams	30 bis 40 % weniger Zeitaufwand.

Tokopedia

Die Produktdetailseiten (Product Detail Pages, PDP) von Tokopedia enthalten mehrere Registerkarten für den Shop und Produktinformationen. Bisher war das Layout dieser Seite in drei Spalten. Manchmal wurde der Produktname auf der linken Seite für kleinere Bildschirmgrößen (siehe folgendes Vorher-Video).

Um dieses Layoutproblem zu lösen, wurden einfach und schnell Containerabfragen übernommen. Nach dieser Implementierung verfügte das Team über ein flexibles Layout, Produktname war immer vollständig sichtbar (siehe folgendes „Nachher“-Video).

Vorher

</ph> <ph type="x-smartling-placeholder">

Vor der Implementierung von Containerabfragen wurde Satu...“ oben links bei kleineren Bildschirmen abgeschnitten.

Nachher

</ph> <ph type="x-smartling-placeholder">

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

Code

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

Wenn Sie für container-type den Wert inline-size festlegen, wird die Größe der Inline-Richtung abgefragt. des übergeordneten Elements. In lateinischen Sprachen wie Englisch entspricht dies der Breite des übergeordneter Container, 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 Containerabfragen zu beachtende Punkte

Tokopedia ermittelte seinen Anwendungsfall anhand von Auslassungspunkten auf der Website. Dies weist darauf hin, dass Container möglicherweise zu klein sind, wodurch der Inhalt ausgeschnitten wird. für den Nutzer deaktiviert.

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

Sie haben die Möglichkeit, inkrementelle Verbesserungen an Ihrer Website vorzunehmen. Zum Beispiel haben Sie mit kleineren Anwendungsfällen wie dem Ellipsen-Beispiel von Tokopedia beginnen. dort Containerabfragen implementieren. Suchen Sie dann nach und nach weitere Fälle das CSS zu verbessern.

Ressourcen:

Containerabfragen sind in stabilen Browsern verfügbar
Containerabfragen im Browser entwerfen
Demos zu Containerabfragen
Demo: Container-Abfragekarten
Video: Neues in 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 es um E-Commerce geht. Unternehmen profitierten von neuen CSS- und UI-Funktionen wie Scroll-orientierte Animationen, Pop-over, Containerabfragen und der has()-Selektor.