container

Baseline 已广泛支持

此特性已经非常成熟,可以在许多设备和浏览器版本上使用。自 2023 年 2 月起,所有主流浏览器均已支持。

container 简写 CSS 属性将元素设置为查询容器,并指定在容器查询中使用的包含上下文的名称和类型。

构成属性

此属性是以下 CSS 属性的简写:

语法

css
/* <container-name> */
container: my-layout;

/* <container-name> / <container-type> */
container: my-layout / size;

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

<container-name>

包含上下文的名称(区分大小写)。有关语法的更多详细信息,请参见 container-name 属性页面。

<container-type>

包含上下文的类型。有关语法的更多详细信息,请参见 container-type 属性页面。

正式定义

初始值作为简写中的每个属性
应用于所有元素
继承性
百分比作为简写中的每个属性
计算值作为简写中的每个属性
动画类型作为简写中的每个属性

正式语法

container = 
<'container-name'> [ / <'container-type'> ]?

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

<container-type> =
normal |
[ [ size | inline-size ] || scroll-state ]

示例

建立行内尺寸包含

给定以下 HTML 示例,它是一个包含图像、标题和一些文本的卡片组件

html
<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

创建容器上下文的显式方法是声明一个 container-type,带有一个可选的 container-name

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

container 简写旨在使这更容易在一个声明中定义

css
.post {
  container: sidebar / inline-size;
}

然后,您可以使用 @container 规则按名称定位该容器

css
@container sidebar (width >= 400px) {
  /* <stylesheet> */
}

规范

规范
CSS 条件规则模块第五版
# 容器简写

浏览器兼容性

另见