在 polyfill 进行重大更新时，容器查询开始进入稳定版浏览器

Una Kravets
Gerald Monaco
Gerald Monaco
X GitHub

容器查询现已推出！

好消息 — 最受欢迎的开发者功能之一已开始在网络浏览器中推出！从 Chromium 105 和 Safari 16 开始，您现在可以在这些浏览器中创建基于大小的容器查询，并使用容器查询单元值。为了能够更轻松地使用基于大小的容器查询和 cq 单元，Chrome 的 Aurora 团队一直在努力更新 Container Query Polyfill，以支持更多浏览器和用例，让您可以放心地使用这一强大的功能。

什么是容器查询？

容器查询是一项 CSS 功能，可让您编写以父元素的特征为目标的样式设置逻辑，以设置其子元素的样式。您可以通过查询父项的尺寸，创建真正基于组件的自适应设计。与仅提供视口尺寸信息的媒体查询相比，此类信息更精细且更实用。

ALT_TEXT_HERE

借助容器查询，您可以编写可重复使用的组件，这些组件可以根据它们在页面中的位置以不同的方式显示。这使得它们在页面和模板中具有更大的弹性和响应速度。

使用容器查询

假设您有一些 HTML：

<!-- card parent -->
<div class=”card-parent”>
  <div class=”card>
     <!-- card contents -->
      …
  </div>
</div>

要使用容器查询，您首先需要在要跟踪的父元素上设置包含关系。为此，请设置 container-type 属性，或使用 container 简写形式同时设置容器类型和容器名称。

.card-parent {
  /* query the inline-direction size of this parent */
  container-type: inline-size;
}

现在，您可以使用 @container 规则根据最近的父项设置样式。对于上图所示的设计，其中一张卡片可能会从一列变为两列，请按如下方式编写代码：

@container (min-width: 300px) {
  .card {
    /* styles to apply when the card container (.card-parent in this case) is >= 300px */
    /* I.e. shift from 1-column to 2-column layout: */
    grid-template-columns: 1fr 1fr;
  }
}

为使父级元素容器更简洁明了，请为父级元素容器命名：

.card-parent {
  container-type: inline-size;
  /* set name here, or write this in one line using the container shorthand */
  container-name: card-container;
}

然后将先前的代码重写为：

@container card-container (min-width: 300px) {
  .card {
    grid-template-columns: 1fr 1fr;
  }
}

容器查询单元

为使容器查询更加实用，您也可以使用基于容器的单位值。下表显示了可能的容器单位值，以及这些值与容器大小的对应关系：

单位相对于
cqw查询容器宽度的 1%
cqh查询容器高度的 1%
cqi查询容器内嵌大小的 1%
cqb查询容器块大小的 1%
cqmincqi 或 cqb 的较小值
cqmaxcqi 或 cqb 的较大值

响应排版就是如何使用基于容器的单元的一个示例。基于视口的单位（例如 vh、vb、vw 和 vi）可用于调整屏幕上任何元素的大小。

.card h2 {
  font-size: 15cqi;
}

此代码会将字体大小设为容器内嵌大小的 15%，也就是说，随着内嵌大小（宽度）的增加，字体大小会增大，或者随着内嵌大小的减小而变小。为了进一步做到这一点，请使用 clamp() 函数为排版设置最小和最大大小限制，并根据容器大小相应地调整其大小：

.card h2 {
  font-size: clamp(1.5rem, 15cqi, 3rem);
}

现在，标头永远不会大于 3rem 或小于 .5rem，但它将占用容器的 15% 的内嵌大小。

此演示更进一步，更新了较宽的卡片，缩小了尺寸范围，因为它们采用 2 列视图呈现。

容器查询 polyfill

由于容器查询是一个非常强大的功能，因此我们希望您可以自如地将其整合到您的项目中，并且知道浏览器支持是其中的重要组成部分。因此，我们一直在努力改进 Container Query Polyfill。此 polyfill 提供以下方面的常规支持：

  • Firefox 69 及更高版本
  • Chrome 79 及更高版本
  • Edge 79 及更高版本
  • Safari 13.4 及更高版本

