您當前位置：首頁 > 互聯(lián)網(wǎng) > 怎么對HTML 5的特性做檢測？

怎么對HTML 5的特性做檢測？

來源：程序員人生發(fā)布時間：2014-11-19 08:19:14 閱讀次數(shù)：2512次

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

原文：Detect HTML5 Features

譯文：HTML5特性檢測

譯者：dwqs

隨著HTML 5的流行，現(xiàn)在HTML 5占據(jù)了主要的市場份額，HTML 5增加了很多的新功能，這些新功能可讓Web體驗變得更好。大多數(shù)特性在現(xiàn)代的主流閱讀器中取得了支持，因此我們可以放心使用這些新特性來增加Web體驗。但是，當有新版本的閱讀器發(fā)布時，我們不要忘記1些舊版本或老的閱讀器。

目前的另外1個事實是，用戶想用舊版本的閱讀器來支持新特性。因此建立的產(chǎn)品必須是跨閱讀器的，而我們唯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(關(guān)于其介紹，請戳：http://www.ido321.com/1069.html 文章被伯樂在線轉(zhuǎn)載：http://blog.jobbole.com/78876/)

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

到目前為止，這是我搜集的特性檢測的代碼列表。如果你有特性檢測的代碼想要在列表中分享，也能夠告知我。

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

這里涵蓋了Web開發(fā)，移動開發(fā)，Java等編程語言、綜合資訊、SEO等名博，博客收錄集地址：http://www.ido321.com/daohang/

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生