container-name

基线 2023

语法

css

/* A single name */
container-name: myLayout;

/* Multiple names */
container-name: myPageLayout myComponentLibrary;

/* Global Values */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

值

<container-name>

用于标识容器的区分大小写的字符串。

适用以下条件

名称可以是任何有效的 <custom-ident>，但不能等于 default。
名称值不能加引号。
旨在表示作者定义的标识符（例如，--container-name）的虚线标识符是允许的。
允许用空格分隔的多个名称列表。

正式定义

初始值	`none`
应用于	所有元素
继承	否
计算值	`none` 或标识符的有序列表
动画类型	不可动画

正式语法

container-name = 
  none             |
  <custom-ident>+

示例

使用容器名称

假设以下 HTML 示例是一个带有标题和一些文本的卡片组件

html

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

要创建包含上下文，请在 CSS 中向元素添加 container-type 属性。以下示例创建了两个包含上下文，一个用于卡片元信息，另一个用于帖子摘录

注意：这些声明的简写语法在container页面中进行了描述。

css

.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

通过@container at-rule编写容器查询将在查询评估为true时将样式应用于容器的元素。以下示例有两个容器查询，一个仅应用于.post-excerpt元素的内容，另一个应用于.post-meta和.post-excerpt的内容。

css

@container excerpt (min-width: 400px) {
  p {
    visibility: hidden;
  }
}

@container (min-width: 400px) {
  p {
    font-size: 2rem;
  }
}

有关编写容器查询的更多信息，请参阅CSS 容器查询页面。

使用多个容器名称

您还可以使用空格分隔多个名称提供给容器上下文。

css

.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

这将允许您在@container at-rule中使用任一名称来定位容器。如果您想使用多个容器查询来定位同一个容器，其中任一条件都可能为真，这将非常有用。

css

@container meta (max-width: 500px) {
  p {
    visibility: hidden;
  }
}

@container card (max-height: 200px) {
  h2 {
    font-size: 1.5em;
  }
}

规范

规范
CSS Containment 模块级别 3 # container-name

浏览器兼容性

BCD 表格仅在浏览器中加载