Proposal for a slightly different syntax and function #3
Description
In #2 (comment) I posted an idea about a different syntax. It looks like:
.child:container(min-width: 150px) {
color: red;
}And the nearest qualified ancestor is selected as the container to run the query against by the browser.
As I put more thoughts into this I got an idea of how the implementation issue (jumping between compute style and layout) could possibly be solved.
If I’m right the browser computes the styles by traversing the DOM tree from top to bottom. In this process it could already calculate and store the width if it knows that it doesn’t depend on its descendants. If it then reaches an element with a container query rule it already knows what the right container is – it’s the nearest ancestor for which it was able to calculate a width – and which width it has. So it should be possible to resolve the container queries without doing the layout process.
It may be that I’m totally wrong with my assumptions about browser internals, but it would be great if it is implementable this way.
If someone is interested in this idea I also wrote a prolyfill and a blog post about this version of container queries.