五大主流浏览器 CSS3 和 HTML5 兼容性大比拼

简介: 您可能还喜欢   让人眼花缭乱的 HTML5 和 JavaScript 效果 使用 CSS3 可以实现的五种很酷很炫的效果 九个让人难以置信的HTML5和JavaScript实验 推荐18个基于 HTML 5 Canvas 开发的图表库 29款基于 HTML5 Canvas 开发的网页游戏     各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准。

您可能还喜欢

 

 

  各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善,曾经让多少前端开发人员心碎的IE系也开始拥抱标准。就在前几天,W3C的 HTML5 社区领袖 Shelley 宣布,HTML5的开发工作已经接近完成,如果进展顺利,HTML5 将在 2012 年正式成为国际标准。

  当然,即使标准正式制定了,现代浏览器要普及到大部分用户也是需要一个相当漫长的过程。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点,需要对各个浏览器对这两种新技术的支持情况有一个全面了解。本文是一份IE,Chrome,Firefox, Safari,Opera五大主流浏览器,在 Mac 和 Windows 两个平台,对 CSS3 和 HTML5 各种特性支持情况的详细清单。

CSS3 属性

  从表中可以看出,CSS Transforms 3D 还没有浏览器支持,除此之外的其它属性在 Windows 平台,Chrome 和 Safari 全部支持,其次支持比较好的是 Opera 和 Firefox,曾经一片红叉的 IE 开始迎头赶上。在 Mac 平台 Safari 仍然表现优异,其次是 Firefox 和 Opera。

CSS3 选择器

  最让人高兴的就是这张表了,除了 IE 9 以下的版本,其它浏览器已全部支持 CSS3 选择器,包括 IE 9 和 将在明年发布的 IE 10。

HTML5 Web 应用程序

  从表中可以看出,除了客户端数据库 IndexDB 和 触控(Touch)事件外,其它特性 Chrome 和 Safari 都全部支持,微软还得加油啊。(更新:经验证 Chrome 10 和 Firefox 4 已支持 IndexDB,Firefox 4 也已支持 WebSocket,不过由于安全原因默认是不开启的,我们可以通过 about:config 重新启用 WebSocket,只需启用 network.websocket.override-security-block 选项即可。)

HTML5 图形和内嵌内容

  这应该是 HTML5 最令人期待的东西了,内置画布,视频,音频,SVG,WebGL等对象。全部支持的有 Chrome,Firefox,还有 IE 9,很惊讶吧。

HTML5 音频编码

  Chrome 又是全部支持,Safari 除Ogg Vorbis 外全部支持,IE 9 开始支持 MP3 和 AAC。

HTML5 视频编码

  还是 Chrome 最厉害,包容天下,不知道 H.264 能否成为统一的视频编码标准,期待。

HTML5 表单对象

  这些浏览器中最淡定的要数 Opera 了,那么多年了市场份额都没什么大变化。在 Windows 和 Mac 平台,Opera 对 HTML5 表单对象全部支持,IE 家族全军覆没。

HTML5 表单属性

  IE 又一次全军覆没,Opera 依然全部支持,其次是 Safari,Chrome,Firefox。

结论

  目前,对 CSS3 和 HTML5 支持最好的是 Chrome,Safari 次之,Firefox 和 Opera 旗鼓相当,IE 9开始拥抱标准。鉴于这种情况,假如你想使用这两项新技术创建一个先锋体验式站点,现在的 CSS3 和 HTML5 可以让你实现,假如你想大规模应用于实际项目,现在还为时过早。

您可能还喜欢

 

 

编译来源:梦想天空(分享前端开发技术、资源和教程)

数据来源:http://www.findmebyip.com/litmus

编写参考:各大浏览器 CSS3 和 HTML5 兼容速查表

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
html兼容性怎么优化
html兼容性怎么优化【2月更文挑战第11天】
24 5
|
2月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
3月前
|
移动开发 JSON JavaScript
全网最详细教写可视化面板(js、css3、html5)
全网最详细教写可视化面板(js、css3、html5)
21 0
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
28天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
2月前
|
移动开发 前端开发 JavaScript
html兼容性
html兼容性
19 4
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
24 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
27 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5基础
H5+CSS3+JS逆向前置——HTML1、H5基础
28 0
|
3月前
|
移动开发 JavaScript 前端开发
如何处理html5新标签的浏览器兼容问题?
如何处理html5新标签的浏览器兼容问题?
17 0