Let’s Not Forget About Container Queries

Celý článek

Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn't write as many global media queries based on page size. That's because we're actually trying to control a more scoped container, and the only reason we use media queries for that now is because it's the best tool we have in CSS. I absolutely believe that.

There is another sentiment that goes around once in a while that goes something like: "you developers think you need container queries but you really don't." I am not a fan of that. It seems terribly obvious that we would do good things with them if they were available, not the least of which is writing cleaner, portable, understandable code. Everyone seems to agree that building UIs from components is the way to go these days which makes the need for container queries all the more obvious.

It's wonderful that there are modern JavaScript ideas that help us do use them today — but that doesn't mean the technology needs to stay there. It makes way more sense in CSS.

Here's my late 2019 thought dump on the subject:

• Philip Walton's "Responsive Components: a Solution to the Container Queries Problem" is a great look at using JavaScript's ResizeObserver as one way to solve the issue today. It performs great and works anywhere. The demo site is the best one out there because it highlights the need for responsive components (although there are other documented use cases as well). Philip even says a pure CSS solution would be more ideal.
• CSS nesting got a little round of enthusiasm about a year ago. The conversation makes it seem like nesting is plausible. I'm in favor of this as a long-time fan of sensible Sass nesting. It makes me wonder if the syntax for container queries could leverage the same sort of thing. Maybe nested queries are scoped to the parent selector? Or you prefix the media statement with an ampersand as the current spec does with descendant selectors?
• Other proposed syntaxes generally involve some use of the colon, like .container:media(max-width: 400px) { }. I like that, too. Single-colon selectors (pseduo selectors) are philosophically "select the element under these conditions" — like :hover, :nth-child, etc. — so a media scope makes sense.
• I don't think syntax is the biggest enemy of this feature; it's the performance of how it is implemented. Last I understood, it's not even performance as much as it mucks with the entire rendering flow of how browsers work. That seems like a massive hurdle. I still don't wanna forget about it. There is lots of innovation happening on the web and, just because it's not clear how to implement it today, that doesn't mean someone won't figure out a practical path forward tomorrow.

The post Let’s Not Forget About Container Queries appeared first on CSS-Tricks.