Question

在我参加的课程中，我发现了以下内容（摘录）：

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;
}

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

Answer 1

Firefox直到v15需要-moz前缀而Opera需要-o直到v12（-ms前缀在这个例子中是无意义的）^*。所以，你说你可以删除这些前缀并且在所有浏览器的最新版本中看不到任何差异是正确的。但是，您可能会发现那些稍微旧一些的版本仍构成了对任何特定网站的大量访问者。

我建议包含这些前缀，直到需要它们的浏览器版本过去都很好。这样，您就知道他们只占您访客的极少数。例如，不再需要包含border-radius的前缀：Firefox支持非前缀版本，一直支持v3.6，Chrome支持v4。

您可以使用Compass或Prefix free之类的内容（如果适合您的工作流程）来为您处理此问题。

编辑 - 我个人并没有使用Prefix-free，因为我分享了OP在使用JavaScript创建样式方面的犹豫，而这并不是绝对必要的。如果SASS / Compass不是一个选项，我推荐the Prefixr plugin用于Sublime Text。这样，你只需要担心手工编写非前缀版本，但你仍然在样式表中发送一个完全预先固定的版本。

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

使用“-webkit-”以外的供应商特定前缀进行“转换”是否有任何意义？

1 个答案: