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
@mediafor today can probably be accomplished by@containerat 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.
@mediacan handle the big picture stuff, user preferences and global styles;@containerwill 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.