CSS Transform & Transition 哪些前缀(例如 -o-)是必要的？

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代码添加前缀，以支持一组指定的机器(例如"所有主要浏览器的最新5个版本"，或者"90%的市场份额")。这样，您的代码将保持整洁，并且您仍然拥有一个带有整洁前缀的生产文件。预处理器还可以做许多其他方便的事情;嵌套CSS和变量只是其中的两个。

要给你的问题一个真正的答案:Can I use…是一个很好的服务，用于查看浏览器对给定CSS属性的支持。它还告诉您哪个浏览器仍然需要属性的前缀。

Answer 2

可能不会。您可能需要对此进行自己的浏览器测试。Can I use可能是关于支持的转换和转换的最新信息。为了安全起见，我会把它们都用上。如果你正在使用SASS或LESS，你可以创建一个mixin来使你的工作更轻松。

少

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