Container Queries Lab von iShadeed

Ahmad Shadeed hat einen frühen Sprung bei Containerabfragen gemacht und hat a wachsende Sammlung von Beispielen nach alltäglichen Mustern.

Und, falls Sie es verpasst haben, seines letzter Beitrag zu Containerabfragen macht einen wunderbaren Job und beschreibt, wie sie funktionieren, seit sie diesen Monat in Chrome 105 gelandet sind (wir werden sie bald in Safari 16 sehen). Einige ausgewählte Highlights und Imbissbuden:

• Container werden mit definiert container-type Eigentum. Frühere Demos und Vorschläge wurden verwendet contain stattdessen.
• Containerabfragen sind den Medienabfragen sehr ähnlich, die wir die ganze Zeit geschrieben haben, um auf die Größe des Darstellungsbereichs abzuzielen. Also eher als sowas @media (min-width: 600px) {}, Haben wir @container (min-width: 600px) {}. Das sollte das Konvertieren vieler dieser Medienabfragen in Containerabfragen ziemlich einfach machen, abzüglich der Arbeit, die neuen Breakpoint-Werte herauszufinden.
• Wir können Container benennen, um sie in unserem Code besser unterscheiden zu können (z container-name: blockquote).

Tolle Arbeit, Ahmad! Und danke fürs Teilen!

Direktlink →