此处是否有人发布了一个网站,该网站提供了哪些供应商特定的CSS3扩展程序的简洁摘要 - 例如-moz-border-radius
- 仍然需要或可以弃用吗?
从我所看到的所有最近版本的Chrome,Safari和Opera(忘记IE,我可以在没有它的情况下使用我当前的应用程序)基本上很高兴能够使用没有供应商前缀的W3C属性。
答案 0 :(得分: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)也出现在列表中。
如果您需要支持这些浏览器版本或更早版本,则需要前缀。否则,没有它们就可以逃脱。
希望有所帮助。
答案 1 :(得分:4)
他们也有书籍形式,由Peter Gasston撰写的The Book of CSS3,其中包含列出所有CSS3浏览器支持的表格。但是我打赌这是你想要寻找的最后一件事......所以this maybe?
答案 2 :(得分:4)
很棒的问题 - 我找不到供应商前缀要求的全局参考。
我在caniuse.com上快速搜索了我在 my 项目中使用的供应商前缀属性,这是我发现的(截至2013年底):
-moz-
-webkit-
-webkit-
当前Android浏览器和其他近期-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+ */
}
答案 3 :(得分:4)
如果前缀是您感兴趣的,那么真棒http://shouldiprefix.com/可能正是您所寻找的。 p>
答案 4 :(得分:2)
最接近完整摘要的是使用Big JS-Compatibility-Table制作您自己的选择性摘要,查看window.document.documentElement.style,该对象用于检测对特定CSS功能的支持。
它将通过浏览器使用camelCased CSS关键字变体为您提供所有支持的W3C 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浏览器或Opera Mini(Presto 11)。这些占2014年全球浏览器使用量的10%左右。
在该类别中,border-radius
几乎是唯一一个非常安全的功能。如果您决定仅支持最新的浏览器,则可以选择删除其他浏览器。打破与旧版浏览器的兼容性将是您自己承担的风险和责任。
在您故意开始完全删除前缀之前,还需要几年的时间。
答案 5 :(得分:1)
你真的不需要为这个问题烦恼。
如果您正在使用gulp或grunt,您可以使用一个模块,该模块将根据您的目标(IE8,IE9,Chrome 30等)自动为您的CSS添加前缀。