Question

是否有最新文档列出了转换和转换所需的以下前缀以及哪些浏览器版本？或者有人可以为我总结一下吗？

我是否需要使用所有这些进行转换？

    -webkit-transform: 
    -moz-transform: 
    -ms-transform: 
    -o-transform: 
    transform:

所有这些都是为了过渡？

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;

为了安全起见？

Answer 1

保持最新的前缀是一个永无止境的努力，人们可能想要承诺，或者像我一样，放弃为了更好/更容易的解决方案。

就个人而言，我来自那些将代码质量置于功能之上的硬核纯粹主义者。因此，我不能为任何内容添加前缀。

我知道这对于许多需要在尽可能多的机器上工作的情况是不可接受的 - 例如当您处理客户端项目时 - 并开始使用自动为CSS添加前缀的CSS预处理器用于支持指定机器集的代码（例如＆＃34;所有主要浏览器的最后5个版本＆＃34;或＆＃34; 90％市场份额＆＃34;）。这样，您的代码保持干净，您仍然有一个整齐的前缀生产文件。预处理器还可以做许多其他方便的事情;嵌套CSS和变量只是其中的两个。

还要对您的问题给出真正的答案：Can I use...是一种很好的服务，可以在给定的CSS属性上查看浏览器支持。它还告诉您哪个浏览器仍需要为属性添加前缀。

Answer 2

可能不是。您可能需要为此进行自己的浏览器测试。 Can I use可能是受支持的transforms和transitions的最新信息。为了安全起见，我会全部使用它们。如果您使用SASS或LESS，您可以创建一个mixin，让您的生活更轻松。

LESS

.transition (@transition) {
    -webkit-transition: @transition;  
    -moz-transition:    @transition;
    -ms-transition:     @transition; 
    -o-transition:      @transition;
    transition:         @transition;
}
.transform(@transform){
    -webkit-transform:   @transform;
    -moz-transform:      @transform;
    -ms-transform:       @transform;
    -o-transform:        @transform;
    transform:           @transform;
}

SASS

@mixin transition($transition...) {
    -moz-transition:    $transition;
    -o-transition:      $transition;
    -webkit-transition: $transition;
    transition:         $transition;
}

@mixin transform($transform) {
    -moz-transform:    $transform;
    -o-transform:      $transform;
    -ms-transform:     $transform;
    -webkit-transform: $transform;
    transform:         $transform;
}

CSS转换＆amp;前缀（例如-o-）的转换是必要的吗？

2 个答案: