CSS Academy · Lektion

container-type und container-name

Definieren Sie Container für Container Queries mit container-type und vergeben Sie mit container-name Namen.

container-type und container-name ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was sind Container Queries?

Mit Container Queries kann CSS Stile anhand der Größe eines übergeordneten Containers anstelle des Viewports anwenden. Dadurch wird ein wirklich komponentenbasiertes responsives Design möglich, bei dem sich eine Komponente an den jeweiligen Ort anpasst.

Welches Problem lösen Container Queries?

Bei Media Queries kann eine Kartenkomponente in einer 300px breiten Seitenleiste nicht erkennen, dass sie klein ist – sie kennt nur die große Breite des Viewports. Container Queries ermöglichen es der Komponente, auf die Größe ihres eigenen Containers statt auf den globalen Viewport zu reagieren.

container-type

Damit Sie einen Container abfragen können, deklarieren Sie ihn zunächst mit container-type als Query-Container:

<div class="card-wrapper">This wrapper can now be queried for its own width via @container.</div>

Werte von container-type

Verfügbare Werte:

inline-size – aktiviert Abfragen für die Inline-Dimension des Containers (die Breite bei horizontaler Schreibrichtung)
size – aktiviert Abfragen für die Inline- und Blockdimension (Breite und Höhe)
normal – Standardwert; keine Größenabfragen, aber weiterhin mögliche Style Queries

container-name

Geben Sie einem Container einen Namen, um in Abfragen auf ihn zu verweisen. Das ist erforderlich, wenn verschachtelte Container vorhanden sind und Sie einen bestimmten übergeordneten Container abfragen möchten:

<div class="sidebar">Named container: "sidebar"</div>

Kurzschreibweise für container

Mit der Kurzschreibweise container legen Sie sowohl den Namen als auch den Typ fest:

<div class="card-grid">Container named "card-grid", type inline-size.</div>

Warum unbenannte Container?

Ein unbenannter Container kann trotzdem abgefragt werden – die @container-Regel verwendet standardmäßig den nächstgelegenen übergeordneten Container. Namen benötigen Sie nur, wenn Sie einen bestimmten übergeordneten Container überspringen möchten.

Überlegungen zur Performance

Jedes Element mit container-type erhält eine eigene Layout-Containment. Das bedeutet, dass Größenänderungen innerhalb des Containers keine übergeordneten Elemente beeinflussen – ein Vorteil für die Performance. Der Browser muss bei einer Änderung des Containers nicht die gesamte Seite neu berechnen.

Zusammenhang mit der contain-Eigenschaft

Das Festlegen von container-type: inline-size setzt implizit contain: inline-size layout style auf dem Element. Dadurch wird verhindert, dass die Containergröße das eigene Layout beeinflusst – eine Voraussetzung für funktionierende Größenabfragen.

Praktisches Einrichtungsbeispiel

Eine vollständige Einrichtung für Container Queries:

<div class="article-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Container Queries im Vergleich zu Media Queries

Verwenden Sie Container für: Anpassungen auf Komponentenebene, wiederverwendbare Komponenten in unterschiedlichen Layout-Kontexten sowie Karten und Widgets an unbekannten Stellen. Verwenden Sie Media Queries für: globale Layoutänderungen, die Skalierung der Typografie sowie das Ein- und Ausblenden großer Bereiche.

Schnelltest

Welcher Eigenschaftswert macht ein Element mit @container-Regeln anhand seiner Breite abfragbar?

Zusammenfassung

container-type: inline-size definiert ein Element als Query-Container für seine Breite. Verwenden Sie container-name, um Container für eine gezielte Auswahl zu benennen. Die Kurzschreibweise container legt beides fest. Container Queries lösen das Problem von Komponenten in unbekannten Kontexten, das viewportbasierte Media Queries nicht bewältigen können.

Häufig gestellte Fragen

Ist die Lektion „container-type und container-name“ kostenlos?

Ja — der vollständige Text von „container-type und container-name“ 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-type und container-name“?

Definieren Sie Container für Container Queries mit container-type und vergeben Sie mit container-name Namen. 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 1 von 4.

Wie lange dauert die Lektion „container-type und container-name“?

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