Container Queries

Container Queries erlauben es, Styles abhängig von der Grösse eines übergeordneten Containers zu definieren – statt von der Grösse des Viewports wie bei Media Queries. Dadurch werden Komponenten unabhängig von ihrem Einsatzort und besser wiederverwendbar.

---

Eigenschaften

• container-typeDefiniert ein Element als Container
• @containerDefiniert Regeln, die auf die Grösse eines Containers reagieren
• container-nameVergibt einen Namen für den Container
• containerKurzschreibweise für container-name und container-type

---

container-type

Damit ein Element als Container funktioniert, braucht es container-type. Am häufigsten wird inline-size verwendet. Damit reagiert die Query auf die Breite des Containers.

• inline-sizeReagiert auf die Breite des Containers
• sizeReagiert auf Breite und Höhe
• normalStandardwert – kein Grössencontainer, aber Style Queries sind möglich

Praxis: In den meisten Fällen wird container-type: inline-size; verwendet. normal ist der Standardwert und erstellt keinen Grössencontainer. size wird nur benötigt, wenn die Query sowohl auf Breite als auch auf Höhe reagieren soll.

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

Hinweis: size braucht eine definierte Grösse in beide Richtungen. Für responsive Komponenten ist inline-size meistens die passende Wahl.

---

@container

Ein Element wird zuerst als Container definiert. Danach können Elemente im Inneren auf die Grösse dieses Containers reagieren.

@container sucht automatisch den nächstgelegenen Vorfahren, der mit container-type als Container definiert wurde.

.wrapper ist der Container. .card liegt im Container und verändert ihre Darstellung, wenn der Container breit genug ist.

.wrapper {
  container-type: inline-size; /* definiert den Container */
  border: 2px solid indigo;
}

@container (min-width: 500px) {
  .card { /* Element innerhalb des Containers */
    background: lightpink;
  }
}

---

Component-Driven Design

Container Queries eignen sich besonders für Komponenten, die an unterschiedlichen Stellen einer Website eingesetzt werden. Beim Component-Driven Design werden Benutzeroberflächen aus unabhängigen, wiederverwendbaren Komponenten aufgebaut. Mit Container Queries reagiert eine Komponente auf den Platz, der ihr zur Verfügung steht – unabhängig von ihrem Einsatzort und ohne zusätzliche Klassen für den jeweiligen Kontext.

Auf demselben Bildschirm sehen drei identische Karten unterschiedlich aus – allein weil ihre Container unterschiedlich breit sind. Wird der Viewport schmaler, durchläuft die obere Karte dieselben Zustände.

Media Queries und Container Queries übernehmen in diesem Beispiel unterschiedliche Aufgaben.

• Media Query: Sie entscheidet, ob die beiden unteren Container untereinander oder nebeneinander stehen.
• Container Query: Sie entscheidet, wie die Karte in ihrem verfügbaren Platz dargestellt wird.

Drei Container – eine Komponente

<div class="card-container">
  <article class="card">
    <div class="card-shape"></div>
    <div>
      <strong>SAME CARD</strong>
      <span>Gleiches HTML. Gleiche Klasse.</span>
    </div>
  </article>
</div>

Layout der Container

.card-row {
  display: grid;
  gap: 12px;
}

@media (min-width: 700px) {
  .card-row {
    grid-template-columns: 1.6fr 1fr;
  }
}

Layout der Komponente

.card-container {
  container-type: inline-size;
}

.card {
  display: grid;
  height: 100%;
  background: deeppink;
  text-align: center;
}

@container (min-width: 320px) {
  .card {
    grid-template-columns: 90px 1fr;
    background: indigo;
    text-align: left;
  }
}

@container (min-width: 520px) {
  .card {
    grid-template-columns: 1fr 2fr;
    background: orangered;
  }
}

