One hundred years ago (2018), in the dark ages before Container Queries existed, Philip Walton put together Responsive Components, a JavaScript-based technique for flopping out classes on elements at certain widths (element widths, not viewport widths) such that you could re-style them in CSS. It was a fine technique. A fairly lightweight ResizeObserver flopping out some classes is pretty straightforward. I imagine some people used it, but I’d say it never really took off. I think there was just a little too much cognitive overhead with the JavaScript technique, and using JavaScript at all isn’t what people wanted with Container Queries.
What stood out to me about Philip’s demo though, was that the use cases were outstanding. The ol’ Card component is a classic I realize, but it’s overdone now as a Container Query demo. The Calendar demo was way cooler:
I decided to re-build that Calendar the other day, and got this far (you might wanna view it bigger than this embed):
I used native CSS nesting, so if you’re looking in Safari or Firefox, which don’t support CSS nesting as I write, just go to the CSS settings and flip on SCSS and it’ll process correctly and work.
I just winged it — I didn’t look at Philip’s approach while building — but in the end I did do a little comparison and it was interesting how similar we did things. I used a bit more CSS grid than he did, but our CSS custom properties approach was similar. Plus, of course, my version uses @container rather than the JavaScript approach.
I chucked that demo into a neat little Web Component for resizing panels.
I yipped about it on YouTube a little:
Leave a Reply