On container queries.
An excellent piece from Ethan on the concept of container queries and why they’re important. I always find that whenever Ethan starts rambling on about something to do with web design it’s usually a good idea to pull out your pen and paper and start taking notes.
Ethan uses the header design component from a website he worked on recently, The Toast, as a reference to why container queries are important and how they can make designing responsive components much easier by placing media queries upon the module itself (the container – thus container queries) rather than applying global media queries to them.
If we finally get the introduction of container queries (not through lack of effort) it will greatly reduce the number of media queries on the site. We will still have the major breakpoints, where the design layout changes significantly — for example from three columns to two columns to one column — but all of the ‘tweak points’ will wind up in container queries.
This is, in a nutshell, the disconnect that container queries are trying to address. As our designs become more modular and pattern-driven, the value of media queries has decreased. That’s not to say media queries are, like, bad—not at all. After all, they’re the best tool we’ve got right now. But there’s a divide growing between what our responsive designs need to do, and the tools CSS gives us to meet those needs. We’re making design decisions at smaller and smaller levels, but our code asks us to bind those decisions to a larger, often-irrelevant abstraction of a “page.”
An excerpt from On container queries.
