@container 和 :has()：Chromium 105 中两种强大的全新自适应 API

Una Kravets

容器查询和 :has() 是在自适应天堂中进行匹配的。幸运的是，这两项功能都将在 Chromium 105 中推出。这是一个巨大的版本，包含两项备受期待的自适应界面功能！

容器查询：快速摘要

借助容器查询，开发者可以向父选择器查询其尺寸和样式信息，这样无论子元素位于网页上的什么位置，都可以拥有其自适应样式逻辑。

现在，开发者还可以查询页面内元素的大小，而无需依赖视口来获取可用空间等样式输入。此功能意味着组件拥有其自适应样式逻辑。这样一来，无论组件在页面上的显示位置如何，样式逻辑都会附加到该组件上，从而使该组件更加稳健。

使用容器查询

如需使用容器查询进行构建，您必须先在父元素上设置包含关系。您可以通过在父级容器上设置 container-type 来实现此目的。您可能会看到一张包含图片和一些文字内容的卡片，如下所示：

单个双列卡片。

如需创建容器查询，请在卡片容器上设置 container-type：

.card-container {
  container-type: inline-size;
}

将 container-type 设置为 inline-size 会查询父元素的内嵌方向尺寸。在英语等拉丁语言中，该值为卡片的宽度，因为文本从左到右以内嵌方式排列。

现在，我们可以使用该容器通过 @container 将样式应用于其任何子级：

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

:has() 父级选择器

借助 CSS :has() 伪类，开发者可以检查父元素是否包含具有特定参数的子元素。

例如，p:has(span) 表示段落 (p) 选择器，其中包含 span。您可以使用它为父级段落本身设置样式，或为其中的任何内容设置样式。一个实用示例是使用 figure:has(figcaption) 为包含字幕的 figure 元素设置样式。如需详细了解 :has()，请参阅 Jhey Tompkins 撰写的这篇文章。

容器查询和 :has()

您可以将 :has() 的父级选择能力与容器查询的父级查询能力相结合，创建一些真正动态的固有样式。

我们来扩展一下第一个示例，使用火箭卡片。如果您的卡片没有图片，该怎么办？您可能需要增大标题的大小，并将网格布局调整为单列，以便在没有图片的情况下看起来更有目的性。

卡片上显示较大的文字，但不含图片，并且以列的形式显示。

在此示例中，带图片的卡片采用双列网格模板，而不带图片的卡片采用单列布局。此外，不含图片的卡片的标题会更大。如需使用 :has() 编写此代码，请使用以下 CSS。

.card:has(.visual) {
  grid-template-columns: 1fr 1fr;
}

您要查找一个类为 visual 的元素，以便应用上述双列样式。另一个实用的 CSS 函数是 :not()。此规范与 :has() 属于同一规范，但存在时间较长，且浏览器支持更完善。您甚至可以结合使用 :has() 和 :not()，如下所示：

.card:not(:has(.visual)) h1 {
  font-size: 4rem;
}

在上面的代码中，您将编写一个选择器，用于为不包含 visual 类的卡片中的 h1 设置样式。通过这种方式，您可以非常清晰地调整字体大小。

综合应用

上面的演示展示了 :has()、:not() 和 @container 的组合，但当您可以在多个位置看到同一元素时，容器查询的确非常出色。我们来添加一些样式，并将这些卡片并排展示在网格中。

现在，您可以切实感受到现代 CSS 的强大功能。我们可以使用有针对性的样式编写清晰的样式，这些样式可在逻辑之上构建逻辑并创建非常强大的组件。这两项强大的功能已在 Chromium 105 中推出，并正在获得跨浏览器支持，对于界面开发者来说，这是一个令人兴奋的时刻！