AI 摘要：本文探讨了如何通过 CSS 自定义属性和 @property 规则，实现嵌套容器中子元素使用外层容器的容器查询单位（如 cqw）而非默认的最近父容器，从而解决嵌套容器场景下的单位计算问题。

1. 问题背景
• 开发者 Matt Wilcox 指出：当存在嵌套容器时，容器查询单位（如 cqw）默认相对于最近的父容器计算，无法直接指定外层容器作为基准，导致布局设计受限。

2. 技术基础
• 容器查询（Container Queries）和容器单位（Container Units）是 CSS 的新特性，允许元素样式基于容器尺寸动态调整。
• 示例代码展示了嵌套容器（.outer-container 和 .inner-container）的结构，以及子元素 .inner-child 使用 20cqw 时默认相对于 .inner-container 计算的问题。

3. 尝试解决方案
• 失败方案 1：直接为 .inner-child 指定 outer 20cqw 语法无效。
• 失败方案 2：通过 CSS 变量传递 --s: outer 20cqw 同样不被支持。
• 部分成功方案：将变量 --s: 20cqw 定义在 .inner-container 中，但子元素继承时仍基于 .inner-container 计算。

4. 最终解决方案
• 使用 @property 注册自定义属性 --s，强制其继承并保留原始计算值（基于 .outer-container 的 20cqw），从而在子元素中正确应用。
• 代码示例：
@property --s {
syntax: '<length>';
initial-value: 0px;
inherits: true;
}

Frontend Masters

Using Container Query Units Relative to an Outer Container

Recently, Matt Wilcox posted on Mastodon: