說說Modernizr的幾點使用方法

2024-08-26 00:18:06

字體：大中小

來源：轉載

供稿：網友

關于Modernizr的中文介紹已經有很多了，可以通過百度或者谷哥搜索一下。也可以去藍色理想上看一看，這篇相對較全面:Modernizr——為HTML5和CSS3而生;

Modernizr除了為HTML5和CSS3提供基礎環境判定、語義支持外，還有哪些用途呢?今天一起來學一學。

說說Modernizr的幾點使用方法

一、從應用Modernizr開始

這部分在“Modernizr——為HTML5和CSS3而生”一文中有詳細的講解，包括Modernizr運行后HTML元素的變化等，建議新同學可以仔細閱讀閱讀。

也可以直接至官方網站http://modernizr.com/docs/進一步了解。

二、Modernizr.load的使用

1、載入jquery

先來看看官網上關于載入jquery的方法與代碼：

Modernizr.load([{

load: 'http://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');

}

}

}]);

這段代碼經實際測試使用發現，如果無法正常訪問google提供的cdn時，瀏覽器會報錯，信息為

GET http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js 404 (Not Found)

modernizr.custom.js:4Resource interpreted as Image but transferred with MIME type application/x-javascript: "js/libs/jquery-1.7.1.min.js".

由反饋的信息可以看出，Modernizr在重新載入本地jQuery時所解析的文件格式存在錯誤，我不知道是不是都會遇到這樣的情況，但這的確影響了使用。在所有中文搜索結果中，沒能發現針對這一現象的說明或研究，個人能力有限，所以也沒法深究。只是從stackoverflow得到了暫時的解決方法，代碼如下：

<script type="text/javascript">// <![CDATA[

Modernizr.load([{

load: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',

complete: function(){

if( !window.jQuery ){

Modernizr.load([{

load:'js/jquery.min.js',

callback: function(url, result, key){

//console.log('jquery on local was loaded!');

init();

}

}]);

}else{

//console.log('jquery on google was loaded!');

init();

}

}

}]);

function init(){

jQuery(document).ready(function(){

$('body').prepend('hello world!');

});

}

// ]]></script>

2、針對低版本IE截入PNG圖支持

在yepnopejs的文檔說明中，有一節關于ie! Prefix的插件使用介紹。

大多數時候我們在做前端界面兼容的時候，不得不考慮IE不同版本的細節調整，雖然現在高調強調拋棄IE6，但仍有大多數客戶端在使用著這個版本。為了能保證界面的一致性，我們通常能看到下列格式的代碼：

這是html中允許的過濾篩選的條件格式語句，通過篩選，我們可以達到針對不同版本的IE進行一些css hacks。這部分內容可以至paulirish.com進一步閱讀與學習。

png圖透明的解決方案，有很多很多種，這里針對如何通過modernizr引入解決png透明的js代碼段，進行一些嘗試，具體代碼如下：

<script type="text/javascript">// <![CDATA[

Modernizr.load([

{

load: 'js/yepnope.ie_prefix.js', //載入yepnope的ie!prefix的插件

complete: function(){

yepnope([{

load: 'ielt8!js/ie_png.js', //插件正常載入后才能進行篩選(針對低于IE8版本載入ie_png.js)

complete: function(){

ie_png.fix('img');

}

}]);

}

}

]);

// ]]></script>

這是個有意思的嘗試。

3、判斷瀏覽器對css3或html5的支持

這部分是modernizr的基本特性，利用這些基本特性，我們不僅可以進行css3或html5的新功能嘗試，而且可以保證在不支持的環境下給出友好的提示。看看以下代碼：

<script type="text/javascript">// <![CDATA[

Modernizr.load({

test: Modernizr.csstransforms3d && Modernizr.csstransitions, //判斷當前客戶端是否支持3維變型和漸變過渡

yep : ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'], //如若支持，載入相關js

nope: 'css/fallback.css', //否則載入用于友情提醒的相關樣式

callback : function( url, result, key ) {//回調內容

if( url === 'js/jquery.hoverfold.js' ) { //如果最后載入的js文件路徑一致，則應用

$( '#grid' ).hoverfold();

}

}

});

// ]]></script>