Modernes CSS bietet uns ständig neue, einfachere Wege, um alte Probleme zu lösen. Doch oft lösen diese neuen Funktionen nicht nur bestehende Probleme, sondern eröffnen uns auch völlig neue Möglichkeiten.
Container queries sind eine davon …
Die CSS-Eigenschaft container ist eine Kurzschreibweise, die die Eigenschaften container-name und container-type in einer einzigen Deklaration kombiniert.
.parent {
container: cards-grid / inline-size;
/* Equivalent to: */
container-name: cards-grid;
container-type: inline-size;
}Die container-Eigenschaft ist eine …
Die CSS-Eigenschaft container-type ist Teil der Container-Queries-Funktion und wird verwendet, um ein Element als Container zu registrieren, der Stile auf andere Elemente anwenden kann, wenn er bestimmte Bedingungen erfüllt.
.parent {
container-type: inline-size;
}
@container (width < 500px) Die CSS-Eigenschaft container-name wird verwendet, um ein Element als Container zu registrieren, der basierend auf der Größe und den Stilen des Containers Formatierungen auf andere Elemente anwendet.
.parent {
container-name: cards;
container-type: inline-size;
}
@container cards (width 800px) {
.child {
CSS Container Queries gewinnen immer mehr an Bedeutung, und viele von uns experimentieren bereits damit, sei es für kleine Tests oder ähnliches. Sie haben eine gute, wenn auch noch nicht vollständige Browser-Unterstützung — genug, um die Verwendung zu rechtfertigen …
Ich habe vor kurzem einige erste Gedanken zu Container Style Queries aufgeschrieben. Es ist noch ein frühes Stadium. Sie sind bereits in der CSS Containment Module Level 3 Spezifikation definiert (derzeit im Status „Editor’s Draft“), aber es gibt noch ein paar …
Wir befinden uns noch in einem gaaaanz frühen Stadium der Container Queries. Zu früh für eine breite Browser-Unterstützung, aber Chromium unterstützt sie bereits, Safari hat die Unterstützung in Version 16 gestartet, und Firefox wird vermutlich bald folgen.
Die meisten frühen Diskussionen …
Ahmad Shadeed hat sich frühzeitig mit Container Queries befasst und verfügt über eine wachsende Sammlung von Beispielen basierend auf alltäglichen Mustern.…
