Home / Guides /

CSS Container Queries

Avatar of Geoff Graham
Geoff Graham am

Die Grundidee von CSS Container Queries besteht darin, ein Element als „Container“ zu registrieren und Stile auf andere Elemente anzuwenden, wenn das Container-Element bestimmte Bedingungen erfüllt.

Präsentiert von DigitalOcean

DigitalOcean bietet die Cloud-Computing-Dienste, die Sie benötigen, um Ihr Wachstum in jeder Phase zu unterstützen. Starten Sie mit einem kostenlosen Guthaben von 200 $!

Digital Ocean logo

Container Queries werden oft als moderner Ansatz für responsives Webdesign angesehen, bei dem traditionelle Media Queries lange Zeit der Goldstandard waren – der Grund dafür ist, dass wir Layouts mit Elementen erstellen können, die beispielsweise auf die Breite ihres Containers reagieren, anstatt auf die Breite des Viewports.

.parent {
  container-name: hero-banner;
  container-type: inline-size;

  /* or container: hero-banner / inline-size; */
}

}

.child {
  display: flex;
  flex-direction: column;
}

/* When the container is greater than 60 characters... */
@container hero-banner (width > 60ch) {
  /* Change the flex direction of the .child element. */
  .child { 
    flex-direction: row;
  }
}

Warum sollte man sich für CSS Container Queries interessieren?

  1. Durch die Verwendung einer Container Query geben wir Elementen die Fähigkeit, sich basierend auf der Größe ihres Containers zu verändern, nicht auf Basis des Viewports.
  1. Sie ermöglichen es uns, alle Stile für ein bestimmtes Element auf eine vorhersehbarere Weise zu definieren.
  1. Sie sind wiederverwendbarer als Media Queries, da sie sich überall dort gleich verhalten, wo sie eingesetzt werden. Wenn Sie also eine Komponente erstellen, die eine Container Query enthält, können Sie diese einfach in ein anderes Projekt einfügen, und sie wird sich weiterhin auf die gleiche vorhersehbare Weise verhalten.
  1. Sie führen neue Arten von CSS-Längeneinheiten ein, mit denen Elemente anhand der Größe ihres Containers skaliert werden können.

Elemente als Container registrieren

.cards {
  container-name: card-grid;
  container-type: inline-size;

  /* Shorthand */
  container: card-grid / inline-size;
}

Dieses Beispiel registriert einen neuen Container namens card-grid, der nach seiner inline-size abgefragt werden kann. Das ist eine schicke Art, „Breite“ zu sagen, wenn wir in einem horizontalen Schreibmodus arbeiten. Es handelt sich um eine logische Eigenschaft. Andernfalls würde sich „inline“ auf die „Höhe“ des Containers in einem vertikalen Schreibmodus beziehen.

  • Die Eigenschaft container-name wird verwendet, um ein Element als Container zu registrieren, der Stile auf andere Elemente basierend auf der Größe und den Stilen des Containers anwendet.
  • Die Eigenschaft container-type wird verwendet, um ein Element als Container zu registrieren, der Stile auf andere Elemente anwenden kann, wenn er bestimmte Bedingungen erfüllt.
  • Die Eigenschaft container ist eine Kurzschreibweise, die die Eigenschaften container-name und container-type in einer einzigen Deklaration kombiniert.

Mögliche Fallstricke

  • Die Eigenschaft container-name ist optional. Ein unbenannter Container passt auf jede Container Query, die nicht auf einen spezifischen Container abzielt. Das bedeutet, er könnte mehrere Bedingungen erfüllen.
  • Die Eigenschaft container-type ist erforderlich, wenn wir einen Container nach seiner size oder inline-size abfragen wollen. size bezieht sich auf die Inline- oder Block-Richtung des Containers, je nachdem, welche größer ist. inline-size bezieht sich auf die Breite des Containers im standardmäßigen horizontalen Schreibmodus.
  • Der Standardwert der Eigenschaft container-type ist normal. Und mit „normal“ ist gemeint, dass alle Elemente standardmäßig Container sind, sie werden jedoch Style-Container genannt und können nur nach ihren angewandten Stilen abgefragt werden. Beispielsweise können wir den Wert der background-color eines Containers abfragen und Stile auf andere Elemente anwenden, wenn der Wert einem bestimmten Farbwert entspricht.
  • Ein Container kann seine eigenen Stile nicht ändern. Stattdessen ändern sie die Stile ihrer Inhalte. Mit anderen Worten: Wir können die background-color des Containers nicht ändern, wenn er eine bestimmte Größe hat – aber wir können die background-color jedes Elements innerhalb des Containers ändern. „Du kannst nicht stylen, was du abfragst“ ist eine gute Denkweise hierfür.
  • Die Größe eines Containers kann nicht durch seinen Inhalt bestimmt werden. Normalerweise beeinflusst der Inhalt eines Elements dessen Größe – je mehr Inhalt, desto größer das Element und umgekehrt. Ein Container muss jedoch explizit als Teil eines Flex- oder Grid-Layouts dimensioniert werden.

