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

What would be the right way to prefix this CSS in order to cover the widest range of browsers and versions?

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

Version 1:

版本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);

Or version 2:

或版本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);

It appears to me that when using vendor prefixes on a transition property, I should also target the vendor prefixed attribute I want to transition.

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

I can't really find any closure to this.

我真的找不到任何关闭。

3 个解决方案

#1

As I mentioned in a 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.

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

The linked question refers to animations rather than transitions which results in significantly different notations, but both features went through similar unprefixing processes AFAIK. That being said, here are the compatibility tables from caniuse.com for 2D transforms and transitions.

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

In other words, just because one feature is prefixed in one version of one browser doesn't mean the other feature is necessarily also prefixed in the same version of the same browser. For example, Chrome unprefixed transitions at least ten major versions (26) before it unprefixed transforms (36), and Safari still requires prefixes for transforms. As a result, you're definitely going to have to have this declaration:

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

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

And if you absolutely need to, you will have to cover even older versions with the following:

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

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

Other browsers, miraculously, were able to unprefix both transitions and transforms (as well as animations) simultaneously, which makes things much easier:

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

-ms-transition is only used by pre-release versions of IE10, which have long since expired. No other version of IE uses prefixed transitions, so you should remove that particular transition prefix.

-ms-transition仅用于IE10的预发布版本，该版本早已过期。没有其他版本的IE使用前缀转换，因此您应该删除该特定转换前缀。

-ms-transform with the prefix is only used by IE9; IE10 and later ship with unprefixed transforms. But for the purposes of graceful degradation you may want to keep your -ms-transform: rotateX(-30deg); declaration — just keep in mind that it cannot be transitioned as IE9 does not support CSS transitions or animations.

带前缀的-ms-transform仅供IE9使用; IE10及更高版本随附未加前缀的转换。但是出于优雅降级的目的，您可能希望保留-ms-transform：rotateX（-30deg）;声明 - 请记住它不能转换，因为IE9不支持CSS转换或动画。
-moz-transition and -moz-transform were used by Firefox up to and including 15, then unprefixed in 16.

Firefox使用了-moz-transition和-moz-transform，包括15，然后在16中没有前缀。
-o-transition and -o-transform were used by Opera up to and including 12.00, then unprefixed in 12.10, then re-prefixed as -webkit- in later versions in its move to Blink.

Opera使用了-o-transition和-o-transform，包括12.00，然后在12.10中没有前缀，然后在以后的版本中重新加上前缀为-webkit-移动到Blink。

In summary, here are all the prefixes that you need, based on the information given by caniuse.com (which I trust to be current and accurate for the most part):

总之，以下是您需要的所有前缀，基于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);

The bare minimum that you will need to support the latest version of each browser as of this writing is:

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

        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);

As mentioned in the comments, you can use a tool like Autoprefixer to automate this for you based on the level of browser support you require. However, for those who prefer to write their CSS manually, or for those who are just wondering exactly which prefixes are needed by which browsers, this is it.

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

On a final note: notice the two unprefixed transition declarations in the above examples? Now, you'd think it'd be easy enough to just combine them into a single declaration like this:

最后说明：请注意上面示例中的两个未加前缀的转换声明？现在，您认为将它们组合成单个声明是很容易的，如下所示：

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

But, unfortunately, Chrome will erroneously completely ignore this declaration, while other browsers will apply it just fine.

但是，不幸的是，Chrome会错误地完全忽略此声明，而其他浏览器则会很好地应用它。

#2

As of right now, if you’re supporting the top-two newest versions of each browser, here are the prefixes you need:

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

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

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

So to answer your question, yes, the prefix-transition should target the prefix-transform. Pretty sure that is always true for transforms (although not necessarily for other properties. Flexbox and Gradients can be complex prefix-wise, I suggest you use Autoprefixer to keep those rules straight).

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

Also, my favorite way to figure out this kind of question is to go to a new Pen in CodePen, turn on Autoprefixer in the CSS settings, paste my code in, and compile it. Autoprefixer automatically adds prefixes for the top-two of each browser. Kinda magical!

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

#3

Ultimately, it's silly to make your web page load slower just to have support for older versions of auto-updating browsers. And, for IE, the ms prefix for animations is only used in pre-release versions. So, all any reasonable person needs is just support for webkiting transform for Safari.

最终，让网页加载速度变得更加愚蠢只是为了支持旧版本的自动更新浏览器。并且，对于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);

And Voilà: it has same IE compatibility as having all those heavy prefixes while maintaining support for the latest version of auto-updating browsers. IF you really feel it is necessary to provide support to that .001% of people who keep on delaying their browser updates, then just put a little message at the bottom of the screen that tells the user to click the update button in their browser if the page doesn't display properly.

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

#1