检查和调试 CSS 容器查询

Sofia Emelianova
Sofia Emelianova

本指南介绍了如何在 Chrome 开发者工具的 Elements 面板中检查和调试 CSS 容器查询。

CSS 容器查询可让您根据元素的父级容器属性来操纵其样式。此功能将自适应设计的概念从“基于页面”转变为“基于容器”。

本指南中的屏幕截图来自此演示页面

发现容器及其后代

Elements 面板中,定义为查询容器的每个元素旁边都有一个 container 标记。该标志可切换容器及其后代的虚线叠加层。

如需切换叠加层,请执行以下操作:

  1. 打开开发者工具
  2. Elements面板中,点击定义为容器的元素旁边的 container 标记。

容器标志。

在此示例中,container-type: inline-size 属性定义容器元素。后代可以查询其内嵌维度(横轴),并根据容器的宽度更改其样式。

检查容器查询

Elements面板会在将 @container 查询声明应用于后代元素时(即容器满足查询条件时)显示这些声明。

如需了解何时可以检查此演示页面上的 @container 声明,请查看以下代码示例:

@container (inline-size > 400px) {
  .coffee p {
    display: block;
  }
}

@container (inline-size > 600px) {
  .coffee {
    display: grid;
    grid-template-columns: 280px auto;
  }

  .coffee h1 {
    grid-column: 1/3;
  }

  .coffee img {
    grid-row: 2/4;
  }

在此示例中,如果容器的宽度超过以下像素数,则应用相应的样式:

  • 超过 400px:段落 (p) 元素以块的形式显示在网页上 - 另起一行,占据整个宽度。
  • 超过 600px 个:后代采用水平网格布局,标题 (h1) 在顶部,图片 (img) 在左侧。

如需检查第一个 @container 声明,请执行以下操作:

  1. Elements面板中,将容器的宽度设置为 500px。系统会显示 p 元素。
  2. 选择 p 元素。在 Styles 窗格中,您可以看到 @container 声明以及指向父级容器 article.card 的链接。

    @container 声明。

  3. 请将宽度设为大于 600px,然后选择任何受影响的元素。观察实现水平布局的 @container 声明。

    更多 @container 声明。

查找容器元素

如需查找并选择导致查询生效的容器元素,请将鼠标悬停在 @container 声明上方的元素名称上,然后点击该元素名称。

将鼠标悬停在元素名称上。

将鼠标悬停在元素上时,相应名称会变为指向 Elements 面板中该元素的链接,并且 Styles 窗格会显示查询的属性及其当前值。

修改容器查询

若要调试查询,您可以在样式窗格中修改查询,就像修改任何其他 CSS 声明一样,如查看和更改 CSS 中所述。

在此示例中,容器的宽度为 500px。段落 (p) 元素出现在页面中。

  1. 选择 p 元素。在样式窗格中。您可以看到 @container (inline-size > 400px) 声明。
  2. inline-size400px 更改为 520px
  3. 段落 (p) 元素从页面中消失,因为它不满足查询条件。