Containerabfragen landen in stabilen Browsern

An diesem Valentinstag feiern wir die Einführung von Abfragen für die Größe von Containern und Containerabfrageeinheiten in allen stabilen Browsern.

Una Kravets

Containerabfragen sind in aller Munde! An diesem Valentinstag sind Containerabfragen und Containerabfrageeinheiten 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 können Sie beispielsweise eine Kartenkomponente aktivieren, die in einer Seitenleiste auf eine bestimmte Weise und in einem Produktraster in einer anderen Konfiguration dargestellt werden kann.

Containerabfragen verwenden

Wenn Sie Containerabfragen verwenden möchten, müssen Sie zuerst die Begrenzung auf ein übergeordnetes Element festlegen. Legen Sie dazu ein container-type für den übergeordneten Container fest oder verwenden Sie den Kurzcode container, um ihm gleichzeitig einen Typ und einen Namen zu geben:

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

Wenn Sie container-type auf inline-size festlegen, wird die Größe des übergeordneten Elements in der Ausrichtung „Inline“ abgefragt. Bei lateinischen Sprachen wie Englisch entspricht dies der Breite der Karte, da der Text inline von links nach rechts fließt.

Jetzt können Sie mit diesem Container mithilfe von @container Stile auf alle untergeordneten Elemente anwenden:

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

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

Außerdem können Sie Werte für die Länge von Containerabfragen auf die gleiche Weise wie viewportbasierte Maßeinheiten verwenden. Der Unterschied besteht darin, dass die Containereinheiten dem Container und nicht dem Darstellungsbereich entsprechen. Im folgenden Beispiel wird eine responsive Typografie mithilfe von Containerabfrageeinheiten und der Funktion clamp() veranschaulicht, um einen Mindest- und einen Maximalwert für die Größ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 clamp()-Funktion gibt dafür einen Mindestwert von 2 rem und einen Höchstwert von 4 rem zurück. Wenn 15cqi in der Zwischenzeit zwischen diesen Werten liegt, wird der Text entsprechend verkleinert oder vergrößert.

Valentinsgruß mit Containerabfrage

Zum Valentinstag haben wir eine Karte für alle erstellt, unabhängig davon, welchen stabilen Browser (in der neuesten Version) Sie verwenden.