[大卫·巴伦的] 关于容器查询可实施路径的想法

这是 Firefox 首席工程师 David Baron 在一篇公开文章中表达的对容器查询的想法。我知道很多人一直在屏息等待大卫的想法，因为他极少数能够理解这些问题内情并谈论实施可能性的专家之一。

我们仍处于容器查询的早期阶段。每个网页设计师和开发者都想要它们，浏览器也明白这一点，但这是一个非常复杂的情况。2020年2月听到有关 可能采用 switch 语法 的积极信号令人鼓舞，这将让我们可以使用 available-inline-size 来有条件地设置单个值。

现在我们看到 第二个想法，它也在可行范围之内。

这个想法在语法上使用 @rule。来自该文档

@container <selector> (<container-media-query>)? {
  // ... rules ...
}

所以，我想象它会像这样

.parent {
  contain: layout inline-size;
  display: grid;
  grid-template-columns: 100%;
  gap: 1rem;
}
@container .parent (min-width: 400px) {
  grid-template-columns: 1fr 1fr;

  .child::before {
     content: "Hello from container query land!";
   }
}

但是…

1. 我不确定是否需要在里面重复选择器？或者是否将属性/值对放在里面会自动应用于 @rule 中的选择器。
2. 大卫说，“规则只能匹配该容器的后代。可能我们需要支持一些属性应用于容器本身，但其他属性绝对不能。”我希望网格属性是您可以更改内容的有力竞争者，但我一无所知。否则，我认为我们会看到人们用 <div class="container-query"> 包裹元素来绕过“仅后代”限制。

包含似乎是其中非常重要的部分。例如，如果元素没有被正确包含，容器查询将无法工作。我对包含了解不多，但 Rachel 有一个关于 去年晚些时候深入的介绍。

再说一次，这还处于非常早期的阶段，我只是很享受观看这个过程，我们没有人真正知道哪些会真正进入浏览器。

直接链接 →