CSS 参考

Appearance

container-name ​

container-name 属性定义容器查询的名称。

语法 ​

css
container-name: <custom-ident> | none;

常见值 ​

值说明示例
<custom-ident>容器名称container-name: my-container
none无容器container-name: none

示例 ​

基础用法 ​

css
/* 定义容器名称 */
.container {
  container-name: my-container;
}

/* 多个容器名称 */
.container {
  container-name: card sidebar;
}

高级用法 ​

css
/* 定义容器 */
.card-container {
  container-name: card;
}

/* 查询容器 */
@container card (min-width: 600px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

/* 响应式布局 */
@container card (min-width: 800px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* 卡片布局 */
@container card (min-width: 1000px) {
  .card {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

浏览器兼容性 ​

浏览器版本
Chrome105+
Firefox110+
Safari16.1+
Edge105+
iOS Safari16.1+
Android Browser105+
Chrome for Android105+

注意事项 ​

  • container-name 属性用于定义容器查询的名称
  • 容器名称可以在 @container 规则中引用
  • 可以定义多个容器名称，用空格分隔
  • none 表示没有容器查询

相关属性 ​

相关资源 ​