容器

基线 2023

新功能

自 2023年2月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法使用。

**容器** 简写 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

示例

建立内联大小包含

给定以下 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 (min-width: 400px) {
  /* <stylesheet> */
}

规范

规范
CSS 包含模块级别 3
# container-shorthand

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