它在压缩后大小小于 9kb，并且结合使用 ResizeObserver 与 MutationObserver 可支持目前在稳定版浏览器中使用的完整 @container 查询语法：

  • 离散查询（width: 300px 和 min-width: 300px）。
  • 范围查询（200px < width < 400px 和 width < 400px）。
  • 属性和关键帧中的容器相对长度单位（cqw、cqh、cqi、cqb、cqmin 和 cqmax）。

使用容器查询 polyfill

要使用 polyfill，请将以下脚本标记添加到文档的标头中：

<script type="module">
  if (!("container" in document.documentElement.style)) {
    import("https://unpkg.com/container-query-polyfill@^0.2.0");
  }
</script>

您可能还希望使用服务根据 User-Agent 有条件地提供 polyfill，或者将其自托管到您自己的源。

为提供最佳用户体验，建议您最初仅将 polyfill 用于非首屏内容，并使用 @supports 查询暂时将其替换为加载指示器，直到 polyfill 准备好显示它为止：

@supports not (container-type: inline-size) {
  .container,
  footer {
    display: none;
  }

  .loader {
    display: flex;
  }
}

在速度足够快的网络和设备，或者原生支持容器查询的设备上，始终不会显示此加载指示器。

Polyfill 的新功能

更新后的 polyfill 支持：

  • 嵌套的 @container 规则。
  • 支持在 @supports 和 @media 查询下嵌套 @container 规则，反之亦然。
  • 有条件的 CSS（例如 @supports (container-type: inline-size)）会在 polyfill 加载后传递。
  • 全面支持 CSS 语法（在语法上有效的任何位置添加注释时，不会再出现任何问题）。
  • 垂直书写模式（通过书写模式）。
  • 查询条件、属性声明和动画关键帧支持容器相对单位（cqw、cqh 等）。 查询条件支持 rem 和 em。
  • 扩展容器查询语法： <ph type="x-smartling-placeholder">
      </ph>
    • 范围语法（例如 (200px < width < 400px)）。
    • 等式查询（例如 (width = 200px)）。
  • 伪元素，如 ::before 和 ::after。
  • 没有 :is(...)/:where(...) 的浏览器可通过可选的权宜解决方法获得支持
  • orientation 和 aspect-ratio 特征查询。
  • 根据功能正确过滤查询（例如，在水平写入模式下正确禁止在 container: inline-size 上查询 height）。
  • DOM 变更（例如，在运行时移除 <style> 和 <link> 元素）。
。

Polyfill 限制和警告

如果您使用的是容器查询 polyfill，需要注意以下几项缺失的功能：

  • 系统尚不支持 Shadow DOM。
  • @media 查询条件不支持容器相对单位（例如 cqw 和 cqh）。
    • Safari：15.4 之前的动画关键帧不支持容器相对单位。
  • 查询条件尚不支持 calc()、min()、max() 或其他数学函数。
  • 此 polyfill 仅适用于内嵌和同源 CSS。不支持跨源样式表和 iframe 中的样式表（除非手动加载 polyfill）。
  • layout 和 style 包含需要底层浏览器支持： <ph type="x-smartling-placeholder">
      </ph>
    • Safari 15.4 及更高版本
    • Firefox 目前尚不支持样式包含，但正在开发此功能。

警告

  • 为了防止影响 FID 和 CLS，即使第一个布局是同步加载的，polyfill 也无法保证何时会发生第一个布局，不过，它会尝试避免不合理的 LCP 延迟。换言之，首次绘制时绝不能依赖它。
  • 生成 ResizeObserver Loop Errors。原始 polyfill 也可以做到这一点，但值得注意。这是因为在对查询求值后，container-type: inline-size 的块大小可能会发生变化，但 ResizeObserver 无法告诉它我们不关心块大小的变化。
  • 此 polyfill 根据 Web 平台测试进行了测试，由于某些功能（如 JavaScript API）并未通过 polyfill，因此通过率会有意接近 70%，达到 70% 的通过率。
  • 有 2.23% 的用户使用版本低于以下版本的浏览器时，需要采用 :where() 权宜解决方法：
    • Safari 14
    • Chromium 88
    • Edge 88
    • 三星互联网 15
    • Firefox 78