Let’s Not Overlook About Container Queries

Container queries are all the time on the highest of the record of requested enhancements to CSS. The overall sentiment is that if we had container queries, we would not write as many international media queries primarily based on web page dimension. That is as a result of we’re truly attempting to manage a extra scoped container, and the one cause we use media queries for that now’s as a result of it is one of the best software now we have in CSS. I completely imagine that.

There may be one other sentiment that goes round from time to time that goes one thing like: “you builders suppose you want container queries however you actually do not.” I’m not a fan of that. It appears terribly apparent that we’d do good issues with them in the event that they have been obtainable, not the least of which is writing cleaner, moveable, comprehensible code. Everybody appears to agree that constructing UIs from parts is the way in which to go lately which makes the necessity for container queries all of the extra apparent.

It is fantastic that there are trendy JavaScript concepts that assist us do use them at present — however that does not imply the know-how wants to remain there. It makes far more sense in CSS.

This is my late 2019 thought dump on the topic:

Philip Walton’s “Responsive Elements: a Answer to the Container Queries Downside” is a superb have a look at utilizing JavaScript’s ResizeObserver as one solution to clear up the difficulty at present. It performs nice and works anyplace. The demo website is one of the best one on the market as a result of it highlights the necessity for responsive parts (though there are different documented use circumstances as effectively). Philip even says a pure CSS resolution can be extra ideally suited.
CSS nesting bought a bit spherical of enthusiasm a couple of yr in the past. The dialog makes it appear to be nesting is believable. I am in favor of this as a long-time fan of wise Sass nesting. It makes me marvel if the syntax for container queries may leverage the identical form of factor. Perhaps nested queries are scoped to the guardian selector? Otherwise you prefix the media assertion with an ampersand as the present spec does with descendant selectors?
Different proposed syntaxes typically contain some use of the colon, like .container:media(max-width: 400px) . I like that, too. Single-colon selectors (pseduo selectors) are philosophically “choose the component below these situations” — like :hover, :nth-child, and so on. — so a media scope is smart.
I do not suppose syntax is the largest enemy of this function; it is the efficiency of how it’s applied. Final I understood, it is not even efficiency as a lot because it mucks with the complete rendering circulate of how browsers work. That looks like an enormous hurdle. I nonetheless do not wanna neglect about it. There may be plenty of innovation occurring on the net and, simply because it is not clear easy methods to implement it at present, that does not imply somebody will not determine a sensible path ahead tomorrow.

Leave a Reply