CSS Academy · Lektion

@container-Regeln und Breakpoints

Schreiben Sie @container-Regeln, die Stile anwenden, sobald der Container bestimmte Abmessungen erreicht.

@container-Regeln und Breakpoints ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Syntax der @container-Regel

@container ist die At-Regel, die Stile anwendet, wenn ein Container bestimmte Größenbedingungen erfüllt. Ihre Syntax ähnelt der von Media Queries:

<div class="wrapper"><div class="box">Styled once container &ge; 400px wide</div></div>

Benannte Container Queries

Richten Sie die Abfrage auf einen bestimmten benannten Container:

<div class="sidebar">
  <div class="nav-item">Dashboard</div>
  <div class="nav-item">Settings</div>
</div>

Container Queries mit Max-width

Verwenden Sie max-width, um Stile für kleinere Container anzuwenden:

<div class="wrapper"><div class="card">Compact card at narrow widths</div></div>

Container-Queries mit Bereichsangaben

Die moderne Syntax für Container-Queries unterstützt Bereichsangaben:

<div class="wrapper"><div class="card"><span>Icon</span><span>Label</span></div></div>

Adaptive Kartenkomponente

Eine Kartenkomponente, die sich an die Breite ihres Containers anpasst:

<div class="card-wrapper">
  <div class="card">
    <div class="card__image"></div>
    <div class="card__body">Adaptive card content</div>
  </div>
</div>

Verschachtelte Container-Queries

Container-Queries können verschachtelt werden. Die innere Abfrage bezieht sich standardmäßig auf den nächsten Container-Vorfahren.

<div class="outer">
  <div class="inner">
    <div class="content">Nested container-aware content</div>
  </div>
</div>

Breakpoints für Container-Queries

Im Gegensatz zu Viewport-Breakpoints sollten Container-Breakpoints danach gewählt werden, wann sich das Layout der Komponente ändern muss, nicht nach willkürlichen Gerätegrößen. Beginnen Sie mit der minimalen und maximalen Inhaltsbreite der Komponente.

Typografie in Containern

Passen Sie die Typografie an kleine Container an:

<div class="wrapper">
  <h3 class="card-title">Adaptive Heading</h3>
  <p class="card-text">Body copy that hides on very narrow containers.</p>
</div>

Container-Query für Grid-Layout

Ändern Sie das interne Grid einer Komponente an Container-Breakpoints:

<div class="widget">
  <div class="widget-grid">
    <div>Tile 1</div>
    <div>Tile 2</div>
  </div>
</div>

Style-Queries (über Größen hinaus)

Container-Queries unterstützen außerdem Style-Queries, die berechnete Werte benutzerdefinierter Eigenschaften prüfen. Dadurch können von CSS-Variablen gesteuerte Komponentenvarianten ohne zusätzliche Klassen umgesetzt werden:

<div class="wrapper"><div class="card">Featured card styled via style query</div></div>

Kurzer Test

Was wird mit @container (min-width: 500px) angesprochen?

Zusammenfassung

@container-Regeln wenden Stile auf Elemente innerhalb eines Containers an, wenn der Container Größenbedingungen erfüllt. Verwenden Sie benannte Container, um bestimmte Vorfahren anzusprechen. Container-Breakpoints sollten sich nach den Anforderungen des Inhalts richten, nicht nach Gerätegrößen. Style-Queries erweitern Container-Queries um die Prüfung von CSS-Variablenwerten und ermöglichen dadurch leistungsfähige deklarative Komponentenvarianten.

Häufig gestellte Fragen

Ist die Lektion „@container-Regeln und Breakpoints“ kostenlos?

Ja — der vollständige Text von „@container-Regeln und Breakpoints“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „@container-Regeln und Breakpoints“?

Schreiben Sie @container-Regeln, die Stile anwenden, sobald der Container bestimmte Abmessungen erreicht. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „@container-Regeln und Breakpoints“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy