当 calc() 的某个元素为无效值时，其结果是什么？

Question

在这个答案中我可以将 auto 值与 calc() 属性一起使用吗？作者说 auto 对于

calc()

表达式来说不是有效值。

好吧，好吧。但我遇到的问题是我有一个 CSS 自定义属性，我想给它一个默认值来取消

calc()

。

我拥有的是这个CSS：

.terminal {
    --terminal-line: calc(var(--size, 1) * (16px / var(--pixel-density, 1)) + 1px / var(--pixel-density, 1));
    height: auto;
    /* force size when user add --rows */
    height: calc((var(--terminal-line) * var(--rows)) + (var(--padding, 10) * 2px));
}

@property --rows {
    syntax: '<number>';
    inherits: true;
}

并且自定义属性缺少

initial-value

，并且根据 Google Dev Tools，它实际上并未注册。所以我添加了这个：

@property --rows {
    syntax: '<number> | auto';
    inherits: true;
    initial-value: auto;
}

这似乎按我想要的方式工作（在 Firefox 和 Chrome 中测试）。但问题是 Chrome 开发工具。

这就是该房产的样子：

看起来已经应用了高度。 Firefox 中也有类似的效果：

那么问题来了：当

calc()

无效时，height属性的实际值是多少？是删除线规则中的

auto

，还是值无效时的其他默认值？那是什么？我想确保我的代码是正确的。

Answer 1

这取决于它为什么无效。如果您在计算中确实使用“auto”值，则在计算级联时该值无效，并且它在级联结果中不起任何作用。所以使用的值是赢得级联的值。

但是，如果“auto”值来自自定义属性，则它是 “在计算值时间 (IACVT) 时无效”。这意味着它可以赢得级联，并且价值如 Bramus 在上面的链接中所解释的那样确定：

If the property is a non-registered custom property or a registered
custom property with universal syntax it gets replaced by the 
guaranteed-invalid value.

In all other cases the value becomes unset, whose outcome depends on
whether the property is allowed to inherit or not.

    If the property is allowed to inherit, it behaves as inherit, so
    it inherits the computed value from its parent.

    If the property is not allowed to inherit, it behaves as initial,
    falling back to the initial value.