11

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

从我所看到的大体上看，所有最新版本的 Chrome、Safari 和 Opera（忘记 IE，对于我当前的应用程序我可以不用它）基本上都乐于使用没有供应商前缀的 W3C 属性。

4

6 回答 6

11

我建议使用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) 也出现在列表中。

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

希望有帮助。

于 2013-01-09T14:46:19.403 回答
4

他们也有本书的形式，Peter Gasston 的 The Book of CSS3，其中有列出所有 CSS3 浏览器支持的表格。但是我敢打赌那是你想要寻找的最后一件事......所以这可能吗？

于 2013-01-08T10:10:10.610 回答
4

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

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

  • 边界半径：不需要
  • 盒子阴影：不需要
  • box-sizing： -moz-当前/未来的 chrome 需要
  • 转换： -webkit-所有 chrome/webkit 浏览器都需要
  • 渐变： -webkit-当前的 android 浏览器和其他最近的浏览器需要
  • 线性渐变： -webkit-当前的 android 浏览器和其他最近的 box-sizing 需要
  • 输入占位符：不需要
  • 背景剪辑：不需要
  • 用户选择：所有人都需要

（注意：我将“不必要”定义为任何具有 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+ */
}
于 2013-12-21T16:58:29.713 回答
4

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

于 2014-07-15T18:23:52.420 回答
2

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

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

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 浏览器，或者歌剧迷你（Presto 11）。这些占 2014 年全球浏览器使用量的 10% 左右。

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

在您可以故意开始完全删除前缀之前，这还需要几年的时间。

于 2014-07-17T09:07:55.480 回答
1

你真的不需要理会这个问题。

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

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

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

于 2014-07-17T12:27:34.283 回答