logo标签列表

CSS3供应商前缀的浏览器兼容性退化表是否存在？

w3ccss
11

有没有人能够发布一个网站，简洁地总结哪些供应商特定的 CSS3 扩展 - 例如 -moz-border-radius - 仍然需要或可以被弃用？

根据我所看到的，大多数最近版本的 Chrome、Safari 和 Opera（不考虑 IE，对于我的当前应用程序，我可以不用它）基本上都可以使用没有厂商前缀的 W3C 属性。

4
信不信由你，IE从来不需要为border-radius添加前缀。 - BoltClock
我经常想知道谁首先决定需要前缀的反常行为。 - DroidOS
3
前缀对于试验性或次标准的实现很有用（在 Firefox 2 中尝试 -moz-border-radius 就能理解这意味着什么），只是取消前缀需要太长时间。 - BoltClock
是的，我现在明白了。花了我一些时间才找到 Firefox 2 的一个版本。 - DroidOS
@BoltClock 这个想法的背后是，公司实施标准太慢了，同时也为开发人员提供了明确的标准范围。一个非常受关注/部分被误解的话题是 Hixie 对 HTML5 最终推荐日期和至少两个浏览器在 2022 年之前全面实现的概述！最早的 CSS 3 草案发布于 1999 年。正如 H. Sivonen 在博客中指出的那样，对于非标准元素（不仅限于 CSS），供应商前缀的想法可以追溯到 1998 年。https://hsivonen.fi/vendor-prefixes/ - Volker E.
显示剩余2条评论
6个回答
11

我建议使用CanIUse网站来进行检查。

简短的回答是你需要为曾经使用过前缀的所有内容添加供应商前缀，但这取决于您想支持旧版浏览器版本的程度。

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

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

由于您特别问了border-radius，让我们看一下它的支持表格：http://caniuse.com/#search=border-radius

这向我们展示，没有当前的浏览器版本需要前缀。但是Firefox需要前缀直到v3.6，Chrome需要前缀直到4.0，Safari需要前缀直到4.0。移动版Safari（3.2）和Android浏览器（2.1）也出现在列表中。

如果您需要支持那些浏览器版本或更早版本，则需要这些前缀。否则，您可以不使用它们。

希望能对您有所帮助。

谢谢，SDC。不过我必须说，关于border-radius的信息是不正确的。我在Firefox 13.0上遇到了border-radius的问题，发现我必须使用前缀。 - DroidOS
真的吗？我会感到惊讶 --- 实际上，FF13是他们删除支持前缀版本并仅支持未加前缀版本的版本。而且你不需要依赖CanIUse来做到这一点--请参见https://developer.mozilla.org/en-US/docs/CSS/border-radius，其中由Mozilla自己记录。引用：“注意：在Gecko 13.0（Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10）中删除了对前缀版本（-moz-border-radius）的支持。” - SDC
4

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

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

  • border-radius: 不必要
  • box-shadow: 不必要
  • box-sizing: 当前/未来chrome需要-moz-
  • transform: 所有chrome/webkit浏览器都需要-webkit-
  • gradient: 当前android浏览器和其他最近的浏览器需要-webkit-
  • linear-gradient: 当前android浏览器和其他最近的浏览器需要-webkit- box-sizing
  • input-placeholder: 不必要
  • background-clip: 不必要
  • user-select: 所有浏览器都需要

（注意：我将“不必要”定义为任何全球使用率超过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-”。我已经在编辑中进行了修正。 - Volker E.
4

他们也有书籍形式的版本，Peter Gasston的《CSS3之书》列出了所有CSS3浏览器支持的表格。然而，我敢打赌这不是你想要查找的最后一件事情……所以，也许这个会更有用？

谢谢。我怀疑我以前遇到过caniuse，但这从未是我所保留的东西 - 不过值得一做。引发我最初问题的是发现即使在其最新版本中Firefox也不喜欢W3C border-radius。 - DroidOS
这是一件非常奇怪的事情，哈哈。 - Jeremy
4
2
最接近全面的摘要是使用Big JS-Compatibility-Table自己制定选择性摘要，查看window.document.documentElement.style，该对象用于检测对特定CSS特性的支持。它将为您提供一个方便的动态表格，按浏览器使用camelCased CSS关键字变体列出所有受支持的W3C CSS属性，并具有选择目标浏览器以进行支持的能力。 仍需随时间变化而变化。 大型JS兼容性表不是@TobiasBuschor制作的非常知名的资源，但非常方便。我经常使用此表来检查各种属性或API，或与caniuse数据交叉检查。
W3C没有完全跟踪兼容性或实现者实际执行或发布的内容。直到最近，浏览器制造商本身（也许除了Opera）也没有很好地记录这些东西。
为确定是否可以弃用对某些浏览器的支持（通过删除需要它们的供应商前缀），这将取决于给定网站的功能要求。截至本文写作时，有点被接受的惯例是可以弃用不支持querySelector，localStorage和addEventListener的任何浏览器。这意味着您可以安全地放弃对Firefox 3.5、IE 8、Safari 3.2、Chrome 3、Opera Presto 10.1及以下版本的支持。
也就是说，现在删除供应商前缀还为时过早，特别是由于仍然有数百万用户使用运行Safari 4.x/5.x级别Android Stock浏览器或Opera Mini（Presto 11）的Android 2.x或4.3设备，它们占2014年全球浏览器使用量的约10％。
在该类别中，border-radius目前几乎是唯一一个相当安全放弃的功能。尽管您可以选择丢弃其他内容，但如果您决定仅支持最新的浏览器，则自担风险并破坏与仍然广泛使用的旧浏览器的兼容性的责任。
在完全删除前缀之前，还需要很多年的时间。
1
尽管有很多工具可以帮助你，但仍然很重要知道它们究竟是如何帮助你的。 - Matijs
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接