W3C CSS 使用 calc() 和供应商扩展的验证错误

W3C CSS validation error using calc() and vendor extensions

完成我的新 HTML5/CSS3 模板后,我开始进行 W3C 验证。

HTML的结果:"This document was successfully checked as HTML5!"

CSS的结果:"Sorry! We found the following errors (1)"

问题出在height: calc(100vh - 80px);

附近

它还告诉我:

36      Property -ms-transform is an unknown vendor extension
37      Property -webkit-transform is an unknown vendor extension
112     Property -webkit-transition is an unknown vendor extension
113     Property -moz-transition is an unknown vendor extension
249     Property -webkit-background-size is an unknown vendor extension
292     Property -webkit-background-size is an unknown vendor extension

所以在这种情况下,我应该怎么做才能使它 100% CSS3 有效?

不用担心供应商扩展。我不记得为什么会这样标记它们,但它们不是您的错误。我不记得这样做的原因。 iirc,有一个复选框可以忽略这些警告。

解释可能在于this article,其中指出:

Vendor-specific extensions (mostly) do adhere to the CSS 2.1 grammar, but since they are not defined in the CSS 2.1 specification, they are invalid. Hence the CSS validator is correct in reporting them as validation errors.

在过分担心供应商前缀之前,请查看 caniuse.com:

http://caniuse.com/#feat=calc

在这种情况下,可能是因为您不需要它们。也基于 w3 规范。

http://www.w3.org/TR/css3-values/#calc

关于 calc():

事实 W3C CSS validator reports errors when using calc() is a bug:

Support calc() from CSS3 Values(目前仍未修复)

关于供应商扩展:

它们的使用仅被列为 警告,而不是 错误

因此尽管使用了供应商扩展,您的 CSS 仍然有效。