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

Posted 2023-03-06

【中文标题】CSS 3 - 过渡前缀 - 使用哪些？

【英文标题】：CSS 3 - transition prefixes - which ones to use?

【发布时间】：2012-12-29 00:58:56

【问题描述】：

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

This source 声明“您需要使用所有常用前缀才能使其在所有浏览器中都能正常工作（-o-、-webkit-、-moz-、-ms-）”。

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

在 Twitter Bootstrap 的代码中，除了不加前缀的版本之外，总是存在一个-webkit-、-moz- 和-o- 前缀的版本。

我应该使用什么前缀？

【参考方案1】：

http://caniuse.com/#search=transition 表示您需要现代浏览器的 -webkit- 和普通属性。

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

但是如果全部添加也没有问题，只要确保没有前缀的属性是最后一个即可。

编辑：正如下面评论中所说，如果您点击“所有版本”，您可以看到每个浏览器何时删除前缀。现在最好同时使用 -moz- 和 -o-。

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

2019 年编辑：不需要前缀，Autoprefixer 的需要越来越少，未来是美好的 :)

【讨论】：

+1 供 caniuse 参考。但是，如果您单击“显示所有版本”来查看所有版本，您会看到就在几个版本之前，Firefox 和 Opera 都带有前缀。因为这些不是那么旧，你也应该包括-moz- 和-o-。由于 IE 从不支持前缀版本，因此您不需要 -ms-。

在“显示所有版本”编辑后获得了我的投票。我的项目也会这样做。

【参考方案2】：

编辑：你不应该再需要任何前缀了。

只需使用transition。

---

到目前为止，所有供应商前缀都应用于 CSS3 过渡。例如，

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

【讨论】：

@ClaudiuCreanga 在撰写本文时，有一个适用于此的 IE 测试版。不过，IE 的主流版本都没有依赖 ms 前缀。已删除。

【参考方案3】：

我将在此违背常规并建议一种不同的方法：如果您的网站设置了分析功能，请检查浏览器统计信息和版本，并了解您的用户实际使用的是什么。

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

没有任何网站可以告诉你你需要的确切前缀，只有你可以从你自己的数据中找出这些信息。

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

【讨论】：

统计数据可能会撒谎。您可能只是有一个鸡与蛋的场景：浏览器 X 不使用我的网站，所以我不会在重新设计中支持它。使用 Browser X 的人不使用该网站的原因是当前的设计不支持 Browser X。

@cimmanon 也许我最后的陈述不够清楚；我提到支持 everyone 开始，然后监视浏览器统计数据并在之后删除不必要的前缀。另外，我怀疑有人会因为您停止支持 transitions 而停止使用网站，我们谈论的是不影响可访问性的纯装饰性功能。

我的评论更多的是警告。整个“仅使用您的统计数据作为指导”的建议已被抛出多年，尤其是在积极阻止浏览器或编写完全损坏的 javascript 导致网站无法使用的常见做法时。您可能希望该评论仅适用于网站的纯外观方面，但众所周知，人们会针对狭隘的情况扭曲完美的建议，并认为他们可以将其应用于一切，包括真正的功能。

【参考方案4】：

-webkit- only，当然还有不带前缀的版本。

所有其他浏览器要么使用无前缀属性（如 Firefox 或 Opera）移动，要么从未使用过它们（如 IE）

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

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

【参考方案5】：

这取决于您要使用的 CSS 属性。 Mozilla 在去除许多属性的前缀方面做得很好。但是你不能告诉 所有 属性现在都是无前缀的。我听到 Chrome 团队的消息，他们希望让渐变没有前缀。我不了解 Opera，但 Internet Explorer 10 需要 -ms 前缀用于许多 CSS3 属性。

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

【参考方案6】：

帮自己一个忙，下载Prefix Free。它是一个小巧的 JavaScript，可以让您使用几乎任何需要前缀的属性，而无需前缀（包括过渡、动画和媒体查询）。

编辑：所有这一切的唯一例外是 Opera 的媒体查询，其中像素比率（仅此而已）必须表示为分数而不是小数。

【讨论】：

感谢您的提示，但我为此使用了 Less Mixin。