规则 at-container CSS
定义和用法
CSS @container
规则用于根据容器的大小或样式为其他元素定义样式。
样式声明会根据条件进行过滤,如果条件为真,则应用于容器。当容器的大小或样式值发生变化时,条件会被重新评估。
提示:在 CSS 中,容器是一个包含其他元素的元素,用于将它们分组以便进行样式设置。
实例
根据容器的大小或样式为其他元素定义样式:
.parent { container-name: myContainer; container-type: inline-size; } /* 如果 myContainer 的宽度小于 500 像素,则添加样式 */ @container myContainer (width < 500px) { .child { 宽度:50%; 边框:2 像素实线栗色; 背景颜色:鲑鱼色; } }
CSS 语法
@container containername (容器查询) { CSS 声明 }
属性值
值 | 描述 |
---|---|
containername | 可选。容器的名称。 |
容器查询 |
必需。要评估的条件。如果条件为真,则应用样式。 可以在 容器查询 中使用以下描述符:
|
浏览器支持
数字在表格中表示首个完全支持该 @ 规则的浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
105 | 105 | 110 | 16 | 91 |