Die Karte benötigt keine zusätzlichen Klassen wie .card--small, .card--medium oder .card--large. Ihr Layout richtet sich allein nach der Breite ihres Containers. So bleibt die Komponente unabhängig von ihrem Einsatzort wiederverwendbar.

---

container-name

In den meisten Fällen braucht ein Container keinen Namen. @container sucht automatisch den nächstgelegenen übergeordneten Container mit container-type.

Ein container-name wird nur benötigt, wenn mehrere Container verschachtelt sind und eine Regel gezielt auf einen bestimmten Container reagieren soll.

.layout {
  container-type: inline-size;
  container-name: layout;
}

@container layout (min-width: 350px) {
  .box {
    background: hotpink;
  }
}

layout ist kein Klassenname und keine ID. Es ist ein frei gewählter CSS-Name, der nur in container-name und @container layout verwendet wird.

---

Kurzschreibweise container

Die Eigenschaft container kombiniert container-name und container-type.

.layout {
  container: layout / inline-size;
}

Das ist die Kurzschreibweise für:

.layout {
  container-name: layout;
  container-type: inline-size;
}

---

Container Query Units

Container Query Units sind Einheiten, die sich auf die Grösse eines Containers beziehen. Sie funktionieren ähnlich wie vw und vh, aber nicht relativ zum Viewport, sondern relativ zum Container.

• cqw1% der Container-Breite
• cqh1% der Container-Höhe
• cqi1% der Inline-Grösse
• cqb1% der Block-Grösse
• cqmin1% der kleineren Container-Dimension
• cqmax1% der grösseren Container-Dimension

Fluid Text mit cqi

Ziehe den Container an der rechten Kante, um seine Breite zu verändern.

<div class="wrapper">
  <h2 class="title">Fluid Text</h2>
</div>

.wrapper ist der Container. .title liegt im Container und verwendet cqi. Die Einheit wird also auf ein Element im Container angewendet, nicht auf den Container selbst.

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

.title {
  font-size: 5cqi;
}

Layout und Schrift reagieren auf den Container

Beide Poster sind identisch. Verschiebe die Trennlinie, um die Breite der Container zu verändern.

Mit @container wechselt das Layout. Mit cqw skaliert zusätzlich die Schrift mit der Breite des Containers.

.poster-container {
  container-type: inline-size;
}

.poster strong {
  font-size: 14cqw;
}

@container (min-width: 300px) {
  .poster {
    grid-template-columns: 1fr 1.5fr;
  }
}

.poster-container ist der Container. Die Schrift und das Layout werden auf Elemente innerhalb dieses Containers angewendet.

---

Logische Operatoren

Wie bei Media Queries können Bedingungen kombiniert werden.

CSS

/* AND – beide Bedingungen müssen zutreffen */
@container (min-width: 400px) and (max-width: 800px) {
  .card {
    background: pink;
  }
}

/* OR – eine Bedingung reicht */
@container (max-width: 300px) or (min-width: 600px) {
  .card {
    font-size: 0.8rem;
  }
}

/* NOT – Bedingung darf nicht zutreffen */
@container not (min-width: 400px) {
  .card {
    display: block;
  }
}

---

Kurz gesagt

• Container Queries reagieren auf einen Container, nicht auf den Viewport
• Ein übergeordnetes Element wird mit container-type als Container definiert
• @container definiert Regeln für Elemente innerhalb des Containers
• Komponenten passen sich unabhängig von ihrem Einsatzort an den verfügbaren Platz an
• container-name ist optional und wird nur gebraucht, wenn ein Container gezielt angesprochen werden soll
• container ist die Kurzschreibweise für container-name und container-type
• Container Query Units wie cqi oder cqw beziehen sich auf die Grösse des Containers

---

Verwandte Themen

• Media Queries – Layouts abhängig von der Grösse des Viewports gestalten.
• CSS Grid – responsive Layouts in Zeilen und Spalten aufbauen.
• Flexbox – Elemente und Komponenten flexibel anordnen.

---