Container Queries

Container Queries vs Media Queries

Container Queries ähneln Media Queries, aber sind flexibler, vor allem bei wiederverwendbaren Komponenten in komplexen Layouts. Es gibt zahlreiche Stilelemente, die in unterschiedlichen Umgebungen auftauchen können: z.B. Produktkarten (cards), die im Hauptbereich der Seite, in Sidebars und auf der Produktseite verwendet werden.

• Media Queries (@media) steuern das Layout und Stile basierend auf der Viewport-Größe (also je nach Breite des Browserfensters).
• Container Queries (@container) reagieren auf die Größe des übergeordneten Containers, nicht auf den gesamten Viewport.

Ein Beispiel sind die Auszüge von Blogposts, die in einer Sidebar oder in einem Grid-Layout platziert werden. Auch die Anordnung von Blog-Beiträgen im Raster der Startseite vs Sidebar fällt in diese Kategorie. Meist zeigt das Layout bei schmalen Viewports Karten und auch ihre Inhalte zeilenweise untereinander, und erst bei breiteren Viewpoints werden zwei oder mehr Karten nebeneinander gesetzt.

Bis zwei oder mehr Karten oder Blog-Teaser nebeneinander erscheinen, werden Bilder übergroß: dann ist es effizienter, auch die Inhalte von Karten nebeneinander zu setzen.

Grid – z.B. breiter Bereich der Landing Page

CSS Grid und Subgrid – Zeilen gleicher Höhe

Mit CSS flex und grid ist ein solider Spaltensatz eingezogen. Aber erst jetzt haben flex und grid endlich eine einfache Lösung für ein tägliches Problem: In zwei, drei oder mehr Spalten bilden Überschriften, Texte und Bilder ein Raster.

<div class="post-wrapper">
	<div class="post">
		<header class="post-header">
			<h2 class="post-title">
				<a href="/css-grid-und-subgrid/">CSS Grid und Subgrid – Zeilen gleicher Höhe</a>
			</h2>
		</header>
		<div class="postsvg">
			<a href="/css-grid-und-subgrid/"> <img src="/wp-content/uploads/2022/09/css-grid-und-subgrid.svg" width="966" height="444" alt="CSS subgrad Spalten mit Zeilen gleicher Höhe"> </a> 
		</div>
		<div class="postexcerpt">
			<p>Mit CSS flex und grid ist ein solider Spaltensatz eingezogen. Aber erst jetzt haben flex und grid endlich eine einfache Lösung für ein tägliches Problem: In zwei, drei oder mehr Spalten bilden Überschriften, Texte und Bilder ein Raster.</p>
		</div>
	</div>
</div>
			

Die wichtigsten Regeln und Konzepte für Container Queries

1. Ein Container muss explizit mit container-type definiert werden:

   /* Container definieren */
   .post-wrapper {
   	container-type: inline-size;
   	/* oder: container-type: size, wenn auch die Höhe relevant ist */
   	padding: 1rem;
   	width: 100%;
   	max-width: 920px;
   	background: gainsboro;
   }
   

   Ein zusätzlicher Wrapper ist eigentlich nicht nötig, solange container-type auf einem Vorfahren gesetzt ist.
   inline-size misst die Breite (in Schreibrichtung, also meist horizontal). Container Queries messen nur die Größe des nächsten enthaltenen Containers – nicht des Viewports!
2. Zusätzlich kann container-name gesetzt werden, um gezielt auf den Container zuzugreifen:

   .post-wrapper {
   	container-type: inline-size;
   	container-name: post;
   }
   

3. Die Container Query ähnelte einer @media-Query:

   /* Wenn der Container breiter als 400px ist */
   @container (min-width: 401px) {
   	.post {
   		display: grid;
   		grid-template-areas: "header header"
   						     "image excerpt";
   		grid-template-columns: 1fr 1fr;
   		gap: 1rem
   	}
   }
   

   oder mit einem Namen

   @container post (min-width: 400px) {
    …
   }
   

4. Container Queries wirkt nur auf Elemente innerhalb des definierten Containers.

Cards

Das Layout für Produkt-Karten und ebenso für die Auszüge von Blog-Beiträgen setzt Karten / Auszüge untereinander, bis der Platz auf einem größeren Monitor reicht, um zwei oder mehr Karten nebeneinander zu setzen.

Wenn diese Layout-Elemente nicht nur im Hauptbereich der Seite sitzen, sondern auch in Seitenleisten oder Fußleisten erscheinen, kommen ebenfalls Container-Queries zum Zuge.

.content, 
.sidebar {
	min-width: 120px;
	container-type: inline-size;
	container-name: cards;
}

/* Ab 520px: 2 Spalten */
@container cards (min-width: 520px) {
	.card-grid {
		display: flex;
		flex-wrap: wrap;
	}

	.card {
		flex: 1 1 calc(50% - 1rem);
	}
}

/* Ab 920px: 4 Spalten */
@container cards (min-width: 920px) {
	.card {
		flex: 1 1 calc(25% - 1rem);
	}
}

Die wichtigsten Regeln und Eigenschaft zu Container Queries

Können Container Queries in <img>-Tags für sizes eingesetzt werden?

Allerdings gibt es Bereiche, in denen @media nicht durch @container ersetzt werden kann: srcset und sizes im <img>-Tag.

 
<figure>
<img srcset="img/bild_420x286.jpg 420w,
             img/bild_920x627.jpg 920w"
     sizes="container(max-width: 600px) 420px,
            920px"
     src="img/bild_920x627.jpg"
     alt="Bildgröße anhand einer Container-Query anstelle einer Media-Query bestimmen">
</figure>

420w und 920w sind die Breitenangaben, die sich auf die Breite des Browserfensters beziehen. Das sizes-Attribut im <img>-Tag ist reines HTML und wird bereits beim Parsen des Dokuments verarbeitet – bevor CSS Container Queries überhaupt greifen. Für das sizes-Attribut von <img>-Tags ist eine container-Angabe noch nicht möglich.

Diese Webseite setzt z.B. Bilder mit einer maximalen Breite von 920px ein, aber bei einer Fenstergröße von mehr als 1400px kann ein Bild über zwei Spalten gesetzt werden. In einem »normalen« Container hat ein Bild also max. 920px Breite zur Verfügung, aber das Layout bietet auch einen Container mit bis zu 1440px Breite.

Für das überbreite Bild muss ein eigenes img-Tag herhalten.

<!-- Container max. 920px -->
<img
  src="bild-800.jpg"
  srcset="bild-400.jpg 400w,
    bild-800.jpg 800w,
    bild-1200.jpg 1200w,
    bild-1440.jpg 1440w"
  sizes="(max-width: 920px) 100vw, 880px"
  alt="Bild im schmalen Container">

<!-- Container max. 1440px -->
<img
  src="bild-1200.jpg"
  srcset="bild-400.jpg 400w,
    bild-800.jpg 800w,
    bild-1200.jpg 1200w,
    bild-1440.jpg 1440w"
  sizes="(max-width: 920px) 100vw, 
         (min-width: 1560px) 1440px, 100vw"
  alt="Bild im großen Bereich">

Werden Container Queries die klassischen Media Queries ersetzen?

Immerhin sind Media Queries über 12 Jahre alt, und selbst einfache Internet-Auftritte profitieren von wiederverwendbaren Komponenten. Es ist absehbar, dass @container immer häufiger @media-Abfragen ersetzen wird.