Ich weiß nicht, wie es euch geht, aber meine Feeds waren in den letzten Wochen mit Artikeln über CSS Container Queries überflutet. Die Aufregung um Container Queries begann eigentlich schon im Dezember, nachdem Miriam Suzanne einen Vorschlag postete (der auf David Barons Vorschlag aufbaute), aber es war die Nachricht in einem Tweet von Una Kravets Ende März, dass sie in Chrome Canary 91.0.4459.0 hinter dem Flag #enable-container-queries in chrome://flags landeten.
So viel über Container Queries wurde bereits an so vielen Orten in so kurzer Zeit behandelt – und die Spezifikation ist noch nicht einmal final! Ich bin einfach nur überglücklich, so viel Begeisterung für ein CSS-Feature zu sehen und wollte etwas davon festhalten. Chris sammelte zufällig auch einen Haufen Links zu dem Thema, also hier ist eine Zusammenfassung von allem, was uns auf den Schreibtisch gekommen ist.
Container Queries Erläuterung & Vorschlag
Miriam's Artikel ist ein ausgezeichneter Ausgangspunkt, um loszulegen. Das ist so etwas wie der Elevator Pitch, der die Idee vorstellt und eine Reihe von Beispielen und Ressourcen liefert, die es wert sind, angesehen zu werden.
Container Queries: Eine Schnelleinführung
David Herron taucht im Oddbird Blog direkt in das Konzept ein, was passend ist, da Miriam Suzanne dort ebenfalls arbeitet. Dies ist eine großartige Einführung in Container Queries, die sich mit der Syntax befasst und ein Beispiel für eine Kartenkomponente zeigt.
Eine Einführung in CSS Container Queries
Stephanie Eckles geht bei Smashing Magazine tief in Container Queries. Mir gefällt, dass der Artikel damit beginnt, was Container Queries lösen, bevor er sich mit der Syntax und der Vorgehensweise befasst.
Container Queries kommen tatsächlich
Andy Bell wünscht sich Container Queries schon lange. Er hat keine Zeit verloren und sich mit einem Kartenbeispiel von sich selbst damit beschäftigt. Und hey, er kann seinen Sticker endlich in Rente schicken.
Sagen Sie Hallo zu Container Queries
Ich schätze immer sowohl die Art und Weise, wie Ahmed Shadeed Dinge in einfachsten Begriffen erklärt, als auch, dass seine Demos über gängige Beispiele hinausgehen und interessante Anwendungsfälle behandeln.
CSS Container Queries: Ein erster Blick + Demo
Okay, das ist schummeln, da Bramus das Ende März veröffentlicht hat. Aber es war wirklich nach diesem Beitrag, als ich anfing, andere zu sehen, die hereinkamen.
Next Gen CSS: @container
Ja, CSS-Tricks hat auch zum Geplapper beigetragen! Una Kravets hat vielleicht meine Lieblingsdemo von Container Queries bisher: einen Kalender, der alles von Schriftgrößen bis zum Layout anpasst.
Container Queries in Web Components
Max Böck macht, was ich am besten liebe: zwei Ideen nehmen und sie zusammenbringen! Er hat eine hervorragende Demo einer Webkomponente zur Darstellung von Büchern erstellt und @container integriert.
Komponenten-Art-Direction mit CSS Container Queries
Sara Soueidan zeigt, wie Container Queries zur Kunstrichtung von Bildern verwendet werden können, einschließlich der Fallstricke, die bei der Verwendung des <picture>-Elements mit @container auftreten.
Susy und Sass, CSS-Ebenen und CSS-Kompatibilität, Container Queries und CSSWG
Hören Sie Bruce Lawson und Vadim Makeev über Container Queries (unter anderem) mit Miriam diskutieren.
Container Queries werden ein Game-Changer sein!
Sehen Sie, wie Kevin Powell demonstriert, wie diese schicken auto-fill/minmax() Grids ein guter Anwendungsfall für Komponenten sind, die sich selbst basierend darauf stylen, wie groß sie gerade sind.
CSS Container Queries Polyfill ERSTER BLICK
Scott Tolinski schaut sich cqfill an. Bramus macht das Gleiche hier in diesem Blogbeitrag. Das Beste an Scotts Video ist das Hinzufügen von transitions auf die geänderten Eigenschaften.
Können wir einen "Resize Hack" mit Container Queries erstellen?
Jhey Tompkins hatte bereits das Gefühl, dass es zu viele Karten-Demos für Container Queries gibt und wollte etwas ganz anderes machen.
Container Queries & Die Zukunft von CSS
Es gibt nichts Besseres, als von Miriam Suzanne über Container zu lernen. Hier ist ein Konferenzvideo.
Container Queries für Designer
Ahmad Shadeed sagt, Designer sollten anfangen, über Container Queries nachzudenken. Ein Dokument zu haben, das Breakpoints für eine einzelne Komponente beschreibt, scheint derzeit der richtige Weg zu sein.
CSS Container Queries: Anwendungsfälle und Migrationsstrategien
Adrian Bece behandelt hier die Grundlagen und weist auf einige Dinge hin, die ich noch nicht wusste. Erstens gibt es noch keine DevTools für Container Queries, was ihre Fehlersuche erschwert.
Das neue Responsive: Webdesign in einer Komponenten-getriebenen Welt
Una Kravets verbindet nicht nur Container Queries, sondern auch andere Konzepte, um diese komponentengetriebene Welt zu ermöglichen. Klingt, als hätten native, gekapselte Stile wieder etwas an Bedeutung gewonnen!
All Them Switches: Responsive Elemente und mehr
Brian Kardells Artikel handelt mehr von einer möglichen switch() Funktion (und ihren Schlüsselwort-Freunden), die sehr nützlich erscheinen, auch unabhängig von Container Queries.
Ziemlich viel, oder? Bevor wir uns verabschieden, hat Chris eine Herausforderung für uns alle, die er teilen wollte.
Ein häufiger Refrain, auch von mir, war, dass wir, wenn wir Container Queries hätten, sie für den Großteil dessen verwenden würden, wofür wir heute Media Queries verwenden. Die Herausforderung ist: Schauen Sie sich Ihre CSS-Codebasis jetzt mit frischen Augen an, wissend, wie die
@containerQueries derzeit funktionieren. Hält dieser Refrain? Welche Media Queries werden Sie ersetzen (sobald wir es vernünftigerweise können) und welche müssen bleiben? Bloggen Sie darüber.