Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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

thumb

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 anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →