浏览器支持检测

 Modernizr库，不详讲
复制代码

canvas

• 即使浏览器支持 canvas API，它也不一定支持 canvas text API，检测 canvas 同时还要检测 canvas text API

function supports_video() {return !!document.createElement('canvas').getContext
}
复制代码

video

• 不支持video标签的浏览器会自动忽略，开发者需要用flash等技术替代
• 检测技术来检测浏览器支持的视频格式

function supports_video() {if (!document.createElement('video').canPlayType) return false;// 常用几种视频格式，每一项是需要传给canPlayType函数的参数const videoTypes = ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"','video/ogg; codecs="theora, vorbis"','video/webm; codecs="vp8, vorbis"',]const v = document.createElement("video");const res = {}videoTypes.forEach(item => {const _key = item.match(/\w+(?=\;)/)[0];res[_key] =  v.canPlayType(item);})return res
}<!--"probably"：浏览器能够支持该格式视频；-->
<!--"maybe"：浏览器可能能播放该格式视频；-->
<!--""（空字符串）：浏览器不能播放该格式视频。-->运行结果：
{"mp4":"probably","ogg":"probably","webm":"probably"}
复制代码

本地存储

如果浏览器支持 HTML5 存储，那么全局的window对象将会有一个localStorage属性；否则该属性将会是undefined的,但是老版本火狐有个bug，如果 cookie 被禁用，会抛出异常
复制代码

function supports_local_storage() {try {return 'localStorage' in window && window['localStorage'] !== null;} catch(e){return false;}
}
复制代码

表单

1. H5新增了多项表单的type值，检测支持type程度

function supports_input_type(type){if(typeof type !== 'string') return false<!--创建一个空表单元素-->const i = document.createElement('input')<!--为表单设置类型，如果支持就会显示对应的表单，如果不支持则默认type 为text-->i.setAttribute('type', type)如果传进来的为text类型，则返回支持，不然判断设置的type生效没，如果没生效 i.type 就会变为默认的text， 说明不支持return type === 'text' ? true : i.type !=='text'
}复制代码

2. 检测placeholder、autofocus属性的兼容性

function supports_input_placeholder() {var i = document.createElement('input');return 'placeholder' in i;
}function supports_input_autofocus() {var i = document.createElement('input');return 'autofocus' in i;
}
复制代码

History API

“HTML5 history API 提供了一组标准函数，使得我们可以通过脚本维护浏览器历史。这个 API 的一部分——历史导航——在早期版本的 HTML 里面已经实现了。HTML5 新增加的部分是，增加浏览器历史的条目，响应用户使用后退按钮访问浏览器历史等等。这意味着 URL 现在仍然可以作为当前资源的唯一标识符，甚至在全部由脚本构成的应用程序中也是这样（这里是说，对于无需整页刷新的 AJAX 程序，URL 一般不能准确的标识出当前资源，因为你的页面不是整页刷新，URL 不会随着显示内容的不同而有不同。但是使用了 history API，我们就可以解决这一问题）。”

摘录来自: DevBean. “Dive Into HTML5 中文版。” iBooks.

function supports_history_api() {return !!(window.history && history.pushState);
}
复制代码

地理位置

function supports_geolocation() {return !!navigator.geolocation; //  注意是navigator
}
复制代码

其他通用模式

• Web Workers

function supports_web_workers() {return !!window.Worker;
}
复制代码

• applicationCache

function supports_offline() {return !!window.applicationCache;
}
复制代码