Einen Container abfragen

@container my-container (width > 60ch) {
  article {
    flex-direction: row;
  }
}
  • Die @container At-Rule informiert den Browser, dass wir mit einer Container Query arbeiten und nicht etwa mit einer Media Query (z. B. @media).
  • Der Teil my-container darin bezieht sich auf den Namen des Containers, wie er in der Eigenschaft container-name deklariert wurde.
  • Das article-Element repräsentiert ein Element im Container, sei es ein direktes Kind des Containers oder ein weiter entfernter Nachfahre. In jedem Fall muss sich das Element im Container befinden, damit die Stile angewendet werden, wenn die abgefragte Bedingung erfüllt ist.

Mögliche Fallstricke

  • Der Name des Containers ist optional. Wenn wir ihn weglassen, würde jeder registrierte Container passen, sobald die Bedingungen erfüllt sind.
  • Die width eines Containers kann abgefragt werden, wenn die Eigenschaft container-type auf entweder size oder inline-size gesetzt ist. Das liegt daran, dass size die width oder height des Elements abfragen kann; während inline-size sich nur auf die width beziehen kann.
  • Sie können jede Länge abfragen. Zusätzlich zur width (d. h. inline-size) gibt es das aspect-ratio eines Elements, die block-size (d. h. height) und die Orientierung (z. B. portrait und landscape).
  • Abfragen unterstützen die Bereichssyntax (Range Syntax). Die meisten bisherigen Beispiele zeigten „größer als“ (>) und „kleiner als“ (<), aber es gibt auch „gleich“ (=) sowie Kombinationen der drei, wie „größer als oder gleich“ (>=) und „kleiner als oder gleich“ (<=).
  • Abfragen können verkettet werden. Das bedeutet, wir können Abfragen schreiben, die mehrere Bedingungen mit logischen Schlüsselwörtern wie and, or und not erfüllen.

Eigenschaften & Werte von Container Queries

Eigenschaften & Werte von Container Queries

container-name

container-name: none | <custom-ident>+;
Wertbeschreibungen
  • none: Das Element hat keinen Containernamen. Dies ist standardmäßig der Fall, sodass Sie diesen Wert wahrscheinlich nie explizit verwenden werden, da sein Zweck lediglich darin besteht, das Standardverhalten der Eigenschaft festzulegen.
  • <custom-ident>: Dies ist der Name des Containers, der alles Mögliche sein kann, außer Wörter, die für andere Funktionen reserviert sind, einschließlich default, none, at, no und or. Beachten Sie, dass die Namen nicht in Anführungszeichen gesetzt werden.
Im Almanac öffnen
  • Initialwert: none
  • Anwendbar auf: Alle Elemente
  • Vererbt: Nein
  • Prozentangaben: N/A
  • Berechneter Wert: none oder eine geordnete Liste von Bezeichnern
  • Kanonische Reihenfolge: Gemäß Grammatik
  • Animation: Nicht animierbar

container-type

container-type: normal | size | inline-size;
Wertbeschreibungen
  • normal: Dies gibt an, dass das Element ein Container ist, der nach seinen Stilen statt nach der Größe abgefragt werden kann. Alle Elemente sind technisch gesehen standardmäßig Container, daher müssen wir nicht einmal explizit einen container-type zuweisen, um einen Style-Container zu definieren.
  • size: Dies wird verwendet, wenn wir einen Container nach seiner Größe abfragen möchten, unabhängig davon, ob es sich um die Inline- oder Block-Richtung handelt.
  • inline-size: Dies ermöglicht es uns, einen Container nach seiner Inline-Größe abzufragen, was der width in einem standardmäßigen horizontalen Schreibmodus entspricht. Dies ist vielleicht der am häufigsten verwendete Wert, da wir so responsive Designs basierend auf der Elementgröße erstellen können, anstatt auf der Viewport-Größe, wie wir es normalerweise mit Media Queries tun würden.
