容器查询:再次冲锋陷阵
阅读评论
我想计划是停止使用“元素查询”,并开始思考和将其称为“容器查询”。我们已经关注这个故事一段时间了。元素查询有一个严重的缺陷:无限循环。
.our-element:media(min-width: 500px) {
width: 499px;
}
正如响应式问题社区小组成员 Mat Marquis 所说
好吧,由于查询不再匹配,因此不再应用新宽度。由于从未应用新宽度,因此元素查询将再次匹配,因此将应用新宽度,因此查询将不再匹配,因此不会应用新宽度,依此类推,直至无限。我们仅用几行 CSS 就实现了 TARDIS 级别的悖论,并且浏览器无法以可预测的方式处理它。
Jon Neal 确实有一些关于浏览器如何处理的想法
无限循环将在有问题的块处冻结。虽然无限循环更有可能发生在元素媒体查询中,但这个问题自从
:hover
以来就一直存在。因此,一个明确的规范将是双重有用的。
但唉,也许将查询强加到父元素上会有所帮助
……我们需要重新构建我们谈论潜在解决方案的方式。由于解决方案不允许元素自行重新设置样式,因此我们可以将此约束构建到规范中:附加到元素的查询只能影响该元素的子元素的样式。
我不认为它完全解决了无限循环问题,但它使处理起来更容易了吗?