Paul’s being contrary again.
Seriously though, this is a good well-reasoned post about why container queries might not be the the all-healing solution for our responsive design problems. Thing is, I don’t think container queries are trying to be an all-encompassing solution, but rather a very useful solution for one particular class of problem.
So I don’t really see container queries competing with, say, grid layout (any more than grid layout is competing with flexbox), but rather one more tool that would be really useful to have in our arsenal.
You might not need (much) JavaScript for these common interface patterns.
While we all love the power and flexibility JS provides, we should also respect it, and our users, by limiting its use to only what it needs to do.
Yes! Client-side JavaScript should do what only client-side JavaScript can do.
An excellent example of an HTML web component from Eric:
Extend HTML to do things automatically!
He layers on the functionality and styling, considering potential gotchas at every stage. This is resilient web design in action.
So instead of asking yourself, “How can I write code that does what I want?” Consider asking yourself, “Can I write code that ties together things the browser already does to accomplish what I want (or close enough to it)?”
Here’s a handy little tool for generating CSS with :has() selectors in order to do quantity queries.
There’s really good browser support for display-mode media queries and this article does a really good job of running through some of the use cases for your progressive web app.
How to make the distance of link underlines proportional to the line height of the text.
Make your links beautiful and accessible.
Some styles I re-use when I’m programming with CSS.
A redesign with modern CSS.
Having fun with view transitions and scroll-driven animations.