Welche modernen CSS-Features haben wirklich verändert, wie du Komponenten baust, und welches Problem lösen Container Queries?

Container Queries lassen eine Komponente auf die Breite ihres Containers reagieren statt auf den Viewport, dieselbe Card kann also in einer Sidebar schmal und in einer Hauptspalte breit sein, ohne Props durchzureichen oder Breakpoints zu raten. Daneben ermöglicht der has-Selektor Styling vom Elternelement aus, natives Nesting macht einen Präprozessor überflüssig, Subgrid richtet verschachtelte Inhalte über ein Grid hinweg aus, und View Transitions animieren zwischen Zuständen ohne Bibliothek.

Das Große sind Container Queries, weil das Layout einer Komponente jahrelang am Viewport hing, obwohl die Komponente keine Ahnung hat, wie breit ihr Platz ist. Dieselbe Card hatte also eine Prop wie variant compact, und die musste von dort durchgereicht werden, wo sie platziert wurde. Jetzt deklariere ich container-type inline-size auf dem Wrapper, und die Card stylet sich nach ihrer eigenen Breite, sie fällt also in eine Sidebar oder ein Grid über die volle Breite und funktioniert einfach. Danach der has-Selektor, hauptsächlich für Formularzustände, weil ich einen Feld-Wrapper danach stylen kann, ob er ein ungültiges Input enthält, ganz ohne JavaScript. Natives Nesting hat mir eine echte Präprozessor-Abhängigkeit erspart, und Subgrid sorgt endlich dafür, dass Card-Header über eine Reihe hinweg fluchten. Beim Support schaue ich auf den Baseline-Status, statt zu raten, und wenn ein Feature nicht breit verfügbar ist, nutze ich es als Progressive Enhancement mit einem supports-Block, damit ohne es nichts kaputt aussieht.