CSS Style Container Query 怎么按自定义属性切换样式

CSS Style Container Query 适合把“组件采用哪种样式”交给父级自定义属性决定。核心写法是让父级携带状态，再用 @container style(--density: compact) 匹配这个状态；它检查的是容器的计算样式，不是浏览器视口宽度。style query 不需要先设置 container-type，但自定义属性必须真的落在被查询的祖先链上。

先把 Style Container Query 和宽度查询分开

@container (width 是 size query，依赖容器尺寸；@container style(--density: compact) 是 style query，依赖容器的计算样式。后者最适合组件主题、密度、布局模式这类“父级声明一个状态，后代自动换皮肤”的场景。

下面的例子让同一个卡片组件通过父级的 --density 切换间距。示例中的注释只解释关键边界，图示是静态说明图，不代表浏览器运行截图。

用可继承的自定义属性作为状态源

/* 父级负责声明组件状态，子孙元素可以继承它 */
.card-shell {
  --density: compact;
  --accent: #2563eb;
}

/* 默认值适用于没有命中任何 style query 的卡片 */
.card {
  padding: 24px;
  border: 1px solid #cbd5e1;
  color: #172033;
}

/* style() 读取最近祖先的计算样式，不读取 data-* 属性 */
@container style(--density: compact) {
  .card {
    padding: 12px;
    font-size: 14px;
  }
}

@container style(--density: spacious) {
  .card {
    padding: 28px;
    font-size: 16px;
  }
}

这里不需要给 .card-shell 加 container-type。style query 可以把普通元素作为 style container；查询规则会作用到匹配容器内部的后代。若状态写在更远的祖先上，只要属性正常继承，同样可以命中。

无值查询、带值查询和 @property 的边界

style(--density) 只判断这个自定义属性是否处于已设置状态；style(--density: compact) 则要求计算值匹配 compact。未注册属性不会替你把任意字符串转换成数字或颜色，带值查询通常应保持写入值和查询值的 token 一致。

如果状态是颜色，需要让浏览器按颜色类型比较不同写法，可以注册属性：

/* 注册后，等价颜色可以按  语义比较 */
@property --accent {
  syntax: "";
  inherits: true;
  initial-value: #2563eb;
}

.card-shell {
  --accent: blue;
}

@container style(--accent: #0000ff) {
  .card {
    /* 注册了颜色类型后，blue 与 #0000ff 可视为等价颜色 */
    border-color: var(--accent);
  }
}

对于数值区间，使用带比较运算符的 style query 更清晰，例如 @container style(--columns >= 3)；但两侧必须能解析为可比较的数值类型。不要把它和普通冒号语法混用。

不生效时按这张清单排查

常见问题

Style Container Query 一定要设置 container-type 吗？

不一定。只做 style query 时，普通元素也可以作为 style container；只有同时查询尺寸时，才需要为容器设置 container-type: inline-size 或 size。

为什么自定义属性明明存在却匹配不到？

优先检查它是否在目标元素的祖先链上、是否被无效声明回退，以及带值查询是否与未注册属性的原始 token 一致。

可以用 style query 替代所有 JavaScript 状态切换吗？

不能。它适合把已有的 CSS 状态传给后代；如果状态来自业务数据、异步请求或复杂交互，仍需要脚本设置属性，CSS 只负责呈现。

实际使用时，先用一个稳定的自定义属性表达组件状态，再选择无值或带值查询；只有确实需要类型化比较时才引入 @property。这样既能保持默认样式可用，也能把“状态从哪里来、规则为什么命中”留在清晰的继承边界内。