Philip Walton for Google responded to our question We’ve Got Container Queries Now, But Are We Actually Using Them? There are a variety of reasons why usage of them seems to be low, but certainly developers worried about browser support is still a factor. The biggest quoted concern is Safari 15, which is entirely reasonable.
Philip lays out a technique where you build a <responsive-container> Web Component which has a ResizeObserver that updates classes on itself you can use for fallback styles in browsers that don’t support @container.
It’s clever and efficient, but there is stuff I worry about:
- You can’t just update
@mediaqueries to@containerqueries with the same numbers, they measure very different things and will now break at different places. - Every component is going to have different breakpoints, and now you need to keep those breakpoints synced in both HTML and CSS.
- Dealing with that style duplication is tricky. I would think a lot of setups don’t have a processing setup that has mixin abilities.
Still, if this helps you build a better system you can get to production, godspeed.
