对常见的css属性进行浏览器兼容性总结(推荐)

所属分类: 网页制作 / CSS 阅读数: 1764
收藏 0 赞 0 分享

为什么要对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属性大致相同。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多