Max Böck took me up on my challenge to look through a codebase and see how many of the @media
queries could ultimately become @container
queries.
I took the bait and had a look at some of my projects – and yes, most of what I use
@media
for today can probably be accomplished by@container
at some point. Nevertheless, I came up with a few scenarios where I think media queries will still be necessary.
Max didn’t say exactly how many would be replaced, but I got the impression it was 50/50ish.
A combination of both techniques will probably be the best way forward.
@media
can handle the big picture stuff, user preferences and global styles;@container
will take care of all the micro-adjustments in the components themselves.A perfect team!
I also think there will be a big difference between what we do when refactoring an existing CSS codebase to what we do when we are building from scratch. And it will be different what we do when we first get container queries to what we do years from now when new patterns have settled in. I’ve long been bullish on components being the right abstraction for front-end development. It feels like everything lately pushes us in that direction, from JavaScript frameworks and to native components, to container queries and style scoping.
Direct Link to Article — Permalink
The post Media Queries in Times of @container appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.