Im Almanac öffnen
  • Initialwert: normal
  • Anwendbar auf: Alle Elemente
  • Vererbt: Nein
  • Prozentangaben: N/A
  • Berechneter Wert: Wie durch das Schlüsselwort spezifiziert
  • Kanonische Reihenfolge: Gemäß Grammatik
  • Animation: Nicht animierbar

container

container: <'container-name'> [ / <'container-type'> ]?
Wertdefinitionen

Wenn <'container-type'> weggelassen wird, wird es auf seinen Initialwert normal zurückgesetzt, was einen Style-Container anstelle eines Size-Containers definiert. Mit anderen Worten: Alle Elemente sind standardmäßig Style-Container, es sei denn, wir setzen den Wert der Eigenschaft container-type explizit auf size oder inline-size, was uns erlaubt, die Größenabmessungen eines Containers abzufragen.

Im Almanac öffnen
  • Initialwert: none / normal
  • Anwendbar auf: Alle Elemente
  • Vererbt: Nein
  • Prozentangaben: N/A
  • Berechneter Wert: Wie spezifiziert
  • Kanonische Reihenfolge: Gemäß Grammatik
  • Animation: Nicht animierbar

Container-Längeneinheiten

Einheiten für Container-Breite & -Höhe

EinheitNameEntspricht…
cqwContainer Query Breite (Width)1% der Breite des abgefragten Containers
cqhContainer Query Höhe (Height)1% der Höhe des abgefragten Containers

Logische Richtungen des Containers

EinheitNameEntspricht…
cqiContainer Query Inline-Größe1% der Inline-Größe des abgefragten Containers, was im horizontalen Schreibmodus seiner Breite entspricht.
cqbContainer Query Block-Größe1% der Block-Größe des abgefragten Containers, was im horizontalen Schreibmodus seiner Höhe entspricht.

Minimale & maximale Längen des Containers

EinheitNameEntspricht…
cqminMinimale Größe der Container QueryDer Wert von cqi oder cqb, je nachdem, welcher kleiner ist.
cqmaxMaximale Größe der Container QueryDer Wert von cqi oder cqb, je nachdem, welcher größer ist.

Container Style Queries

Container Style Queries sind ein weiteres Puzzleteil der CSS Container Queries. Anstatt einen Container nach seiner size oder inline-size abzufragen, können wir die CSS-Stile eines Containers abfragen. Wenn die Stile des Containers die abgefragte Bedingung erfüllen, können wir Stile auf andere Elemente anwenden. Dies ist die Art von „bedingtem“ Styling, die wir uns im Web schon lange gewünscht haben: Wenn diese Stile hier übereinstimmen, dann wende diese anderen Stile dort an.

CSS Container Style Queries sind zum Zeitpunkt der Erstellung dieses Artikels nur als experimentelles Feature in modernen Webbrowsern verfügbar, und selbst dann sind Style Queries nur in der Lage, benutzerdefinierte CSS-Eigenschaften (d. h. Variablen) auszuwerten.

Browser-Unterstützung

Das Feature gilt zum Zeitpunkt der Erstellung dieses Dokuments noch als experimentell und wird von keinem Browser unterstützt, es sei denn, es wird über Feature-Flags aktiviert.

Diese Daten zur Browser-Unterstützung stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl gibt an, dass der Browser das Feature ab dieser Version unterstützt.

Desktop

ChromeFirefoxIEEdgeSafari
130NeinNein127TP

Mobil / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
127Nein12718.0

Einen Style-Container registrieren

article {
  container-name: card;
}

Das ist eigentlich schon alles! Tatsächlich benötigen wir die Eigenschaft container-name gar nicht, es sei denn, wir müssen ihn gezielt ansprechen. Andernfalls können wir die Registrierung eines Containers komplett überspringen.

Und falls Sie sich fragen, warum es keine container-type-Deklaration gibt: Das liegt daran, dass alle Elemente bereits als Container betrachtet werden. Das ist ähnlich wie die Tatsache, dass alle Elemente standardmäßig position: relative sind; man muss es nicht deklarieren. Der einzige Grund, einen container-type zu deklarieren, ist, wenn wir eine CSS Container Size Query anstelle einer CSS Container Style Query wünschen.

