《
各种主流浏览器对HTML5的兼容性分析》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302339432013.htm
表4 绘图标记canvas测试结果
音频播放标记audio
这项功效对Web开发人员来说十分强盛,咱们来看一下浏览器对sessionStorage跟所有测试的浏览器都实现了HTML5的本地客户端存储标记! 不外,可变高宽的圆角框,这里要提一下保险性,Web开发人员在使用这些元素时,要时刻谨记存储在客户真个数据可能会被受权应用浏览器的其余人查看甚至修正,所以须要留神保 存敏感信息。
--> [
网站建设之]各种主流浏览器对HTML5的兼容性分析
对于企业级Web利用来说,表单控件是最主要的页面元素之一。在HTML 5之前,各品种型的表单只能由开发人员通过庞杂的属性设置和限制前提(通过脚本盘算)来实现。制订中的HTML 5标准引入了一系列分类清楚、功能完美的表单控件标记,包括email、url、number、range、search、color等,还有表单属性autocomplete、autofocus等。这里供给一个简略例子,用户填写电子邮箱(自动检测格式正确与否)和个人主页(主动检测格式准确与否)等,而后提交给后盾系统:
图 1 主流浏览器分布图
绘图标志canvas
我们惊喜地看到,各种浏览器对canvas的支持度无比高,对IE8的限度,可以通过开源名目ExplorerCanvas来解决,只要要两步操作:
Firefox 4.0将开始支持email、url等表单元素; 自动填充已经作为很多浏览器的一项基本功能存在,与HTML 5标准的autocomplete属性需要差别开。
本文先容了一些主流浏览器对部分HTML5技术的兼容性,一言以蔽之——错落不齐,Web开发人员在尝试采用HTML5技术时,一方面会为其壮大的表示力而冲动,另一方面也会由于各浏览器的兼容性测试而懊恼,盼望本文可能让大家对几个要害技术的支持程度有基础的了解。
在Web 2.0的世界里,炫目标图形是必不可少的组成部分。HTML5引入的canvas元素支持Web开发人员通过JavaScript在页面上绘制线条、图形、增加文字和图像等。下面的代码片段在页面上简单绘制了一个蓝色矩形:
从图1 中可以看出, 微软的I n t e r n e tExplorer以其混搭的IE6、IE7、IE8、IE9等多个版本盘踞了榜首,开源浏览器Firefox紧随其后,其开放的系统构造也吸引了众多优良插件,并成为Web开发人员的主要开发调试平台。Google主推的Chrome青出于蓝,占领了第三名的地位。
表1 测试浏览器
这里有多少点需要注意:
包括js文件
因为目前市道上的浏览器品牌和版本繁多,我们难以笼罩全体产品,因而在这里设定测试浏览器的取舍准则为:主流品牌、主流版本和最新版本(正式发布)。根据StatCounter发布的2011年2~3月份浏览器市场占领率统计散布情况,主流品牌如图1所示,只收录首页之SEO解决方案。
video元素潜在地支持多种视频格式,包括:
这些视频格式在HTML5终极标准的接收水平目前还在各方博弈之中,不过浏览器已经开端抉择性地支持Video标记了。表2是兼容性测试结果。
有几点需要解释:
Web开发人员常常通过cookie治理客户信息,然而当数据量比较大时,这种方式绝对低效,一方面是因为cookie存在大小限制,另一方面每次都通过网络恳求来传递。HTML 5引入两种新的存储方法:
audio潜在地支持多种音频格式,包括Oggvorbis、MP3、AAC、wav等,不同浏览器对audio标记的支持程度表3所示。
停止语
图2 浏览器主流版天职布图
最 新宣布的I E 9 默认只支撑MP EG4(H.264编码)格局文件(支持硬件加速),假如安装了WebM/VP8插件,能够支持WebM视频格式。 Safari浏览器依附QuickTime做视频播放,所以Safari支持的视频格式与QuickTime一致。请注意:QuickTime在Mac机上是预装的,其默认支持的视频格式是MPEG4,但在Windows体系上QuickTime需要手动安装,也就是说在Windows上默认情形下Safari是不支持所有视频格式的,这一点需要Web开发人员懂得。 Firefox 4.0还将支持WebM格式。 Chrome已经发布不再支持MPEG格式的视频。 Video元素有一个preload属性,可能的值包含: Auto——当页面加载后载入全部视频; Meta——当页面加载后只载入元数据; None——当页面加载后不载入视频,
发现css中出现的bug以及修复方法教程。
各个浏览器对html5的兼容性不尽雷同,本文将分析各个主流浏览器对其的兼容性。在这里我们将综合两种HTML5兼容性测试工具包HTML5Test和Modernizr的测试结果来分析一下Web浏览器的支持程度。
localStorage——不时光制约的数据存储 sessionStorage——针对session的数据存储
因为存在包含关联,所以音频标记auido的情况根本与video的结果坚持一致,
发布站制作途径分析; IE8对video和audio标记都不支持,IE9刚引入这些元素; audio元素同样存在preload属性,注意正确设置属性值。
本地客户端存储
直接包含canvas元素或者动态创立它:
Form 2.0表单元素
表6 本地客户单存储测试结果
再加上部分最新浏览器版本,我们选取的全部浏览器(版本)如表1所示。
浏览器(版本)选取
HTML5兼容性剖析
下面的例子分辨使用LocalStorage和SessionStorge实现了简单计数器,结果如表6所示。
在HTML5技巧呈现之前,大局部Web视频播放是通过阅读器插件如Adobe Flash来实现,这请求客户在观看视频之前装置相应的组件。video标记的涌现使开发职员不再依附于特定第三方技术,下面的代码片断播放了一个视频文件,设定了画面的尺寸,并带有把持按钮(暂停/进度条等):
表5 部分表单元素测试结果
Canvas的测试成果如表4所示。
Tag:HTML5 兼容性 浏览器 HTML5 兼容性 浏览器
与视频标记vidio相似,音频播放标记audio也是HTML5尺度引入的元素,下面的代码播放了一段音频,带有节制按钮:
表2 视频标记video测试结果
表3 音频标记audio测试结果
Ogg——采用Theora视频编码和Vorbis音频编码的Ogg视频文件; MPEG4——采取H.264视频编码和AAC音频编码的MPEG 4视频文件; WebM——采用VP8视频编码和Vorbis音频编码的WebM视频文件。
斟酌到HTML5标准的制定原则:新特性基于HTML、CSS、DOM 以及 JavaScript;减少对外部插件的需要(比方Flash);独破于装备等,我们选取了HTML 5的几项重要特征来评估浏览器系统。
因为HTML5引入的表单控件、属性比拟多,这里选取了部门进行了测试,如表5所示。
Web开发人员应当依据网页的实际环境来挑选适合的预加载属性以到达较好的前端机能,友链交换注意事项。
几点阐明:
浏览器主流版本分布情况如图2所示。
视频播放标记video
视频播放标记video 音频播放标记audio 绘图标记canvas 表单控件标记url、email等 本地客户端存储
(责任编辑:网站建设)
各种主流浏览器对HTML5的兼容性分析相关文章