@属性 不接受 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：

The initial-value must be computationally independent.

和

A property value is computationally independent if it can be converted into a computed value using only the value of the property on the element, and "global" information that cannot be changed by CSS.

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