CSS 3 - 过渡前缀 - 使用哪些?

问题描述 投票:14回答:6

我有一个关于转换的CSS供应商前缀的问题。

This source声明“你需要使用所有通常的前缀才能在所有浏览器中使用它们(-o-,-webkit-,-moz-, - ms-)”。

That page只显示-webkit--moz-前缀,并声称IE 10 +,FF 16+和Opera 12.1+可以读取前缀免费版本。

在Twitter Bootstrap的代码中,除了没有前缀的版本之外,总有一个-webkit--moz--o-前缀版本。

我应该使用什么前缀?

css css3 css-transitions transitions
6个回答
28
投票

http://caniuse.com/#search=transition说现代浏览器需要-webkit-和plain属性。

-webkit-transition: all .5s ease;
transition: all .5s ease;

但是如果你添加所有这些都没有问题,只要确保没有前缀的属性是最后一个。

编辑:如下面的评论中所述,如果您点击“所有版本”,您可以看到每个浏览器何时删除前缀。目前最好还使用-moz-和-o-。

编辑2015年5月:我强烈建议您使用Autoprefixer作为构建过程的一步(如Gulp / Grunt任务)或作为代码编辑器的插件。它在caniuse.com浏览器支持统计信息上提供自动前缀。


13
投票

Edit: You shouldn't need any prefixes anymore.

只需使用transition


截至目前,所有供应商前缀都应该用于CSS3过渡。例如,

-webkit-transition: all 500ms;
   -moz-transition: all 500ms;
     -o-transition: all 500ms;
        transition: all 500ms;

0
投票

帮自己一个忙,下载Prefix Free。这是一个微不足道的JavaScript,它允许您使用几乎任何需要前缀的属性,没有前缀(包括转换,动画和媒体查询)。

编辑:所有这一切的唯一例外是Opera的媒体查询,其中像素比(而不是其他)必须表示为分数而不是小数。


0
投票

这取决于您要使用的CSS属性。 Mozilla在摆脱许多属性的前缀方面做得很好。但你无法告诉所有属性现在都是免费的前缀。我听到Chrome团队的消息,他们想要使渐变无前缀。我不知道Opera,但Internet Explorer 10需要许多CSS3属性的-ms前缀。

我想说今天你应该只添加前缀。但未来不会是这样的!


0
投票

-webkit-当然,还有无前缀版本。

所有其他浏览器都移动了无前缀属性(如Firefox或Opera),或从未使用它们(如IE)

我建议您定期查看CanIUse.com以获取最新信息。

http://caniuse.com/#feat=css-transitions


0
投票

我将在这里反对并建议采用不同的方法:如果您设置了一个包含分析的网站,请检查浏览器统计信息和版本,并查看您的用户实际使用的内容。

当然,您可以删除大多数前缀,但如果您的用户使用的是过时的浏览器(无论出于何种原因),他们将无法获得这些功能。

没有任意网站可以告诉您所需的确切前缀,只有您可以从您自己的数据中找出该信息。

如果您没有数据,请添加所有前缀以支持尽可能多的人。然后在几个月内检查数据并在需要时进行重构。

© www.soinside.com 2019 - 2024. All rights reserved.