@property不接受em单位的长度

Question

注意:由于支持表较差，MRE可能无法在某些浏览器中工作。

@property --width1 {
syntax: '<length>';
inherits: false;
initial-value: 20em;
}
@property --width2 {
syntax: '<length>';
inherits: false;
initial-value: 200px;
}
div {
margin: 30px;
height: 30px;
background: black;
color: white;
text-align: center;
}
#div1 { width: var(--width1); }
#div2 { width: 20em;          }
#div3 { width: var(--width2); }
#div4 { width: 200px;         }

<div id="div1">var(--width1) = 20em</div>
<div id="div2">20em</div>
<div id="div3">var(--width2) = 200px</div>
<div id="div4">200px</div>

在px中，div3的宽度与div4的宽度相同。

在em中，div2的宽度与预期一致。但是在div1中，就好像忽略了var(--width1)而将宽度设置为auto一样。var(--width1)有什么办法能像预期的那样工作吗?

Answer 1

从规格:

initial-value必须是计算独立的.

和

如果一个属性值可以仅使用该元素上的属性值转换为计算值，并且"全局"，则该属性值是计算独立的。CSS不能修改的信息。

在你的例子中，em依赖于font-size的值，所以它不是计算独立的