使用容器查询标准 CSS 属性

Question

我尝试让容器样式查询工作，但发现了一些奇怪的地方。 考虑以下代码：

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;
  }  
}

上述 css 规则不应用 'child-style'，尽管这应该遵循有关此功能的 MDN 文档。 使用自定义属性上的查询（即通过使用注释的 css 查询），事情按预期/记录工作（使用 chrome 版本 128.0.6613.138 等进行测试）。

也许这个功能还没有准备好以这种方式使用。 但如果我错过了什么，我很想知道。

提前致谢！

添加了 jsfiddle 如果有人想尝试一下。

Answer 1

在父元素上使用

container-type

。

.parent {
  container-type: inline-size;
}

这应该可以正常工作。