Ahmad Shadeed war früh dran mit Container Queries und hat eine wachsende Sammlung von Beispielen, die auf alltäglichen Mustern basieren.
Und falls Sie es verpasst haben, sein neuester Beitrag zu Container Queries erklärt wunderbar, wie sie funktionieren, seit sie diesen Monat in Chrome 105 gelandet sind (bald werden wir sie auch in Safari 16 sehen). Einige ausgewählte Highlights und Erkenntnisse
- Container werden mit der Eigenschaft
container-typedefiniert. Frühere Demos und Vorschläge verwendeten stattdessencontain. - Container Queries ähneln sehr den Media Queries, die wir bisher immer geschrieben haben, um die Größe des Viewports anzusprechen. Anstatt also etwas wie
@media (min-width: 600px) {}zu haben, haben wir@container (min-width: 600px) {}. Das sollte die Umwandlung vieler dieser Media Queries in Container Queries ziemlich einfach machen, abzüglich der Arbeit, die neuen Breakpoint-Werte herauszufinden. - Wir können Containern Namen geben, um sie in unserem Code besser zu unterscheiden (z. B.
container-name: blockquote).
Großartige Arbeit, Ahmad! Und danke fürs Teilen!
Ich liebe die Tricks und Design-Ideen. Machen Sie so weiter über den Newsletter!