是否有 CSS3 供应商前缀的浏览器兼容性弃用表？ [关闭]答案

【问题标题】：Is there a browser-compatibility deprecation table for CSS3 vendor prefixes? [closed]是否有 CSS3 供应商前缀的浏览器兼容性弃用表？ [关闭]
【发布时间】：2013-01-08 09:53:44
【问题描述】：

这里有没有人会发布一个网站，提供一个简洁的摘要，说明哪些供应商特定的 CSS3 扩展 - 例如。 -moz-border-radius - 仍然需要还是可以弃用？

据我所见，Chrome、Safari 和 Opera 的所有最新版本（忘记 IE，我现在的应用可以不用它）基本上都乐于使用没有供应商前缀的 W3C 属性。

【问题讨论】：

信不信由你，IE从未需要border-radius前缀。
!!!!。我经常想知道首先决定需要前缀的人的反常
前缀对于实验性或不合标准的实现很有用（在 Firefox 2 中尝试 -moz-border-radius 以了解我的意思），只是碰巧它们需要太长时间才能取消前缀......跨度>
是的，我现在明白了。我花了一些时间确定 Firefox 2 的版本
@BoltClock 背后的想法是，标准的实施对公司来说花费了太长时间，同时让开发人员清楚地了解标准的组成部分和不包含的部分。一个被强烈讨论/部分被误解的话题是 Hixie 概述了 HTML5 的最终推荐日期以及在 2022 之前由至少 2(!) 个浏览器完全实施！最早的 CSS 3 草案于 1999 年发布。正如 H. Sivonen 在博客文章中指出的那样，非标准元素（不仅仅是 CSS）的供应商前缀的想法可以追溯到 1998 年。hsivonen.fi/vendor-prefixes

标签： w3c css

【解决方案1】：

我建议使用CanIUse 网站来检查这一点。

简短的回答是，您需要为曾经使用过它们的所有内容添加供应商前缀 --- 需要注意的是，这取决于您希望支持旧浏览器版本的时间。

CanIUse 网站包含几乎所有您能想象到的浏览器功能以及几乎所有您想要支持的浏览器的浏览器支持表。它包括特定浏览器支持某项功能但需要供应商前缀的注释。

您可以使用这些表格自行决定哪些前缀值得保留，哪些可以删除。

既然你专门询问了border-radius，我们来看看它的支持表：http://caniuse.com/#search=border-radius

这告诉我们没有当前浏览器版本需要前缀。但是 Firefox 需要前缀到 v3.6，Chrome 到 4.0，Safari 到 4.0。 Mobile Safari (3.2) 和 Android Browser (2.1) 也出现在列表中。

如果您需要支持这些浏览器版本或更早版本，那么您需要前缀。否则，您可以在没有它们的情况下逃脱。

希望对您有所帮助。

【讨论】：

谢谢你，SDC。我不得不说，边界半径的信息是不正确的。我在 Firefox 13.0 上遇到了边框半径问题，发现我必须使用前缀。
真的吗？我会感到惊讶 --- 事实上，FF13 是他们删除对前缀版本的支持而只支持无前缀版本的版本。你不需要依赖 CanIUse —— 请参阅developer.mozilla.org/en-US/docs/CSS/border-radius Mozilla 自己的文档。引用：Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).

【解决方案2】：

他们也有书的形式，Peter Gasston 的 CSS3 之书，其中列出了所有 CSS3 浏览器支持的表格。不过我敢打赌那是你最不想找的东西......所以this maybe?

【讨论】：

谢谢。我怀疑我过去曾遇到过 caniuse，但它从来都不是我保留的东西 - 不过值得一试。促使我最初提出问题的原因是发现即使在其最新版本中，Firefox 也不喜欢 W3C 边界半径
确定是一件很奇怪的事情哈哈

【解决方案3】：

如果您只对前缀感兴趣，那么很棒的http://shouldiprefix.com/ 可能就是您要找的。p>

【讨论】：

【解决方案4】：

很好的问题 - 我找不到供应商前缀要求的全球参考。

我在 caniuse.com 上快速搜索了我在 my 项目中使用的供应商前缀属性，这是我发现的（截至 2013 年底）：

border-radius：不需要
box-shadow：不需要
box-sizing： -moz- 当前/未来的 chrome 需要
转换： 所有 chrome/webkit 浏览器都需要 -webkit-
渐变： -webkit- 当前的 android 浏览器和其他最新的浏览器需要
linear-gradient: -webkit- 当前的 android 浏览器和其他最近的浏览器需要盒子尺寸
输入占位符：不需要
背景剪辑：不需要
用户选择：所有人都需要

（注意：我将“不必要”定义为任何具有 1% + 全球使用率的浏览器都不需要）

请随意添加...

公共服务公告：
请记住，在使用供应商前缀属性时，它们应该总是出现在之前非供应商前缀属性：

例子：

textarea { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

【讨论】：

感谢您收集各种 CSS 属性的不同供应商前缀。最后提到非供应商/标准属性的属性顺序也做得很好。很多网站上的例子都弄错了。只是一个小补充，Webkit 的供应商前缀不是-web-kit-，而是-webkit-。我已经在编辑中解决了这个问题。

【解决方案5】：

最接近完整摘要的方法是使用Big JS-Compatibility-Table 制作您自己的选择性摘要，查看window.document.documentElement.style，该对象用于检测对特定CSS 功能的支持。

它将为您提供一个方便的动态表，其中包含所有受支持的 W3C CSS 属性，按浏览器，使用 camelCased CSS 关键字变体，并能够选择您要支持的浏览器。这个问题中的 still 会随着时间的推移而变化。

Big JS-Compatibility-Table 不是由@TobiasBuschor 制作的广为人知的资源，但非常方便。我经常使用这张表来检查各种属性或 API，或者与caniuse 数据进行交叉检查。

W3C 并未完全跟踪兼容性或实施者实际执行或发布的内容。浏览器制造商自己，也许除了 Opera，直到最近才很好地记录了这些东西。

用于确定哪些浏览器可以合理地弃用支持（通过删除需要它们的供应商前缀）。这将取决于给定网站的功能要求。

在撰写本文时，有些公认的约定是，可以弃用对任何不支持querySelector、localStorage 和addEventListener 的浏览器的支持。这意味着您可以放心地放弃对 Firefox 3.5、IE 8、Safari 3.2、Chrome 3、Opera Presto 10.1 以及以下所有版本的支持。

也就是说，现在删除供应商前缀还为时过早，尤其是因为数百万用户仍在使用 Android 2.x 或 4.3 设备，运行 Safari 4.x/5.x 级别 Android Stock浏览器或 Opera Mini (Presto 11)。这些占 2014 年全球浏览器使用量的 10% 左右。

在该类别中，border-radius 几乎是目前唯一可以安全删除的功能。虽然您可以选择放弃其他人，但如果您决定仅支持最新的浏览器。破坏与仍在大量使用的旧浏览器的兼容性的风险和责任由您自己承担。

这还需要好几年的时间，才能有意识地开始完全删除前缀。

【讨论】：

【解决方案6】：

这个问题你真的不需要。

如果您使用 gulp 或 grunt，您可以使用一个模块，该模块会根据您的目标（IE8、IE9、Chrome 30 等）自动为您的 css 添加前缀。

https://github.com/Metrime/gulp-autoprefixer

https://github.com/nDmitry/grunt-autoprefixer

【讨论】：

尽管有很多工具可以提供帮助，但知道它们究竟能帮助您做什么仍然很好。