是否已经可以编写没有前缀的“transform”css属性？

Question

HTML5动画现在被广泛使用，但开发人员不得不使用硬件动画函数的包装器来编写跨浏览器应用程序。像“transform”这样的简单函数应该写成：

.foo {
  -webkit-transform: (10%, 20%); 
       -o-transform: (10%, 20%); 
     -moz-transform: (10%, 20%);
      -ms-transform: (10%, 20%); 
}

但是某些浏览器可能会产生并且确实会对未知和其他特定于平台的CSS属性产生警告。可以通过发送特定于浏览器的CSS来修复它。

BUT。你会如何建议写

.foo {transform: (10%, 20%)}

适用于所有支持的浏览器。现在是否已经可以用一个标准的非前缀属性来编写它？

Answer 1

您一直在搜索-prefix-free。

  

-prefix-free允许您在任何地方仅使用未加前缀的CSS属性。它在幕后工作，将当前浏览器的前缀添加到任何   CSS代码，仅在需要时才使用。

Answer 2

这取决于浏览器。通常box-shadow和border-radius是前缀安全的。下图是你的答案。

Answer 3

简答：不。我认为最佳实践（在支持方面）是编写每个供应商前缀以及W3C起草的属性，如下所示：

    .foo {
  -webkit-transform: translate(10%, 20%); 
  -o-transform: translate(10%, 20%);
  -moz-transform: translate(10%, 20%);
  -ms-transform: translate(10%, 20%); 
  transform: translate(10%, 20%);

/*The working draft requires values as transform-functions like transform(), not just
value pairs as shown in the question*/

}

前缀属性本质上是开发功能，不一定稳定，你不必过分担心那里的标志，因为浏览器通常会禁用它无法读取的属性。现在只需检查您的网页是否在不同的浏览器上中断。希望最终的规范能够在不久的将来出现，然后你就可以取出带有前缀的声明了。同时，您可以跟踪工作草案here。