Media Queries in Times of @container

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 –


The post Media Queries in Times of @container appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier

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 ArticlePermalink


The post Media Queries in Times of @container appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


This content originally appeared on CSS-Tricks and was authored by Chris Coyier


Print Share Comment Cite Upload Translate Updates
APA

Chris Coyier | Sciencx (2021-06-15T19:51:32+00:00) Media Queries in Times of @container. Retrieved from https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/

MLA
" » Media Queries in Times of @container." Chris Coyier | Sciencx - Tuesday June 15, 2021, https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/
HARVARD
Chris Coyier | Sciencx Tuesday June 15, 2021 » Media Queries in Times of @container., viewed ,<https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/>
VANCOUVER
Chris Coyier | Sciencx - » Media Queries in Times of @container. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/
CHICAGO
" » Media Queries in Times of @container." Chris Coyier | Sciencx - Accessed . https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/
IEEE
" » Media Queries in Times of @container." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/. [Accessed: ]
rf:citation
» Media Queries in Times of @container | Chris Coyier | Sciencx | https://www.scien.cx/2021/06/15/media-queries-in-times-of-container/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.