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

Question

完成新的HTML5 / CSS3模板后，我继续进行W3C验证。

HTML的结果：＆＃34;此文档已成功检查为HTML5！＆＃34;

CSS的结果：＆＃34;抱歉！我们发现了以下错误（1）＆＃34;

问题出在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有效？

Answer 1

不要担心供应商扩展。我不记得为什么他们被标记为这样，但他们不是你的错误。我不记得它的原因。 iirc，有一个忽略这些警告的复选框。

解释可能在this article，其中指出：

  

特定于供应商的扩展（大多数）确实遵循CSS 2.1语法，   但由于它们没有在CSS 2.1规范中定义，因此它们是   无效。因此，CSS验证器在报告时是正确的   验证错误。

Answer 2

在担心供应商前缀过多之前，请查看caniuse.com：

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

在这种情况下，可能是因为您不需要它们。基于w3规格也是如此。

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

Answer 3

关于calc()：

使用calc() W3C CSS validator时is a bug报告错误的事实：

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

关于供应商扩展：

它们的使用仅列为警告，而不是错误。

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