html5 Up and Running 学习笔记（二）
三、第三方检测库以及解决相应浏览器不支持html5新特性的方案
1、Modernizr
1.1
Modernizr是一个基于MIT许可证发布的开源JavaScript类库，用于检测浏览器是否支持HTML5及css3新特性。
1.2 HTML5各API的检测示例：
Moderniz是自动运行的，只要放在<head>标签里就行。
<canvas>
if(Modernizr.canvas){
// 开始画些什么吧!
}else{
// 浏览器没有提供原生的canvas支持
// IE 需要第三方类库exploerecanvas支持（IE8及以下）
}
<canvas> 文本API
if(Modernizr.canvastext){
// 让我们画些文字吧！
}else{
// 浏览器没有提供原生canvas文本支持
// IE 需要第三方类库exploerecanvas支持（IE8及以下）
}
<video> 视频
if(Modernizr.video){
// 播放某个视频
}else{
// 浏览器不提供video原生支持
// 检查QuickTime 或 Flash可否顶上
}
视频格式（Modernizr不支持webM格式的检测）
if(Modernizr.video){
// 可以播放视频了，但播放哪一个格式呢？
if(Modernizr.video.ogg){
// 尝试在Ogg容器中使用Ogg Theora+Vorbis
}else if(Modernizr.video.h264){
// 尝试在MP4容器中使用H.264视频+AAC音频
}
}
本地存储
if(Modernizr.localstorage){
// window.localStorage存在
}else{
// 浏览器没有提供本地存储的原生支持
// 或许可以尝试使用Gears或者其他的第三方解决方案
}
Web Workers
if(Modernizr.webworkers){
// window.Worker存在
}else{
// 浏览器没有提供web worker的原生支持
// 也许可以尝试使用Gears或其他第三方解决方案
}
离线web应用
if(Modernizr.applicationcache){
// window.applicationCache 存在
}else{
// 浏览器没有提供原生的离线支持
// 也许可以尝试使用Gears或者其他第三方解决方案
}
地理位置
if(Modernizr.geolocation){
// 让我们找出你在哪？
}else{
// 浏览器没有提供原生的地理位置支持
// 也许可以尝试使用Gears或者其他第三方解决方案
}
输入框类型（只举一个例子）
if(!Modernizr.inputtypes.date){
// 浏览器没有提供<input type="date">原生支持
// 也许你需要自己用Dojo或JqueryUI来构造一个类似的控件
}
占位文本
if(Modernizr.input.placeholder){
// 也许你已经看到占位文本了
}else{
// 占位文本还不被支持，退而使用脚本解决方案
}
表单自动聚焦
if(Modernizr.input.autofocus){
// autofoucs 可以工作
}else{
// 浏览器不支持autofocus，退而采用脚本解决方案
}
微数据（暂不支持）
四、explorercanvas的使用方法（IE 8及以下不支持canvas的情况下使用explorercanvas类库）
在<head>标签中使用，如：
<head>
<meta charset="utf-8">
<title>html5</title>
<!--[if IE]>
<script src="excanvas.js"></script>
<![endif]-->
</head>
扫一扫
2436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
