kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

CSS Container Queries mit @container

Das Abfragen der Viewport-Größe ist mit Media Queries seit langem möglich und zentraler Bestandteil des Responsive Web Design. Allerdings haben sich in der Weiterentwicklung von RWD und in der parallelen Entwicklung hin zu modularen Layouts neue Anforderungen ergeben. Der Platz, den eine einzelne Komponente zur Verfügung hat, ist heute meist relevanter als die Breite des gesamten Browserfensters. Die Web-Community wünschte sich eine entsprechende Technologie und hat jahrelang an Übergangslösungen gearbeitet. Mit der CSS-Rule @container beginnt die Spezifikation einer nativen CSS-Technik.

Workshops & Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

Online-Schulungen (remote per Video)

Inhouse-Schulungen

Wann Media Queries an ihre Grenzen stoßen

Schauen wir uns das folgende Beispiel an: Das Layout beinhaltet eine typische Website-Komponente – die sog. Card – die aus Bildbereich und Inhalt besteht. Wenn die Card wenig Platz zur Verfügung hat, ist sie blau und das Bild soll über dem Inhalt stehen. Wenn mehr Raum verfügbar ist, soll das Bild nach links rutschen und die Card grün umgefärbt werden.

Das Beispiel Layout mit vier Layoutvarianten

Wenn wir das Projekt mobile First aufbauen, stellt die blaue Card das Standardverhalten dar. Um bei einer Viewportbreite von 500 Pixeln auf die grüne Card umzuschalten, schreiben wir einen Media Query. Leider müssen wir ab 800 Pixeln das Verhalten widerrufen oder den Code umständlich zusammenfassen. Spätestens wenn eine weitere Unterseite mit einem alternativem Layout hinzukommt, müssen wir Sonderregeln schreiben, obwohl die Card keinen neuen Zustand einnimmt.

Auf anderen Seiten soll die Card in der Desktop-Version blau sein und den Bildbereich über dem Text zeigen

Wie man sieht, soll die Card nun in der Desktopversion blau sein. Doch wenn wir die Optik des Elements mit einem Media Query anhand der Viewportbreite festlegen, werden die falschen Stile angewandt.

Fehldarstellung durch den Einsatz des Media Queries

Praktischer wäre eine Komponente die eigene Breakpoints besitzen kann – also beispielsweise auf den verfügbaren Raum im Elternelement (dem Container) reagiert. In unserem Beispiel hätte die Komponente »Card« dann zwei Zustände und einen Breakpoint bei 500px.

Die Card als Komponente mit eigenem Breakpoint

CSS Containment und die Funktionsweise von @container

Mit Container Queries kann ein eigener Breakpoint pro Komponente festgelegt werden. Die Komponente reagiert dann, wenn der Container eine bestimme Breite über- oder unterschreitet.

Das folgende Beispiel zeigt die grundlegende Syntax mit @container. Sobald die Card breiter als 500px wird, soll sie grün umgefärbt werden.

main {
    contain: layout inline-size;
}

.card {
    background: blue;
}

@container (min-width: 500px) {
  .card {
    background: green;
  }
}

Bitte beachtet, dass der <main>-Befehl die Eigenschaft contain: layout inline-size; erhalten hat. <main> ist in diesem Beispiel der Container, auf den reagiert werden soll.

Mit der CSS-Eigenschaft contain wird dem Browser mitgeteilt, in wiefern eine Komponente unabhängig vom Rest der Website ist. Das hilft dem Browser u.a. bei der schnelleren Darstellung des Layouts. Der Befehl contain: layout; ist  somit nicht neu, allerdings der Wert inline-size. Mit inline-size wird dem Browser mitgeteilt, dass die Komponente sich auf der Inline-Achse in der Größe verändern kann – also in der Breite. Es gibt auch block-size.

Damit das oben gezeigte Beispiel funktioniert, muss – Stand Frühjahr 2021 – in Chrome die Flag »Enable CSS Container Queries« aktiviert werden. Ruft dazu in Chrome die Adresse chrome://flags/ auf und aktiviert das entsprechende Feature.

Beispiele für Container Queries

Schauen wir uns den relevanten Teil des etwas umfangreicheren Beispiel von zuvor noch einmal an: Die einzelnen Cards werden mit folgendem Code gestaltet und ab einer Breite von 500 Pixeln verändert. Im Container Query überschreiben wir die Farb-Variable und weisen ein neues Flexbox-Layout zu.

.card-container {
  contain: layout inline-size;
}

.card {
  --color:#257989;
  --strokewidth: 2px;

  color: var(--color);
  border: var(--strokewidth) solid;
  margin: 1em 1em 2em;
}

.card-header {
  aspect-ratio: 20/9;
  background: var(--color);
}

.card-content {
  padding: 1em;
}

.card-btn {
  padding: .8em 1.2em;
  color: var(--color);
  border: var(--strokewidth) solid var(--color);
  background: none;
  font-size: 1em;
}

@container (min-width: 500px) {
  .card {
    --color: #8cb11c;
    display: flex;
  }

  .card-header {
    flex: 1 0 40%;
  }
}

Beispiel anschauen

 

Fazit

Auch wenn Container Queries zum aktuellen Zeitpunkt noch Zukunftsmusik sind, so ist es sehr erfreulich, dass die Entwicklung wieder an Fahrt aufnimmt. Ich bin ziemlich sicher, dass Container Queries – ähnlich wie seinerzeit Media Queries – die Art wie wir Weblayouts und Komponenten entwickeln grundlegend verändern wird.

Das Bedürfnis nach Lösungen dieser Art ist in jedem Fall sehr hoch – was auch Entwicklungen wie Intrinsic Design gezeigt haben.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.