武汉web培训
达内武汉中心

15827352908

热门课程

主流浏览器对于CSS3与HTML5支持情况

  • 时间:2016-05-25 10:26
  • 发布:blueday
  • 来源:web前端网

CSS3与HTML5的推出,也让各种浏览器的兼容性成了许多设计师关心的问题,本文以表格形式排列了目前主流浏览器对于CSS3与HTML5支持情况。

支持 CSS3 和 HTML5 的浏览器越来越多,甚至包括最新版的 IE,当然,所谓支持仅仅是部分支持,因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。

需要指出的是,即使同一个浏览器的同一个版本,在 Mac 和 Windows 两个平台,它们对 CSS3 和 HTML5 的支持也并不一致。本文是一份 Chrome, Safari, Firefox, Opera, IE 5 大浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种功能的详细支持情况清单。

CSS3 属性

可以看出,全盘支持 CSS3 属性的浏览器有 Chrome 和 Safari,而且不管是 Mac 平台还是 Windows 平台全支持。

CSS3 选择器

除了 IE 家族和 Firefox 3,其它几乎全部支持。Chrome,Safari,Firefox 3.6,Opera 10.5 成绩最好 。

HTML5 Web 应用

Safari 对 HTML5 Web 应用的支持最好,除了地理定位功能,其它都支持

HTML5 网页内嵌对象

这应该是 HTML5 最令人期待的东西,内置的画布,视频,音频等对象。全部支持的有 Chrome,Safari,Firefox 3.6,Opera 10.5。IE家族则全军覆没。

HTML5 音频编码

Opera 10.5 支持的最全面,IE 家族又是颗粒无收。

HTML5 视频编码

H.264 任重道远。

HTML5 各种表单对象

Mac 平台下的 Chrome 成绩最佳。这些表单对象让人想起了桌面程序。

HTML5 表单对象属性与行为

又一次想到了桌面程序。

结论

目前,对 CSS3 和 HTML5 支持最好的是 Safari,Chrome 次之,Firefox 3.6 和 Opera 10.5 旗鼓相当,IE家族最差。鉴于这种情况,假如你想使用这两项新技术创建一个先锋体验式站点,现在的 CSS3 和 HTML5 可以让你实现,假如你希望这个站点能被绝大多数人正常访问,现在还为时过早,折中的方案是,为不支持 CSS3 和 HTML5 某些功能的浏览器提供降级方案,当然,其中要涉及到很多问题,包括浏览器,版本,平台的探测,CSS Hack 等等大量工作,相信是得不偿失的。

不过目前IE9已经出来了,对html以及css3的兼容性表现的相当好:

如果把IE5、6、7、8、9都加起来,说IE是最多人使用的浏览器,应该当之无愧,不过比较多人用不代表IE的浏览器显示是正确的,虽然多数正义一直是网络上最常见的真理,但遇上了HTML5、CSS3、还有那个不知道会不会变成标准的WebM,这个多数暴力完全发挥不了效用。

IE7(左侧)显然是拿枪自裁。IE6(右侧)这根本已经不知道原型是啥了,难怪波提狮会哭哭

不久前,小姜曾写过一篇用小叮当测试各家浏览器CSS3支持的文章,那是日本的Pure CSS Design的网页,由神人ShopDD制作。所谓的Pure CSS指的是不使用任何一张图片,纯粹用DIV背景色、切边、圆角、阴影等CSS语法来「画出」一个图形,因为整个页面都是用CSS来「画」的,所以当浏 览器对CSS的支持不佳,很容易就会让最后的成品变成一个神秘的外星图像,之前小姜介绍的哆啦A梦 小叮当 Pure CSS网页就是一例,可以看到IE8的哆啦A梦简直是整形失败。

IE8(最右侧)的结果真的有机器猫的感觉,坏掉的那种~ XD

或许因为制作这样的东西,可以展现一定程度的CSS控制技术与知识,所以台湾这边也有能人YIJEN制作 "波提狮" (Pon De Lion)的Pure CSS页面,这次还多使用了@font-face(外部文字定义)的技术,援引网络字型来让页面呈现的文字更美观,更加入了keyframes Animate的动画效果,让波提狮摇摇尾巴(仅支持使用 Webkit核心的Chrome & Safari),想要看看各种浏览器效果的读者可以到Live Demo网页一瞧究竟。
上一篇:武汉web培训:ie与ff的区别总结
下一篇:jQuery图片放大查看细节效果

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