Question

为了覆盖最广泛的浏览器和版本，为CSS添加前缀的正确方法是什么？

版本1：

-webkit-transition: -webkit-transform .3s ease-in-out;
   -moz-transition:    -moz-transform .3s ease-in-out;
    -ms-transition:     -ms-transform .3s ease-in-out;
     -o-transition:      -o-transform .3s ease-in-out;
        transition:         transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

或版本2：

-webkit-transition: transform .3s ease-in-out;
   -moz-transition: transform .3s ease-in-out;
    -ms-transition: transform .3s ease-in-out;
     -o-transition: transform .3s ease-in-out;
        transition  transform .3s ease-in-out;

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg);
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在我看来，在转换属性上使用供应商前缀时，我还应该定位我想要转换的供应商前缀属性。

我真的找不到任何关闭。

Answer 1

正如我在very similar question ...

中提到的那样

这是标准化功能的供应商前缀变得非常有问题的情况之一，因为您需要在不同版本的不同浏览器中考虑不同功能的所有不同前缀和/或前缀固定的实现
     多么满口。然后你必须结合这些的各种排列。什么少数。

简而言之，您需要弄清楚每个浏览器的哪个版本需要为每个属性添加前缀，除非您不介意膨胀，否则您需要为各个浏览器应用不同的前缀。

链接的问题是指动画而不是转换，这会产生明显不同的符号，但这两个特征都经历了类似的前缀过程AFAIK。话虽如此，以下是caniuse.com对2D transforms和transitions的兼容性表格。

换句话说，仅仅因为一个功能在一个浏览器的一个版本中加上前缀并不意味着另一个功能必须也在相同浏览器的同一版本中加上前缀。例如，Chrome无前缀转换至少十个主要版本（26）之前它没有前缀变换（36），而Safari 仍然需要转换前缀。因此，您肯定必须拥有此声明：

transition: -webkit-transform .3s ease-in-out;

如果您绝对需要，则必须使用以下内容覆盖旧版本：

-webkit-transition: -webkit-transform .3s ease-in-out;

其他浏览器奇迹般地能够同时修复转换和转换（以及动画），这使事情变得更容易：

-ms-transition仅用于IE10的预发布版本，该版本早已过期。没有其他版本的IE使用前缀转换，因此您应该删除该特定转换前缀。
带有前缀的
-ms-transform仅供IE9使用; IE10及更高版本随附未加前缀的转换。但是出于优雅降级的目的，您可能希望保留-ms-transform: rotateX(-30deg);声明 - 请记住它不能转换，因为IE9不支持CSS转换或动画。
-moz-transition和-moz-transform，包括15，然后在16中没有前缀。
-o-transition和-o-transform，包括12.00，然后在12.10中未加前缀，然后在以后的版本中重新加前缀为-webkit-

总之，以下是您需要的所有前缀，基于caniuse.com提供的信息（我相信这是大多数时候最新且准确的）：

-webkit-transition: -webkit-transform .3s ease-in-out; /* Chrome < 26, Safari < 7 */
   -moz-transition:    -moz-transform .3s ease-in-out; /* Firefox < 16 */
     -o-transition:      -o-transform .3s ease-in-out; /* Opera < 12.10 */
        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
    -moz-transform: rotateX(-30deg);
     -ms-transform: rotateX(-30deg); /* Only for graceful degradation in IE9, cannot be transitioned */
      -o-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

在撰写本文时，您需要支持每个浏览器的最新版本的最低要求是：

        transition: -webkit-transform .3s ease-in-out; /* Chrome 26-35, Safari, Opera 15-23 */
        transition:         transform .3s ease-in-out; /* IE10+, Firefox 16+, Chrome 36+, Opera 12.10 */

 -webkit-transform: rotateX(-30deg);
         transform: rotateX(-30deg);

如评论中所述，您可以使用Autoprefixer之类的工具根据您需要的浏览器支持级别为您自动执行此操作。但是，对于那些喜欢手动编写CSS的人，或者那些只想知道哪些浏览器需要哪些前缀的人来说，就是这样。

最后一点：注意上面例子中两个没有前缀的transition声明？现在，您认为将它们组合成一个单独的声明就足够了：

transition: -webkit-transform .3s ease-in-out, transform .3s ease-in-out;

但不幸的是，Chrome will erroneously completely ignore this declaration，而其他浏览器也会很好地应用它。

Answer 2

截至目前，如果您支持每个浏览器的前两个最新版本，以下是您需要的前缀：

-webkit-transition: -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out;

-webkit-transform: rotateX(-30deg);
transform: rotateX(-30deg);

所以要回答你的问题，是的，前缀转换应该以prefix-transform为目标。很可靠对于转换总是如此（虽然不一定适用于其他属性.Flexbox和Gradients可能是复杂的前缀，我建议您使用Autoprefixer来保持这些规则的正确性。）

另外，我最喜欢的解决这类问题的方法是转到CodePen中的新笔，在CSS设置中启用Autoprefixer，粘贴我的代码并编译它。 Autoprefixer自动为每个浏览器的前两个添加前缀。有点神奇！

Answer 3

最终，让您的网页加载速度变得更加愚蠢只是为了支持旧版本的自动更新浏览器。并且，对于IE，动画的ms前缀仅用于预发布版本。因此，所有合理的人都需要支持Safari的webkiting转换。

transition: transform .3s ease-in-out;
/*you can put -webkit-transform below, but that will only waste space*/
transition: -webkit-transform .3s ease-in-out;

transform: rotateX(-30deg);
-webkit-transform: rotateX(-30deg);

和Voilà：它具有与所有这些重型前缀相同的IE兼容性，同时保持对最新版本的自动更新浏览器的支持。如果你真的觉得有必要为那些继续推迟浏览器更新的人提供支持，那么只需在屏幕底部放一条消息，告诉用户点击浏览器中的更新按钮。页面无法正常显示。

CSS转换和转换的前缀的正确组合是什么？

3 个答案: