CSS转换和转换的前缀的正确组合是什么？ [英] What is the right combination of prefixes for CSS transitions and transforms?

问题描述

版本1：

$ b $

b

  -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; 
过渡变换.3s缓入; 
 
 -webkit-transform：rotateX（-30deg）; 
 -moz-transform：rotateX（-30deg）; 
 -ms-transform：rotateX（-30deg）; 
 -o-transform：rotateX（-30deg）; 
 transform：rotateX（-30deg）; 
  

我认为在转换属性上使用供应商前缀时，属性我想转换。

我真的找不到任何关闭。

解决方案

正如我在非常相似的问题 ...

这是标准化功能的供应商前缀变成非常有问题，因为您需要考虑不同版本的不同浏览器中不同功能的所有不同的前缀和/或前缀实施。

。然后你必须组合这些的各种排列。

。

简单来说，你需要找出每个浏览器的哪些版本需要为每个单独的属性添加一个前缀，

链接的问题指的是动画而不是导致显着不同的符号的转变，而是两个特征都经历类似的非预反应过程AFAIK。话虽如此，下面是来自caniuse.com的 2D变换和转换。

换句话说，只是因为一个浏览器的一个版本中有一个特征， t表示其他功能必须在同一版本的同一浏览器中加上前缀。例如，Chrome在未反斜杠转换（36）之前至少有十个主要版本（26），而Safari 仍需要转换的前缀。因此，你肯定必须有这个声明：

  transition：-webkit-transform .3s ease-进出; 
  

如果你绝对需要，你将必须覆盖甚至更老的版本， p>

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

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

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

  
  
  

  -ms-transform 带前缀仅由IE9使用; IE10和更高版本带有无前缀变换。但是为了优雅的降级，你可能想要保持你的 -ms-transform：rotateX（-30deg）; 声明 - 只是记住它不能转换为IE9不支援CSS转换或动画。




• -moz- transition




• -o-transition 和 -o-transform 由Opera使用，并包括12.00，然后在12.10中取反前缀，然后重新加前缀为<

>总而言之，根据caniuse.com提供的信息（我相信这些信息在大多数情况下是最新和准确的），您需要的所有前缀：

  -webkit-transition：-webkit-transform .3s ease-in-out; / * Chrome < 26， 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）; / *仅适用于IE9中的优雅降级，不能转换* / 
 -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轻松输入，转换.3s轻松输入; 
  

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

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

Version 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:

-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.

解决方案

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.

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:

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-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.

• -moz-transition and -moz-transform were used by Firefox up to and including 15, then unprefixed in 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.

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

-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.

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.

这篇关于CSS转换和转换的前缀的正确组合是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！