container
构成属性
此属性是以下 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 条件规则模块第五版 # 容器简写 |
浏览器兼容性
加载中…
另见
- CSS 容器查询
- 使用容器大小和样式查询
@container
at-rule- CSS
contain
属性 - CSS
container-type
属性 - CSS
container-name
属性 - CSS
content-visibility
属性