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

在使用过渡属性的供应商前缀时，我认为我还应该针对我想过渡的供应商前缀属性进行定位。

我真的找不到任何解决办法。

- Jabba Da Hoot

---

@Mr.Alien 我不同意。这似乎是一个问题，“如果我为属性使用供应商前缀，我是否也需要为属性使用它？”这可以客观地回答。 - Scimonster

那么你尝试了一下，结果是什么呢？我怀疑一个需要前缀版本的 transform 的浏览器（有吗？）是否会接受未加前缀的 transition 属性，但我也不确定，你可以试试看！ - user663031

我认真地看了一遍，但我觉得可能是我漏掉了某些细节，或者我没有发现任何不同之处。 - Mr. Alien

@MrAlien 有所不同的是一个能工作，而另一个不能。问题是，哪一个？ - user663031

请看一下 Autoprefixer（https://github.com/postcss/autoprefixer）的功能。 - Felipe Skinner

Answer 1

正如我在非常相似的问题中提到的那样...

这是标准化特性使用供应商前缀的情况之一，变得非常棘手，因为您需要考虑不同浏览器版本中不同特性的不同前缀和/或取消前缀的实现。

简直就是一个绕口令。然后您还需要结合这些不同的排列组合。真是个大麻烦。

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

链接的问题涉及动画而不是过渡，因此表示方式会有显着不同，但是据我所知，这两种功能都经历了类似的去前缀过程。也就是说，以下是caniuse.com关于2D转换和过渡的兼容性表。

换句话说，仅因为一个功能在一个浏览器的一个版本中添加了前缀，并不意味着另一个功能在同一浏览器的同一版本中也必须添加前缀。例如，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 在 Firefox15 及之前的版本中使用，然后在16中取消前缀。

• -o-transition 和 -o-transform 在 Opera12.00 及之前的版本中使用，然后在12.10中取消前缀，随后在其转向 Blink 的后续版本中重新加上前缀 -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会错误地完全忽略这个声明，而其他浏览器则可以正常应用它。

- BoltClock

---

非常好的解释！非常感谢。这并不像大多数人想象的那样直截了当。 - Jabba Da Hoot

@Wessel Grift：因此，我非常感谢您发布这个问题。 - BoltClock

不幸的是，多个未添加前缀的 transition 属性声明会导致最后一个声明覆盖其他声明，无论其是否有效。在类似的问题中提到。 - tfE

抱歉，我的意思是“被识别”。 在相关的问题中提到了以下内容： transition: width 2s; transition: garbageProperty 2s; “如果您按照一个转换规则使用另一个转换规则（具有相同的前缀或没有前缀），第一条规则将被覆盖并且不再适用，即使第二条规则只有右侧列出的无效属性。” 在最新版本的Chrome，Opera和Firefox中进行了测试。该规则适用。 因此，我想到了您的建议： - tfE

@tfE：很好，我知道自己在做什么。 ;) - BoltClock

Answer 2

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

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

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

回答你的问题，是的，前缀转换应该针对前缀变换。我相信这通常适用于变换属性（虽然不一定适用于其他属性。Flexbox 和 Gradients 可以在前缀方面很复杂，建议使用 Autoprefixer来保持规则的一致性）。

此外，我发现解决这类问题最好的方法是在 CodePen中打开 CSS 设置的 Autoprefixer、粘贴代码并编译。Autoprefixer 会自动为每个浏览器添加顶部两个前缀。有点神奇！

- Timothy Miller

---

@torazaburo 这取决于你的浏览器支持情况。在我工作的网站上，仍有许多人使用旧版Android浏览器，这些浏览器仍需要-webkit-前缀，而且将其保留也不会有任何影响。但这也是我建议使用Autoprefixer的另一个原因，一旦你不再需要它们，它会自动删除前缀。 - Timothy Miller

谢谢，基本上就是@BoltClock所说的。 - Jabba Da Hoot

Answer 3

从根本上说，为了支持旧版本的自动更新浏览器而使网页加载变慢是很愚蠢的。而且对于IE来说，动画的ms前缀只在预发布版本中使用。因此，任何理智的人只需要支持Safari的webkit转换。

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

完成了：它具有与使用所有这些繁重前缀相同的IE兼容性，同时保持对最新版本的自动更新浏览器的支持。如果您真的觉得有必要为那些一直延迟浏览器更新的0.001％的人提供支持，那么只需在屏幕底部放置一条小消息，告诉用户如果页面无法正确显示，请单击其浏览器中的更新按钮。

- Jack G