An diesem Valentinstag feiern wir mit Containerabfragen und Container-Abfrageeinheiten, die in allen stabilen Browsern landen.
Die große Liebe zu Containerabfragen liegt in der Luft. An diesem Valentinstag sind Größencontainerabfragen und Container-Abfrageeinheiten in allen modernen Browsern stabil.
Mit Containerabfragen können Sie die Stilinformationen eines übergeordneten Elements wie dessen inline-size abfragen. Mit Medienabfragen können Sie die Größe des Darstellungsbereichs abfragen, und Containerabfragen ermöglichen Komponenten, die sich je nachdem, wo sie sich auf der Benutzeroberfläche befinden, ändern können.
Containerabfragen sind besonders praktisch für responsives Design und wiederverwendbare Komponenten. So lässt sich z. B. eine Kartenkomponente aktivieren, die in einer Seitenleiste und in einer anderen Konfiguration innerhalb eines Produktrasters unterschiedlich angeordnet ist.
Containerabfragen verwenden
Wenn Sie Containerabfragen verwenden möchten, legen Sie zuerst die Begrenzung für ein übergeordnetes Element fest. Dazu legen Sie einen container-type für den übergeordneten Container fest oder verwenden das Kürzel container, um ihm sowohl einen Typ als auch einen Namen zuzuweisen:
.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. In lateinischen 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;
}
}
Außerdem können Sie Werte für die Länge von Containerabfragen auf dieselbe Weise verwenden wie auf Darstellungsbereich basierende Einheitenwerte. 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 Mindest- und Höchstwert für die Größe anzugeben:
.card-child h2 {
font-size: clamp(2rem, 15cqi, 4rem);
}
Der obige 15cqi bezieht sich auf 15% der Inline-Größe des Containers. Die Funktion clamp() gibt dafür einen Mindestwert von 2 rem und ein Maximum von 4 rem an. Liegt 15cqi zwischen diesen Werten, wird der Text entsprechend verkleinert und vergrößert.
Eine Container-Abfrage zum Valentinstag
Zur Feier der Container-Abfrage an diesem Feiertag haben wir ein Valentinsgeschenk für Sie erstellt, das auch für Sie gilt, unabhängig davon, in welchem (neuesten) stabilen Browser Sie dies anzeigen!
Teil der Videoreihe „Neu interoperable“