越来越有可能,我们实际上将获得真正的容器查询。 Google 正在 对 David Baron 提出的语法想法进行原型设计,该想法由 Miriam Suzanne 进行了改进。 显然,已经对 switch()
语法 进行了一些原型设计,它类似于对值的容器查询。 即使现在,也有一些像 Raven 技术 之类的工具可以执行类似容器查询的值。 这些东西会随着时间的推移而逐渐明朗。
如果您现在需要解决方案,大多数解决方案都涉及让 JavaScript 观察正在发生的事情(即容器宽度),然后为您提供一些样式钩子(例如类)。 以下是对“最小化采用”领域的快速回顾。
- Philip Walton 展示了如何使用
ResizeObserver
自行实现这一点。 观察大小调整,应用类作为样式钩子。 - Heydon Pickering 有一个
<watched-box>
网页组件,它利用了ResizeObserver
。 观察大小调整,应用类作为样式钩子。(查看与 resizeasaurus 的组合。) - Scott Jehl 制作了一个
<c-q>
网页组件,它利用了ResizeObserver
。 观察大小调整,应用数据属性作为样式钩子。 - Eric Portis 制作了 conditional-classes,它利用了
ResizeObserver
和一种巧妙的(有效的)语法,涉及最终应用类的 CSS 自定义属性,作为样式钩子。
还有 Tommy Hodgins 的 EQCSS,它 执行容器查询(以及其他功能)通过查看您的 CSS,以查找用于执行这些花哨操作的发明语法。 我不会真正称之为最小化,而且向用户发送无效的 CSS 语法让我有点不安,但它看起来很健壮。