迈向响应式元素

热门新闻 来自 Brian Kardell，关于我们一直称之为“容器查询”的内容，这是 CSS 中最热门的功能请求

似乎至少在我要称之为“组件响应式设计”的一部分上存在普遍共识，那就是颠倒问题会更好。

这里的颠倒听起来像是，我们不是将其作为媒体查询来做，而是在属性级别进行。

.foo {
  display: grid;
  grid-template-columns: switch(
    (available-inline-size > 1024px) 1fr 4fr 1fr;
    (available-inline-size > 400px) 2fr 1fr;
    (available-inline-size > 100px) 1fr;
    default 1fr;
  );
}

我认为这仍处于构思阶段，其他人也在构思不同的想法。但这值得分享，因为它听起来很有吸引力并且是可行的，因为它没有受到“这根本不是浏览器的工作方式”的困扰，而这在容器查询中经常出现。

例如，Brian 还谈到了最近的“光速进展”

考虑到我们改变了僵局的对话，并且ResizeObserver被构思、孵化、规范化、测试、达成一致，迭代（我们做错了事！）并在大约 2 年内在所有浏览器中实现

在标准方面，两年时间飞快。

直接链接 →