3

在我正在学习的课程中，我发现了以下内容（摘录）：

p.box{
-webkit-transition: border-radius 1s;
-moz-transition: border-radius 1s;
-o-transition: border-radius 1s;
-ms-transition: border-radius 1s;
transition: border-radius 1s;
}

p.rounded{
border-radius:50px;
}

但是，根据此表，使用其他浏览器特定前缀似乎没有意义，而不是-webkit-. 较新版本的 IE、FireFox 和 Opera 始终支持此属性，而旧版本则不支持。所以在我看来，以 , 开头的行-moz-无论如何-o-都-ms-不会影响页面显示。我可以——从现在开始——在 的情况下总是把这些排除在外transition吗？还是我误解了什么？还是表格不正确？

4

1 回答 1

2

Firefox 直到 v15 需要-moz前缀，而 Opera需要-o直到 v12（-ms在这种情况下，前缀毫无意义）*。因此，您说您可以删除这些前缀并且在所有浏览器的最新版本中看不到任何差异是正确的。但是，您可能会发现那些稍旧的版本仍然占任何特定站点的大量访问者。

我建议包括前缀，直到需要它们的浏览器版本已经成为过去。这样，您就知道他们只会占您访问者的一小部分。例如，不再值得包含以下前缀border-radius：Firefox 一直支持无前缀版本，一直到 v3.6，Chrome 从 v4 开始。

您可以使用Compass或Prefix free之类的东西（如果它们适合您的工作流程）来为您解决这个问题。

编辑- 我个人不使用无前缀，因为我分享了 OP 在使用 JavaScript 创建样式时并非绝对必要的犹豫。如果 SASS/Compass 不是一个选项，我推荐Sublime Text的 Prefixr 插件。这样，您只需要担心手动编写非前缀版本，但您仍然会在样式表中发送完全前缀版本。

* 这些统计数据来自CanIUse...，您只需单击兼容性表左上角的“显示所有版本”链接即可查看有关所有浏览器的信息。

于 2013-03-25T14:34:50.767 回答