CSS 容器查询问世

容器查询终于来了！现在，您可以在最新版本的 Chrome Canary（处于实验性功能阶段）中使用它，尽情尝试吧。哦，如果您不熟悉容器查询，可以查看 Ethan Marcotte 关于 为何它们如此重要的文章。

Ahmad Shadeed 表达了他的兴奋之情，并 展示了大量容器查询解决问题的优秀用例

过去六年，作为一名前端开发人员，我从未像现在这样对 CSS 功能感到如此兴奋。容器查询的原型现在可以在 Chrome Canary 中通过实验性功能使用。感谢 Miriam Suzanne 等聪明人的努力，以及其他一些人的贡献。

我记得看到很多关于 CSS 容器查询支持的玩笑，但它们终于实现了。

在 chrome://flags 中激活此功能后，您可以开始编写如下代码

.parent {
  container: layout inline-size;
}

@container (min-width: 400px) {
  .child {
    display: flex;
    flex-wrap: wrap;
  }
}

首先，您需要告诉父组件子组件需要更改大小（即 container: layout inline-size 部分）。接下来，您可以使用一种称为 @container 的新型查询，它将在元素的父元素宽度发生变化时进行检测。

Andy Bell 在 他的一系列优秀示例 中也指出，我们经常需要根据父元素的大小而不是浏览器窗口的宽度来更改元素，尤其是在排版方面。

最重要的是，使用容器查询，我们可以**上下文化**地设置排版！对我来说，这是**最需要的功能**，也是我一直希望拥有容器查询的原因。我们可以使用媒体查询并以此方式设置字体大小等，但是当您不知道元素最终将位于何处时，这不是理想的方法。现在有了容器查询，我们可以比以前更容易地进行有意义的类型调整。

这篇文章让我想起 Miriam Suzanne 做了一个优秀的 提案，您可以在其中了解更多关于容器查询的设计方式以及在此过程中遇到的各种问题。看到这样的文档，展示了 CSS 在公众面前得到改进，真是太棒了。

我个人认为，这是自 Grid 以来 CSS 最大的改进。它为我们日常解决的问题提供了各种优雅的解决方案。就在前几天，我想根据包装元素的宽度设置侧边栏中元素的类型时遇到了障碍。而且，如果没有引入一堆奇怪的技巧，这是不可能做到的！

容器查询不再是遥不可及的梦想。它们将留下来。

直接链接 →