css - 什么是 CSS 过渡和转换前缀的正确组合？

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 中提到的...

This is one of those cases where vendor prefixes for standardized features become extremely problematic, because you need to account for all the different prefixed and/or unprefixed implementations of different features in different versions of different browsers.

What a mouthful. And then you have to combine various permutations of these. What a handful.

In short, you need to figure out which versions of each browser requires a prefix for each of the individual properties, and unless you don't mind the bloat, you will need to apply the prefixes differently for individual browsers.

链接的问题指的是动画而不是过渡，这会导致明显不同的符号，但是这两个功能都经历了类似的取消前缀过程 AFAIK。话虽这么说，这里是来自 caniuse.com 的 2D transforms 的兼容性表。和 transitions .

换句话说，仅仅因为一个功能在一个浏览器的一个版本中有前缀并不意味着另一个功能在同一浏览器的同一版本中也一定有前缀。例如，Chrome 无前缀转换在无前缀转换 (36) 之前至少转换了十个主要版本 (26)，而 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 被 Firefox 使用到并包括 15，然后在 16 中取消了前缀。

• -o-transition 和 -o-transform 被 Opera 使用到 12.00，包括 12.00，然后在 12.10 中取消前缀，然后重新前缀为 -webkit- 在其移动到 Blink 的后续版本中。

总而言之，根据 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 ，而其他浏览器会很好地应用它。