HTML5检测技术

有四种基本技术可以用于检测浏览器是否支持某种HTML5特性：

1、检测全局对象（诸如window或者navigator）是否拥有特定的属性；

2、创建一个元素，然后检测该元素的 DOM 对象是否拥有特定的属性。

3、创建一个元素，然后检测这个元素的 DOM 对象是否拥有特定的方法，同时调用这个方法并检查它的返回值。

4、创建一个元素，给这个元素的 DOM 对象设定特定的属性值， 然后检查浏览器是否保留了该属性值。

这是常见的自主检测的方法，不过现在没必要如此麻烦了，Moderniz是一个基于MIT许可证书发布的开源 Javascript 类库，用于检测浏览器是否支持 HTML5 及 CCS3特性。

加载后，直接使用可以检测你想检测的方法是否被浏览器所支持：

画布 检测：
[code]
if (Moderniz.canvas) {
// 哇塞，支持，好吧，那就画点儿啥吧。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

画布文字 检测：
[code]
if (Moderniz.canvastext) {
// 哇塞，支持，好吧，那就画点儿文字啥的。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

视频 检测：
[code]
if (Moderniz.video) {
// 哇塞，支持，好吧，那就播放个视频吧。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

视频格式 检测：
[code]
if (Moderniz.video) {
// 可以播放视频，但是播放哪一种格式呢？
if (Moderniz.video.ogg) {
// 尝试在Ogg容器中使用Ogg Theora+Vorbis
else{
//尝试在MP4容器中使用H.264视频+AAC音频
}
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

本地存储 检测：
[code]
if (Moderniz.localstorage) {
// 哇塞，支持window.localStorge。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

Web Workers 检测：
[code]
if (Moderniz.webworkers) {
// 哇塞，支持window.Worker。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

是否离线 Web 应用 检测：
[code]
if (Moderniz.applicationcache) {
// 哇塞，支持window.applicationCache。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

地理位置 检测：
[code]
if (Moderniz.geolocation) {
// 哇塞，支持navigator.geolocation。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

地理位置 检测：
[code]
if (Moderniz.geolocation) {
// 哇塞，支持navigator.geolocation。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

输入框检测：
HTML5新增了很多语义输入框标签，具体使用哪个就自己加，这里以date为例，常见的还有email，time，datetime，url，tel，range等
[code]
if (Moderniz.inputtypes.date) {
// 哇塞，支持type=date。
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

占位文字 检测：
[code]
if (Moderniz.input.placeholder) {
// 哇塞，这下search框的占位提示方便多了
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]

自动聚焦 检测：
[code]
if (Moderniz.input.autofocus) {
// 哇塞，不需要脚本实现了
} else {
// 晕，不支持，那只能想别的方法了。
}
[/code]