@property 不接受 em 单位的长度

Question

注意：由于poor support table，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

来自the specification：

initial-value 必须计算独立。

和

如果属性值可以仅使用元素上的属性值和 CSS 无法更改的“全局”信息转换为计算值，则该属性值在计算上是独立的。

在您的情况下，em 取决于 font-size 值，因此它不是计算独立