calc()表达式含无效值时，height属性的实际取值是什么？

问题 #

我在CSS中定义了.terminal类，为height属性先设置了auto，再通过calc()结合自定义属性--terminal-line、--rows计算取值。原本@property定义的--rows缺少initial-value，未被正确注册，于是我修改@property使其支持<number>|auto并设置初始值为auto，测试显示看似有效，但我想确认：当该calc()表达式因包含auto而无效时，height属性的实际取值是被划掉的auto，还是其他默认值？

回答 #

当calc()表达式因包含auto而无效时，浏览器会直接忽略这个无效的calc()声明，此时height会回退到你之前设置的auto值——也就是开发者工具里看到的被划掉的那个auto，这是CSS层叠机制和无效声明回退的正常逻辑。

你修改后的@property定义是合理的，明确了--rows的取值范围包含auto。需要注意的是，当--rows取值为auto时，calc()会因为类型不兼容（auto是关键字，无法参与数值运算）而失效，这时浏览器就会采用更早声明的auto作为height的最终取值，完全符合你的预期。

内容的提问来源于stack exchange，提问作者jcubic