使用供应商特定的前缀而不是"-webkit-" "transition"有什么意义吗?



在我正在学习的课程中,我发现了以下(摘录):

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的情况下总是忽略这些吗?还是我误解了什么?还是表错了?

Firefox在v15之前需要-moz前缀,Opera在v12之前需要-o前缀(在这种情况下,-ms前缀是没有意义的)*。所以,你说你可以删除这些前缀,而看不到所有浏览器的最新版本的任何差异,这是正确的。然而,你可能会发现那些稍微老一点的版本仍然构成了任何特定网站的相当数量的访问者。

我建议包括前缀,直到需要它们的浏览器版本完全过时为止。这样,你就知道他们只占你访客的一小部分。例如,不再值得为border-radius添加前缀:Firefox从v3.6开始一直支持无前缀版本,Chrome从v4开始支持无前缀版本。

你可以使用像Compass或Prefix free这样的东西(如果适合你的工作流程)来为你处理这个

Edit—我个人不使用Prefix-free,因为我分享OP在使用JavaScript创建样式时的犹豫,因为它不是严格必要的。如果SASS/Compass不能使用,我推荐Sublime Text的Prefixr插件。这样,您只需要担心手工编写无前缀的版本,但您仍然在样式表中发送一个完全带前缀的版本。

*这些统计数据来自CanIUse…,你只需要点击兼容性表左上角的链接,上面写着"显示所有版本",就可以查看所有浏览器的信息。

相关内容

  • 没有找到相关文章

最新更新