I guess the plan is to stop with the “element queries” and start thinking and referring to them as “container queries”. We’ve been following this saga for a while. Element queries have a serious pitfall: infinite loops.
.our-element:media(min-width: 500px) {
width: 499px;
}As Responsive Issues Community Group member Mat Marquis puts it:
Well, since the query no longer matches, the new width is no longer applied. Since that new width is never applied, the element query would match again, so the new width would be applied, so the query would no longer match, so the new width wouldn’t be applied—and so on unto infinity. We’ve achieved a TARDIS-caliber paradox with just a few lines of CSS, and there’s no predictable way for the browser to handle it.
Jon Neal actually had some ideas on how browsers could handle that:
Infinite loops would freeze at the offending block. While infinite loops are much more likely to happen with element media queries, this issue has been around since
:hover. Therefore, a clear specification would be doubly useful.
But alas, perhaps forcing the queries onto a parent element will help:
… we need to reframe the way we talk about a potential solution. Since a solution can’t allow an element to restyle itself, we can build that constraint into the specification: queries attached to an element can only influence the styling of that element’s child elements.
I don’t think it totally solves the infinite loop problem, but makes it easier to handle somehow?