Media Queries in Zeiten von @container

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Max Böck hat mich dazu gebracht, mir eine Codebasis anzusehen und festzustellen, wie viele der @media-Abfragen letztendlich zu @container-Abfragen werden könnten.

Ich bin darauf eingegangen und habe mir einige meiner Projekte angesehen – und ja, die meisten Dinge, wofür ich heute @media verwende, können wahrscheinlich irgendwann von @container erledigt werden. Trotzdem habe ich ein paar Szenarien gefunden, in denen ich denke, dass Media Queries immer noch notwendig sein werden.

Max hat nicht genau gesagt, wie viele ersetzt würden, aber ich hatte den Eindruck, es sei so 50/50.

Eine Kombination aus beiden Techniken wird wahrscheinlich der beste Weg nach vorne sein. @media kann die großen Zusammenhänge, Benutzereinstellungen und globalen Stile handhaben; @container wird sich um all die Mikroanpassungen innerhalb der Komponenten selbst kümmern.

Ein perfektes Team!

Ich denke auch, dass es einen großen Unterschied geben wird zwischen dem, was wir beim Refactoring einer bestehenden CSS-Codebasis tun, und dem, was wir tun, wenn wir von Grund auf neu bauen. Und es wird einen Unterschied machen, was wir tun, wenn wir Container Queries zum ersten Mal erhalten, und was wir in Jahren tun werden, wenn sich neue Muster etabliert haben. Ich bin seit langem davon überzeugt, dass Komponenten die richtige Abstraktion für die Frontend-Entwicklung sind. Es fühlt sich an, als ob uns in letzter Zeit alles in diese Richtung drängt, von JavaScript-Frameworks und nativen Komponenten bis hin zu Container Queries und Style Scoping.

Direkter Link →