當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5系列四（特征检测、Modernizr.js的相关介绍）

發(fā)布時間：2025/5/22 HTML 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5系列四（特征检测、Modernizr.js的相关介绍）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Modernizr:一個HTML5特征檢測庫

Modernizr幫助我們檢測瀏覽器是否實現(xiàn)了某個特征，如果實現(xiàn)了那么開發(fā)人員就可以充分利用這個特征做一些工作

Modernizr是自動運(yùn)行的，無須調(diào)用諸如modernizr_init()之類的初始化方法

Modernizr的官網(wǎng)地址http://modernizr.com/

在官網(wǎng)首頁你就可以下載modernizr.js（它分兩個版本Development和Production版本。其實它們都會導(dǎo)向同一個下載頁面，只不過前者會幫我們把選項預(yù)先勾上而已。）

當(dāng)我把下載的modernizr.js引用到頁面中時（這時我什么也沒做），看如下的圖片就知道m(xù)odernizr.js是自執(zhí)行的

使用了Modernizr后，頁面中渲染后的html代碼是這個樣子的：

其中有很多以no作為前綴的class，當(dāng)然大部分都沒有這個前綴。事實上，如果一個類名以no作為前綴，比如?no-touch?這表示瀏覽器不支持touch特性

modernizr還有一個test頁面，大家可以在自己的瀏覽器里面打開這個test頁面看看瀏覽器對于html5和css3的支持情況（據(jù)我所知chrome應(yīng)該是對html5和css3支持最好的一個瀏覽器）

test頁面的地址http://modernizr.github.io/Modernizr/test/index.html

HTML5特征檢測（分別介紹使用JS原生方法檢測及使用modernizr類庫檢測）

- 檢測瀏覽器是否支持canvas API

/**@desc:檢測瀏覽器是否支持canvas API*/function supports_canvas() {return !!document.createElement('canvas').getContext;} if (Modernizr.canvas) {//support} else {//not support}

- 檢測瀏覽器是否支持canvas 文本API

//瀏覽器支持canvas API并不意味著支持canvas文本API（原因是繪制文本的函數(shù)是后來才被納入規(guī)范中）/**@desc:檢測瀏覽器是否支持canvas 文本API*/function supports_canvas_text() {if (!supports_canvas()) {return false;}var dummy_canvas = document.createElement('canvas');var context = dummy_canvas.getContext('2d');return typeof context.fillText == 'function';} if (Modernizr.canvastext) {//support} else {//not support}

- 檢測瀏覽器是否HTML5的video

/**@desc:檢測瀏覽器是否HTML5的video*/function supports_video() {return !!document.createElement('video').canPlayType;} if (Modernizr.video) {//support} else {//not support}

- 檢測視頻格式

//檢測視頻格式/**@desc:檢測Mac 和iPhone支持的受專利保護(hù)的格式*/function supports_h264_baseline_video() {if (!supports_video()) {return false;}var v = document.createElement('video');return v.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');}/**@desc:檢測被Mozilla Firefox和其它一些開源瀏覽器支持的開放視頻格式*/function supports_ogg_theora_video() {if (!supports_video()) {return false;}var v = document.createElement('video');return v.canPlayType('video/ogg;codecs="theora,vorbis"');}/**@desc:WebM（一種開源的視頻編碼格式）檢測被Chrome FireFox Opera支持的開放視頻格式*/function supports_webm_video() {if (!supports_video()) {return false;}var v = document.createElement('video');return v.canPlayType('video/webm;codecs="vp8,vorbis"');} if (Modernizr.video) {//可以播放視頻格式但播放哪種格式的呢if (Modernizr.video.ogg) {} else {if (Modernizr.video.h264) {} else {if (Modernizr.video.webm) {}}}} else {//not support}

- 檢測瀏覽器是否支持本地存儲

/**@desc:檢測瀏覽器是否支持本地存儲*/function supports_local_storage() {return ('localStorage' in window) && window['localStorage'] != null;} if (Modernizr.localstorage) {//support} else {//not support}

- 檢測瀏覽器是否支持web worker

/**@desc:檢測瀏覽器是否支持web worker*/function supports_local_storage() {return !!window.Worker;} if (Modernizr.webworkers) {//support} else {//not support}

- 檢測瀏覽器是否支持離線web應(yīng)用

/**@desc:檢測瀏覽器是否支持離線web應(yīng)用*/function supports_offline() {return !!window.applicationCache;} if (Modernizr.applicationcache) {//support} else {//not support}

- 檢測瀏覽器是否支持地理定位

/**@desc:檢測瀏覽器是否支持地理定位*/function supports_geolocation() {return !!navigator.geolocation;} if (Modernizr.geolocation) {//support} else {//not support}

- 檢測瀏覽器是否支持占位文本

/**@desc:檢測瀏覽器是否占位文本*/function supports_input_placeholder() {var i = document.createElement('input');return 'placeholder' in i;} if (Modernizr.input.placeholder) {//support} else {//not support}

- 檢測瀏覽器是否支持web worker

/**@desc:檢測瀏覽器是否支持自動聚焦*/function supports_input_autofocus() {var i = document.createElement('input');return 'autofocus' in i;} if (Modernizr.input.autofocus) {//support} else {//not support}

還有很多，這里就不一一介紹了，總之，通過上面的特征檢測可以知道，用modernizr.js更加方便，使用原生的方法相對來說會要復(fù)雜一些。

細(xì)說modernizr.js

Modernizr幫助我們檢測瀏覽器是否實現(xiàn)了某個feature，如果實現(xiàn)了那么開發(fā)人員就可以充分利用這個feature做一些工作，反之沒有實現(xiàn)開發(fā)人員也好提供一個fallback。

舉例來說，當(dāng)我們引入了Modernizr.js類庫后，?<html>?標(biāo)簽的class屬性就會被相應(yīng)的賦值，以顯示瀏覽器是否支持某類CSS屬性。比如在IE6下面，不支持boderradius特性，那么在?<html>?標(biāo)簽中就會出現(xiàn)?no-borderradius?類，我們可以做一些fallback的工作：

.no-borradius div{/*-- do some hacks here --*/ }

上面我們已經(jīng)介紹了，檢測瀏覽器是否支持某項特性，我們可以用這種語法：

Modernizr.featuretodetect

再舉一個通常的例子

一般我們都會這樣加載jQuery類庫，先從Google CDN上拿，如果沒拿到再加載本地的。

Modernizr.load()根據(jù)一些條件判斷來動態(tài)選擇加載CSS和JavaScript，這無疑對避免不必要的資源加載有極大的幫助。

那么上面的例子可以用Modernizr.load寫成如下所示

Modernizr.load([{load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',complete: function () {if ( !window.jQuery ) {Modernizr.load('js/libs/jquery-1.7.1.min.js');}}},{// This will wait for the fallback to load and// execute if it needs to.load: 'needs-jQuery.js'} ]);

事實上Modernizr.load最簡單的語法如下所示：

Modernizr.load(test: Modernizr.webgl,yep : 'three.js',nope: 'jebgl.js' );

也就是當(dāng)瀏覽器支持WebGL的時候，就引入?three.js?這個類庫做一些3D效果。瀏覽器不支持WebGL的時候可以使用?jebgl.js?做一些fallback操作。

有興趣可以去官網(wǎng)看看具體API

總結(jié)

以上是生活随笔為你收集整理的HTML5系列四（特征检测、Modernizr.js的相关介绍）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【Windows编程】系列第三篇：文本字
下一篇： 2015第26周六《谁动了我的奶酪》书摘