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

正如我在一个非常相似的问题中提到的......

这是标准化功能的供应商前缀变得非常棘手的情况之一,因为您需要考虑不同浏览器的不同版本中不同功能的所有不同的前缀和/或前缀固定的实现.

多么满口.然后你必须结合这些的各种排列.真是太少了.

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

链接的问题是指动画而不是转换,这会产生明显不同的符号,但这两个特征都经历了类似的前缀过程AFAIK.话虽如此,这里是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被Firefox使用,包括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会错误地完全忽略此声明,而其他浏览器会将其应用得很好.