Es gibt also wirklich keine Notwendigkeit, eine Container Style Query zu registrieren, da alle Elemente von Haus aus bereits Style-Container sind! Der einzige Grund, container-name zu deklarieren, wäre also lediglich, um beim Schreiben einer Style Query einen bestimmten Container namentlich auswählen zu können.

Verwendung einer Style Container Query

@container style(--bg-color: #000) {
  p { color: #fff; }
}

In diesem Beispiel fragen wir einen beliebigen passenden Container ab (da alle Elemente standardmäßig Style-Container sind).

Fällt Ihnen auf, dass die Syntax sehr stark einer traditionellen Media Query ähnelt? Der größte Unterschied ist, dass wir @container anstelle von @media schreiben. Der andere Unterschied ist, dass wir eine style()-Funktion aufrufen, welche die passende Stilbedingung enthält. Auf diese Weise wird eine Style Query von einer Size Query unterschieden, obwohl es keine entsprechende size()-Funktion gibt.

In diesem Fall prüfen wir, ob eine bestimmte benutzerdefinierte Eigenschaft namens --bg-color auf Schwarz (#000) gesetzt ist. Wenn der Wert der Variable dieser Bedingung entspricht, setzen wir die Textfarbe (color) des Absatzes (p) auf Weiß (#fff).

Benutzerdefinierte Eigenschaften & Variablen

.card-wrapper {
  --bg-color: #000;
}
.card {
  @container style(--bg-color: #000) {
    /* Custom CSS */
  }
}

Verschachtelung von Style Queries

@container style(--featured: true) {
  article {
    grid-column: 1 / -1;
  }
  @container style(--theme: dark) {
    article {
      --bg-color: #000;
      --text: #fff;
    }
  }
}

Spezifikation

CSS Container Queries sind in der CSS Containment Module Level 3 Spezifikation definiert, die sich zum Zeitpunkt der Erstellung dieses Artikels im Status „Editor’s Draft“ befindet.

Browser-Unterstützung

Die Browser-Unterstützung für CSS Container Size Queries ist hervorragend. Lediglich für Style Queries fehlt zum Zeitpunkt der Erstellung dieses Artikels noch die breite Unterstützung.

  • Chrome 105 wurde am 30. August 2022 mit Unterstützung veröffentlicht.
  • Safari 16 wurde am 12. September 2022 mit Unterstützung veröffentlicht.
  • Firefox 110 wurde am 14. Februar 2023 mit Unterstützung veröffentlicht.

Diese Daten zur Browser-Unterstützung stammen von Caniuse, wo weitere Details verfügbar sind. Eine Zahl gibt an, dass der Browser das Feature ab dieser Version unterstützt.

Desktop

ChromeFirefoxIEEdgeSafari
106110Nein10616.0

Mobil / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712716.0

Demos!

Es gibt im Web viele Beispiele, die demonstrieren, wie Container Queries funktionieren. Die folgenden Beispiele sind in dieser Hinsicht nicht einzigartig, da sie das allgemeine Konzept veranschaulichen, Stile anzuwenden, wenn ein Container-Element eine bestimmte Bedingung erfüllt.

Viele weitere Beispiele finden Sie in den Referenzen am Ende dieses Guides, aber schauen Sie sich das Container Queries Lab von Ahmad Shadeed für die vollständigste Sammlung an, da es auch als Sammlung cleverer Anwendungsfälle für Container Queries dient.

Card-Komponente

In diesem Beispiel ändert eine „Card“-Komponente ihr Layout basierend auf dem verfügbaren Platz in ihrem Container.

Call-to-Action Panel

Dieses Beispiel ähnelt kleinen Panels für die Anmeldung zu einem E-Mail-Newsletter. Beachten Sie, wie sich das Layout dreimal ändert, je nachdem, wie viel Platz im Container verfügbar ist. Das ist es, was CSS Container Queries so mächtig macht: Sie können dieses Panel buchstäblich in jedes Projekt einfügen und das Layout wird wie gewünscht reagieren, da es auf dem verfügbaren Platz und nicht auf der Größe des Viewports basiert.

Stepper-Komponente

Diese Komponente zeigt eine Reihe von „Schritten“ ähnlich einer Zeitachse an. In breiteren Containern zeigt der Stepper die Schritte horizontal an. Wenn der Container jedoch klein genug wird, verschiebt der Stepper die Elemente so, dass die Schritte vertikal untereinander stehen.

Icon-Button

Manchmal schmücken wir Buttons mit einem Icon aus, um die Beschriftung des Buttons mit etwas mehr Bedeutung und Kontext zu unterstreichen. Und manchmal wissen wir nicht genau, wie breit dieser Button in einem bestimmten Kontext sein wird. Das macht es schwierig zu wissen, wann genau das Icon ausgeblendet oder das Design des Buttons angepasst werden soll, wenn der Platz knapp wird. In diesem Beispiel wird ein Icon am rechten Rand des Buttons angezeigt, solange Platz neben der Beschriftung vorhanden ist. Wenn der Platz nicht mehr ausreicht, wird der Button zu einer quadratischen Kachel, bei der die Icons über der Beschriftung gestapelt sind. Beachten Sie, wie der border-radius in Container-Query-Einheiten (4cqi) definiert ist. Dies entspricht 4 % der Inline-Größe (Breite) des Containers und führt dazu, dass die Kanten mit zunehmender Buttongröße runder werden.

Pagination (Seitennummerierung)

Die Pagination ist ein hervorragendes Beispiel für eine Komponente, die von CSS Container Queries profitiert. Je nach verfügbarem Platz können wir wählen, ob wir Links zu einzelnen Seiten anzeigen oder diese zugunsten von nur zwei Buttons ausblenden – einen für ältere Inhalte und einen für neuere Inhalte.

Artikel & Tutorials

Allgemeine Informationen

Tutorials zu Container-Größen-Queries

Container-Stil-Queries

Almanac-Referenzen

Verwandte Anleitungen

Referenzen

Psst! Erstellen Sie ein DigitalOcean-Konto und erhalten Sie 200 $ kostenloses Guthaben für Cloud-basiertes Hosting und Services.

Kommentare

  1. arkhi
    Permalink zum Kommentar#

    Hallo. Danke für die Erinnerung an Container Queries.

    Sind nicht alle Elemente standardmäßig auf static positioniert?

    Antworten
    • Daryl
      Permalink zum Kommentar#

      Ja, dieser Teil hat mich kurz verwirrt. Ich musste prüfen, ob sich die Spezifikationen irgendwie geändert haben! Aber ja, alle Element-Positionen sind standardmäßig immer noch statisch, nicht relativ.

  2. Katok
    Permalink zum Kommentar#

    Aber es ist immer noch unmöglich, eine Regel zu erstellen, die es erlaubt, bestimmte Stile anzuwenden, wenn die Höhe des Containers bestimmte Werte hat, oder?

    Nur ein kurzes Beispiel

    Hier sehen wir, wie wir oft Container Queries für responsive Layouts nutzen

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

.inner-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

@container card (width < 300px) {
  .inner-wrapper {
      grid-template-columns: 1fr;
  }
}

    Aber stellen wir uns vor, wir müssten etwas tun, wenn unsere Karte zu hoch wird, zum Beispiel einen Nebel-Ausblendeffekt erstellen

    @container card (height > 200px) {
  .inner-wrapper {
    max-height: 200px;
    overflow: auto;
    mask-image: linear-gradient(to top, transparent, #000 30%, #000)
  }
}

    Das wird nicht funktionieren, da wir inline-size als Typ für den Container card verwenden. Wenn wir aber den Typ auf size ändern, müssen wir eine feste Höhe für den Container verwenden (aber wir wissen eigentlich nicht, welche Höhe er auf der Seite haben wird, da der Inhalt unterschiedlich ist, und wir wollen nur unsere Karten vor Übergröße schützen, den Inhalt ausblenden, zusätzliche UI-Elemente anzeigen usw.).

    Antworten
  3. Kevin C.
    Permalink zum Kommentar#

    Eine Frage zu einem Problem, auf das ich stoße. Wenn ich eine Liste von Karten verwende, bei der jede Karte mittels Container Query angezeigt wird, und ich einen Tooltip (NuxtUI-Bibliothek) nutze, erscheint der Text der nächsten Karte vor diesem Tooltip, falls er ihn überlappt. Der Tooltip erscheint korrekt, wenn ich den „Container Query“-Teil von der Karte entferne. Liegt das an der Stapelreihenfolge (Stacking Order)? Oder gibt es dafür eine Lösung?

    Antworten

Einen Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

© .