容器样式查询针对标准CSS属性失效问题咨询

问题重现 #

使用容器样式查询时，针对标准CSS属性的查询规则未生效，但自定义属性的查询可正常工作。测试环境为Chrome 128.0.6613.138。

HTML代码 #

<div class="parent">
  <div class="child">
    ...
  </div>
</div>

CSS代码 #

.parent {
  --test-var: red;
  background-color: grey;
}

@container style(background-color: grey)
/* @container style(--test-var: red) */
{
  .child {
    background-color:red;
  }  
}

现象：启用@container style(background-color: grey)时，.child的红色背景不生效；启用注释中的自定义属性查询时，样式正常应用。

问题原因 #

1. 计算值匹配要求：容器样式查询匹配的是属性的计算值，而非CSS中书写的声明值。grey是预定义颜色关键字，其计算值为rgb(128, 128, 128)（或十六进制#808080），直接使用grey作为查询条件无法匹配计算值。
2. 浏览器实现局限性：当前部分浏览器对标准属性的容器样式查询支持尚未完全成熟，尤其是关键字值的匹配逻辑存在缺陷，而自定义属性的匹配逻辑更简单直接，因此不受影响。

解决方案 #

方案1：使用属性的计算值作为查询条件 #

将查询条件替换为background-color对应的计算值：

@container style(background-color: rgb(128, 128, 128)) {
  .child {
    background-color: red;
  }  
}

或使用十六进制值：

@container style(background-color: #808080) {
  .child {
    background-color: red;
  }  
}

方案2：显式声明容器类型（可选） #

虽然块级元素默认具备容器查询能力，但显式声明容器类型可避免潜在的浏览器兼容性问题：

.parent {
  container-type: size; /* 或inline-size/block-size，根据需求选择 */
  --test-var: red;
  background-color: grey;
}

内容的提问来源于stack exchange，提问作者n247s