Container Queries und CSS-Nesting

Mach deine Komponenten responsiv gegenüber ihrem Container statt gegenüber dem Viewport und strukturiere deine Stylesheets mit nativem Nesting.

10 Min. · 3 Fragen

Media Queries messen den Viewport: Eine Karte, die sowohl in einer schmalen Sidebar als auch in einem Haupt-Grid angezeigt wird, kann sich mit ihnen nicht korrekt anpassen, weil dieselbe Bildschirmbreite zwei verschiedenen Kontexten entspricht. Container Queries lösen diese Entkopplung: Die Komponente fragt die Größe ihres Containers ab. Voraussetzung: Bestimme einen Container ausdrücklich mit container-type (inline-size, um nur die horizontale Achse zu messen, der häufige Fall), optional benannt über container-name.

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

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
}

Container-Einheiten vervollständigen das Bild: 1cqi entspricht 1 % der Inline-Größe des abgefragten Containers (cqw, cqh, cqb, cqmin, cqmax gibt es ebenfalls). Kombiniert mit clamp() erzeugen sie flüssige Typografie pro Komponente: Dieselbe Karte erhält einen Titel, der zu ihrer Spalte passt, wo immer sie platziert wird.

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

.card h2 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

@container (max-width: 300px) {
  .card .meta {
    display: none;
  }
}

Natives Nesting bringt endlich Verschachtelung ohne Präprozessor. Der &-Selektor verweist auf den Elternkontext; Media Queries und @container verschachteln sich direkt innerhalb einer Regel. Ein entscheidender Unterschied zu Sass: Das verschachtelte Elternelement wird so behandelt, als wäre es in :is() gehüllt. Zwei Folgen: Die Spezifität des Elternteils ist die des stärksten seiner Selektoren, wenn es eine Liste ist, und & .child führt keine String-Verkettung durch - das Sass-Muster &__element zum Erzeugen von BEM-Namen existiert nativ nicht.

.menu {
  display: flex;
  gap: 8px;

  & > li {
    list-style: none;

    &:hover {
      background: #f3f4f6;
    }
  }

  @media (min-width: 768px) {
    gap: 16px;
  }
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Warum ist eine Container Query für eine wiederverwendbare Karte einer Media Query vorzuziehen?
   • Die Rendering-Engine kann sie schneller auswerten
   • Sie reagiert auf die Größe des Containers der Karte, die auf jedem Bildschirm gleich ist, auf dem die Spalte schmal ist
   • Sie funktioniert, ohne dass eine CSS-Voraussetzung deklariert werden muss
   • Sie kann zusätzlich zur Breite auch die Höhe des Viewports abfragen
2. Wofür steht 5cqi?
   • 5 % der Viewport-Breite
   • 5 % der Inline-Größe des abgefragten Containers
   • Das Fünffache der Schriftgröße des Containers
3. Worin unterscheidet sich natives Nesting von Sass-Nesting?
   • Natives Nesting verbietet das Verschachteln von Media Queries innerhalb einer Regel
   • Natives Nesting behandelt das Elternelement, als wäre es in :is() gehüllt, und erlaubt keine Verkettung im Stil von &__element
   • Natives Nesting benötigt einen Präprozessor, um das &-Symbol zu kompilieren
   • Natives Nesting beschränkt die Verschachtelung auf eine einzige Ebene