为什么要对 CSS 属性进行浏览器兼容性总结呢? 用的时候, 直接去 Can I Use 里面检索浏览器对该属性的兼容性情况不就好了吗?
css3.jpeg
其实, 在实际的开发过程中, 我们对常见的 css 属性兼容情况了然于胸, 才能极大的提高我们的开发效率, 写出可以进行优雅降级的代码. 这里并不是说一定要所有的 css 属性兼容情况都要背下来, 对于使用率较低的, 我们直接使用 Can I Use 进行检索.
边框:
border-radius: 最低兼容至 IE9, 其它浏览器兼容情况优良.
box-shadow: 最低兼容至 IE9, 其它浏览器兼容情况优良.
背景:
background-size: 最低兼容至 IE9, 其它浏览器兼容情况优良.
字体:
@font-face: IE9 及以上版本的 IE 浏览器, 支持引入任何格式的字体文件, 而在 IE9 之前的浏览器, 只支持引入 EOT 格式的字体文件. 其它浏览器兼容情况优良.
2D 转换:
transform: 最低兼容至 IE9(需要添加 - ms - 前缀), 其它浏览器兼容情况优良. 在 transform 属性前加入浏览器内核前缀是很好的实践. 不建议在 svg 元素上使用 transform 属性, 最新版本的 IE 并不支持这一使用方式.
3D 转换:
IE10 和 Firefox 支持 3D 转换. Chrome 和 Safari 需要前缀 -webkit-.Opera 仍然不支持 3D 转换, 它只支持 2D 转换.
过渡:
transition: 最低兼容至 IE10, 其它浏览器兼容情况优良. Safari 浏览器需要前缀 - webkit-, 其它大部分浏览器对此并未有前缀要求, 因此除了特殊情况, 可以不添加其它浏览器的前缀.
动画:
animation: 兼容情况与 transition 属性大致相同.
先暂时总结到这里了~点个收藏, 后续若有新的补充, 会继续更新~
来源: http://www.jianshu.com/p/355df41443a4