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.

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.

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.

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.

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.

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 style inline-size;
}

.card {
    background: blue;
}

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

Bitte beachtet, dass der <main>-Befehl die Eigenschaft contain: layout style 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 style; 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.

Beispiel anschauen

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 style 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.

Geschrieben von Jonas

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigen – Jonas Hellwig bei Xing