Containerabfragen landen in stabilen Browsern

An diesem Valentinstag feiern wir Container-Suchanfragen bezüglich der Größe und Container-Suchanfragen, die in allen stabilen Browsern verfügbar sind.

Una Kravets

Die Liebe zu Containerabfragen liegt in der Luft. In diesem Valentinstag sind Container-Abfragen und Container-Abfrageeinheiten in allen modernen Browsern stabil.

Mit Containerabfragen können Sie die Stilinformationen eines übergeordneten Elements abfragen, z. B. dessen inline-size. Mit Medienabfragen können Sie die Größe des Darstellungsbereichs abfragen, Containerabfragen ermöglichen Komponenten, die sich je nach Position in der Benutzeroberfläche ändern können.

Containerabfragen sind besonders praktisch für responsives Design und wiederverwendbare Komponenten. So wird beispielsweise eine Kartenkomponente aktiviert, die in einer Seitenleiste und in einer anderen Konfiguration innerhalb eines Produktrasters angeordnet werden kann.

Containerabfragen verwenden

Wenn Sie Containerabfragen verwenden möchten, legen Sie zuerst die Begrenzung für ein übergeordnetes Element fest. Legen Sie dazu ein container-type für den übergeordneten Container fest oder geben Sie mit der Abkürzung container gleichzeitig Typ und Namen für den Container ein:

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

Wenn Sie für container-type den Wert inline-size festlegen, wird die Größe der Inline-Richtung des übergeordneten Elements abgefragt. Für lateinische Sprachen wie Englisch ist dies die Breite der Karte, da der Text inline von links nach rechts fließt.

Jetzt können Sie diesen Container verwenden, um mithilfe von @container Stile auf alle untergeordneten Elemente anzuwenden:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

Darüber hinaus können Sie Werte für die Containerabfragelänge genauso verwenden wie Werte für Darstellungsbereich-basierte Einheiten. Der Unterschied besteht darin, dass die Containereinheiten dem Container und nicht dem Darstellungsbereich entsprechen. Das folgende Beispiel zeigt eine responsive Typografie mit Container-Abfrageeinheiten und der Funktion clamp(), um einen Wert für die Mindest- und Maximalgröße anzugeben:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

Die 15cqi oben bezieht sich auf 15% der Inline-Größe des Containers. Die Funktion clamp() gibt hierfür einen Mindestwert von 2rem und einen Höchstwert von 4rem an. Wenn 15cqi zwischen diesen Werten liegt, wird der Text entsprechend verkleinert und vergrößert.

Eine Containerabfrage (Valentinstag)

Zur Feier der Containerabfrage an diesem Feiertag haben wir ein Valentinstagsgeschenk für euch erstellt, unabhängig davon, in welchem (aktuellen) stabilen Browser ihr euch diese Inhalte ansieht.