Max Böck took me up on my problem to look by a codebase and see how most of the @media queries may finally turn into @container queries.
I took the bait and had a have a look at a few of my initiatives – and sure, most of what I exploit @media for as we speak can in all probability be completed by @container in some unspecified time in the future. However, I got here up with a number of eventualities the place I believe media queries will nonetheless be mandatory.
Max didn’t say precisely what number of would get replaced, however I obtained the impression it was 50/50ish.
A mix of each methods will in all probability be one of the best ways ahead. @media can deal with the large image stuff, person preferences and international kinds; @container will care for all of the micro-adjustments within the elements themselves.
An ideal crew!
I additionally suppose there shall be a giant distinction between what we do when refactoring an current CSS codebase to what we do once we are constructing from scratch. And it will likely be totally different what we do once we first get container queries to what we do years from now when new patterns have settled in. I’ve lengthy been bullish on elements being the fitting abstraction for front-end growth. It seems like every thing currently pushes us in that course, from JavaScript frameworks and to native elements, to container queries and magnificence scoping.
Direct Hyperlink to Article — Permalink
The publish Media Queries in Instances of @container appeared first on CSS-Methods.
You may help CSS-Methods by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!