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.

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.

</ph>

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

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

Nachher

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.

• Warum sind Funktionen der Weboberfläche für Ihre E-Commerce-Website wichtig?
• Fallstudien zu scrollbaren Animationen
• Fallstudien zu Übergängen ansehen
• Fallstudien zu Popovers
• Fallstudien zur Auswahl von:has()