程序员人生网站导航

怎么对HTML 5的特性做检测？

栏目：互联网时间：2014-11-19 08:19:14

原译文地址：http://www.ido321.com/1116.html

原文：Detect HTML5 Features

译文：HTML5特性检测

译者：dwqs

随着HTML 5的流行，现在HTML 5占据了主要的市场份额，HTML 5增加了很多的新功能，这些新功能可让Web体验变得更好。大多数特性在现代的主流阅读器中取得了支持，因此我们可以放心使用这些新特性来增加Web体验。但是，当有新版本的阅读器发布时，我们不要忘记1些旧版本或老的阅读器。

目前的另外1个事实是，用户想用旧版本的阅读器来支持新特性。因此建立的产品必须是跨阅读器的，而我们唯1能做的就是HTML5特性检测，来确保指定特性被阅读器支持时才履行代码。

Modernizr是1个非常好的JS库，它可以完成对HTML 5和CSS 3的特性检测。默许情况下，modernizr会对所有特性进行检测（固然可以自定义），但如果你只想检测某1个特定功能而不像引入全部JS库，那你就得把代码放在正确的位置。在这篇文章中，我们将会看到如何使用原生的js和modernizr来检测HTML 5 的特性。

Canvas

// JS return !!document.createElement('canvas').getContext; // Modernizr if (Modernizr.canvas) { }

Video

// JS return !!document.createElement('video').canPlayType; // Modernizr if (Modernizr.video) { }

Local Storage

// JS return 'localStorage' in window && window['localStorage'] !== null; // Modernizr if (Modernizr.localstorage) { }

Web Workers

// JS return !!window.Worker; // Modernizr if (Modernizr.webworkers) { }

Offline Web Application

// JS return !!window.applicationCache; // Modernizr if (Modernizr.applicationcache) { }

Geolocation

// JS return 'geolocation' in navigator; // Modernizr if (Modernizr.geolocation) { }

Placeholder Text

// JS var i = document.createElement('input'); return 'placeholder' in i; // Modernizr if (Modernizr.input.placeholder) { }

Form Autofocus

// JS var i = document.createElement('input'); return 'autofocus' in i; // Modernizr if (Modernizr.input.autofocus) { }

Microdata

// JS return !!document.getItems; // Modernizr does not provide support to detect Microdata

History API(关于其介绍，请戳：http://www.ido321.com/1069.html 文章被伯乐在线转载：http://blog.jobbole.com/78876/)

// JS return !!(window.history && history.pushState); // Modernizr if (Modernizr.history) { }

到目前为止，这是我搜集的特性检测的代码列表。如果你有特性检测的代码想要在列表中分享，也能够告知我。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

这里涵盖了Web开发，移动开发，Java等编程语言、综合资讯、SEO等名博，博客收录集地址：http://www.ido321.com/daohang/

------分隔线----------------------------

上一篇 How Many Processes Should Be Set For The Receiving Transaction Manager (RTM)

下一篇 可导一定连续，连续不一定可导

------分隔线----------------------------