欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js庫(kù)Modernizr的介紹和使用

 更新時(shí)間：2015年05月07日 12:44:50   投稿：mdxy-dxy  
Modernizr是一個(gè)開(kāi)源的JS庫(kù)，它使得那些基于訪客瀏覽器的不同（指對(duì)新標(biāo)準(zhǔn)支持性的差異）而開(kāi)發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)師的工作變得更為簡(jiǎn)單

傳統(tǒng)瀏覽器目前不會(huì)被完全取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網(wǎng)站。 Modernizr 正是為解決這一難題應(yīng)運(yùn)而生，作為一個(gè)開(kāi)源的 JavaScript 庫(kù)，Modernizr 檢測(cè)瀏覽器對(duì) CSS3 或 HTML5 功能支持情況。 Modernizr 并非試圖添加老版本瀏覽器不支持的功能，而是令你通過(guò)創(chuàng)建可選風(fēng)格配置修改頁(yè)面設(shè)計(jì)。 它也可以通過(guò)加載定制的腳本來(lái)模擬老版本瀏覽器不支持的功能。

什么是Modernizr？

Modernizr是一個(gè)開(kāi)源的JS庫(kù)，它使得那些基于訪客瀏覽器的不同（指對(duì)新標(biāo)準(zhǔn)支持性的差異）而開(kāi)發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)師的工作變得更為簡(jiǎn)單。它使得設(shè)計(jì)師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進(jìn)行開(kāi)發(fā)，同時(shí)又不會(huì)犧牲其他不支持這些新技術(shù)的瀏覽器的控制。

當(dāng)你在網(wǎng)頁(yè)中嵌入Modernizr的腳本時(shí)，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時(shí)也會(huì)檢測(cè)是否支持HTML5的 特性——比如audio、video、本地儲(chǔ)存、和新的 <input>標(biāo)簽的類(lèi)型和屬性等。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，來(lái)決定是否創(chuàng)建一個(gè)基于JS的 fallback，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。另外，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式，這樣開(kāi)發(fā)者就可以立即使用這些更富有語(yǔ)義化的標(biāo)簽了。

Modernizr 簡(jiǎn)單易用，但不是萬(wàn)能的。 成功使用 Modernizr 很大程度上取決于你的 CSS 和 JavaScript 技能。

使用HTML 5和CSS 3的主要問(wèn)題不是普及程度和瀏覽器之間的差異，而在于首先了解這些差異是什么。一旦搞清楚，開(kāi)發(fā)人員就能夠采用優(yōu)雅降級(jí)(graceful degradation)技術(shù)解決這些局限性。為此，許多開(kāi)發(fā)人員求助于開(kāi)源項(xiàng)目Modernizr。

Modernizr不是檢測(cè)user-agent字符串，而是使用一系列測(cè)試來(lái)判斷瀏覽器的特性。在幾毫秒內(nèi)它就能夠執(zhí)行超過(guò)40種測(cè)試并將結(jié)果作為屬性記錄在名為Modernizr的對(duì)象中。開(kāi)發(fā)人員可以通過(guò)這些信息檢測(cè)他們準(zhǔn)備使用的某特性是否被瀏覽器支持并作出相應(yīng)的處理。

在Modernizr 2.0版中， 它增加了一個(gè)針對(duì)JavaScript和CSS的條件資源加載器(conditional resource loader)。該資源加載器接受三個(gè)參數(shù)，第一個(gè)是表達(dá)式，列舉了所需的特性。第二個(gè)參數(shù)是如果表達(dá)式返回true則加載的JavaScript和 CSS文件列表。第三個(gè)參數(shù)是所需特性不存在的情況下備用的文件列表。

除了優(yōu)雅降級(jí)，加載器還可用于引入polyfill。 請(qǐng)?jiān)试S我向那些還不太熟悉pollyfill的朋友解釋一下，pollyfill是“一種JavaScript墊片(shim)，為老版本瀏覽器模擬了標(biāo) 準(zhǔn)API”。雖然這種方式不總是值得推薦，但是pollyfill能夠用來(lái)添加（Modernizr檢測(cè)到的）大多數(shù)HTML 5特性的支持。這里，polyfill 用來(lái)填補(bǔ)瀏覽器功能上的漏洞。 有時(shí)，Modernizr 可無(wú)縫地執(zhí)行這項(xiàng)任務(wù)。 但本質(zhì)上，這只是一種修補(bǔ)工作，所以，不能依賴(lài)它產(chǎn)生無(wú)漏洞瀏覽器所實(shí)現(xiàn)的完全相同結(jié)果。

為了改進(jìn)性能，開(kāi)發(fā)人員可以定制Modernizr來(lái)執(zhí)行網(wǎng)站所需的測(cè)試。這可以通過(guò)Modernizr下載頁(yè)面來(lái)完成，該頁(yè)面同時(shí)顯示了能夠檢測(cè)的特性列表。在github網(wǎng)站上還標(biāo)有無(wú)法檢測(cè)的特性和可能的解決辦法。

Modernizr是基于漸進(jìn)增強(qiáng)理論來(lái)開(kāi)發(fā)的，所以它支持并鼓勵(lì)開(kāi)發(fā)者一層一層的創(chuàng)建他們的網(wǎng)站。一切從一個(gè)應(yīng)用了Javascript的空閑地 基開(kāi)始，一個(gè)接一個(gè)的添加增強(qiáng)的應(yīng)用層。因?yàn)槭褂昧薓odernizr，所以你容易知道瀏覽器都支持什么。

Modernizr的原理

Modernizr 使用 JavaScript 檢測(cè)瀏覽器所支持的功能，但是，它并不是使用 JavaScript 動(dòng)態(tài)地加載不同的樣式表，而是使用非常簡(jiǎn)單的技術(shù)將類(lèi)添加到頁(yè)面的<html>標(biāo)簽。然后作為設(shè)計(jì)者由你決定使用 CSS 層疊為目標(biāo)元素提供合適的樣式。

例如，如果頁(yè)面支持 box-shadow 屬性，那么 Modernizr 會(huì)添加 boxshadow 類(lèi)。如果不支持，那么它用 no-boxshadow 類(lèi)作為替代進(jìn)行添加。

由于瀏覽器忽略它們無(wú)法識(shí)別的 CSS 屬性，因此你可以放心地按照你的基本樣式規(guī)則使用 box-shadow 屬性，然而需要按照下面的格式為舊版本的瀏覽器添加單獨(dú)的 descendant selector ：

.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }

只有不支持 box-shadow 的瀏覽器才會(huì)有 no-boxshadow 類(lèi)，因此其它的瀏覽器不會(huì)應(yīng)用這個(gè)樣式規(guī)則。

下表列舉了 Modernizr 使用的類(lèi)名稱(chēng)以表明對(duì) CSS3 的支持。 如果某個(gè)功能不支持，那么相應(yīng)類(lèi)的名稱(chēng)用no-作前綴。

CSS 功能

Modernizr 類(lèi)（屬性）
@font-face fontface
::before and ::after pseudo-elements generatedcontent
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow

CSS animations

 cssanimations

CSS 2D transformations

 csstransforms

CSS 3D transformations

 csstransforms3d

CSS transitions

 csstransitions

flexible box layout

 flexbox

gradients

 cssgradients
hsla() hsla

multi-column layout

 csscolumns

multiple backgrounds

 multiplebgs
opacity opacity

reflection

 cssreflections
rgba() rgba
text-shadow textshadow

無(wú)論在哪對(duì)特定的CSS屬性進(jìn)行測(cè)試，類(lèi)的名稱(chēng)和屬性名稱(chēng)都是一樣的，然而這要求去除任何連字號(hào)或是括號(hào)。 其它類(lèi)是按照它們參考的CSS3模塊而命名。

Modernizr的使用

1. 下載

首先從www.modernizr.com下載Modernizr的最新的穩(wěn)定版。把它加入頁(yè)面的<head>區(qū)域：

<script src="modernizr-1.5.min.js"></script> 2. 向<html>元素添加“no-js”的類(lèi)

<!DOCTYPE HTML>

<html class="no-js">

當(dāng)Modernizr運(yùn)行的時(shí)候，它會(huì)把這個(gè)“no-js”的類(lèi)變?yōu)椤癹s”來(lái)使你知道它已經(jīng)運(yùn)行。Modernizr并不僅僅只做這一件事情，它還會(huì)為 所有它檢測(cè)過(guò)的特性添加class類(lèi)，如果瀏覽器不支持某個(gè)特性，它就為該特性對(duì)應(yīng)的類(lèi)名加上“no-”的前綴。
添加no-js class到html元素下，是告訴瀏覽器是否支持JavaScript，如果不支持就顯示no-js，如果支持就把no-js刪掉
此時(shí)如果使用Dreamweaver 的Live Code，可以看到Modernizr添加了大量的表明瀏覽器功能的類(lèi)，如下圖

如圖所示， no-js 類(lèi)已經(jīng)被js類(lèi)替代，這表明 JavaScript 已經(jīng)啟用。

如果你的 Dreamweaver 版本沒(méi)有 Live Code（或者你正使用不同的 HTML 編輯器），那么你可以使用大多數(shù)新式瀏覽器提供的開(kāi)發(fā)工具或者 Firefox 瀏覽器提供的 Firebug 檢查生成的代碼。

3. 使用案例1——在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框

復(fù)制代碼 代碼如下:

.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px; -moz-box-shadow: #666 1px 1px 1px;
} .no-boxshadow #MyContainer { border: 2px solid black;
}

因?yàn)槿绻麨g覽器支持box-shadows的話(huà)，Modernizr就會(huì)將boxshadow class添加到<html>元素，然后你可以將它管理到一個(gè)相應(yīng)的div的id上。如果不支持，Modernizr就會(huì)將no- boxshadow class添加到<html>元素，這樣顯示的就是一個(gè)標(biāo)準(zhǔn)的邊框。這樣我們就可以很方便地在支持CSS3特性的瀏覽器上使用CSS3新功 能，不支持的瀏覽器上繼續(xù)使用以前的方式。

4. 使用案例2——對(duì)本地存儲(chǔ)進(jìn)行測(cè)試

Modernizr除了添加相應(yīng)的class到<html>元素以外，還提供一個(gè)全局的Modernizr JavaScript對(duì)象，該對(duì)象提供了不同的屬性來(lái)表示某種新特性在當(dāng)前瀏覽器下是否支持。例如，下面的代碼可以用于判斷瀏覽器是否支持canvas和 local storag。對(duì)于多個(gè)開(kāi)發(fā)人員在多版本瀏覽器下開(kāi)發(fā)測(cè)試的時(shí)候很有好處的。

<script> window.onload = function () { if (localStorageSupported()) {
   alert('local storage supported');
 }
};

　　function localStorageSupported() {
 　　try { 　　return ('localStorage' in window && window['localStorage'] != null);
 　　}catch(e) {}
 　　 return false;
} </script>

大家可以統(tǒng)一代碼

 $(document).ready(function () { 
 if (Modernizr.canvas) { //Add canvas code } 
 if (Modernizr.localstorage) { 
 //script to run if local storage is 
 } else { 
 // script to run if local storage is not supported
  
 }
});

全局的Modernizr對(duì)象也可以用來(lái)探測(cè)是否支持CSS3特性，下面的代碼用于測(cè)試是否支持border-radius 和CSS transforms:

$(document).ready(function () { if (Modernizr.borderradius) {
  $('#MyDiv').addClass('borderRadiusStyle');
 } if (Modernizr.csstransforms) {
  $('#MyDiv').addClass('transformsStyle');
 }
});

audio 和 video 而言，返回值是一個(gè)字符串，它表明著瀏覽器能夠處理特定類(lèi)型的置信水平。 根據(jù) HTML5 規(guī)范，空的字符串表示該類(lèi)型不支持。 如果支持該類(lèi)型，那么返回值是“maybe”或是“probably”。 例如：

if (Modernizr.video.h264 == "") { 
// h264 is not supported
}

4. 使用案例3——使用 Modernizr 驗(yàn)證 HTML5 必需的表單字段

HTML5 添加了許多新的表單屬性，例如 autofocus，當(dāng)頁(yè)面第一次加載時(shí)它會(huì)自動(dòng)地將光標(biāo)放在某個(gè)指定的字段。 另一個(gè)有用的屬性是 required, 如果某個(gè)必需的字段留有空白，那么它將阻止HTML5兼容的瀏覽器提交表單。

圖1. 腳本檢測(cè)到不支持新屬性的瀏覽器中的必需字段

圖2. 腳本檢測(cè)到不支持新屬性的瀏覽器中的必需字段

提交表單前，HTML5 兼容的瀏覽器會(huì)檢查必需字段是否填寫(xiě)

window.onload = function() { // get the form and its input elements 　　var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field 　　if (!Modernizr.input.autofocus) { //因如果不支持 autofocus，那么該條件的求值結(jié)果為 true，并且 inputs[0].focus() 將光標(biāo)放在第一個(gè)輸入字段 　　　　 inputs[0].focus(); }
　　　　// if required not supported, emulate it 　　　　 if (!Modernizr.input.required) { 
　　　　　　form.onsubmit = function() { 
　　　　　　　　var required = [], att, val;
　　　　　　　　// loop through input elements looking for required 　　　　　　　　for (var i = 0; i < inputs.length; i++) {
　　　　　　　　　　 att = inputs[i].getAttribute('required'); 　　　　　　　　　　// if required, get the value and trim whitespace 　　　　　　　　　　　　if (att != null) { 
　　　　　　　　　　　　　　val = inputs[i].value; // if the value is empty, add to required array 　　　　　　　　　　　　　　　　if (val.replace(/^\s+|\s+$/g, '') == '') { 
　　　　　　　　　　　　　　　　　　required.push(inputs[i].name);
　　　　　　　　　　　　　　　　} 
　　　　　　　　　　　　}
　　　　　　　　 } // show alert if required array contains any elements 　　　　if (required.length > 0) { 
　　　　　　alert('The following fields are required: ' + required.join(', ')); 
　　　　　　// prevent the form from being submitted 　　　　　　return false; 
　　　　} 
　　};
　} 
}

代碼產(chǎn)生了一個(gè)函數(shù)，當(dāng)提交表單時(shí)它能夠遍歷所有的輸入元素，以便于找到具有 required 屬性的字段。 當(dāng)它找到某個(gè)字段時(shí)，它會(huì)從值中除去開(kāi)頭和結(jié)尾的空白，并且如果結(jié)果是一個(gè)空的字符串，那么它會(huì)把結(jié)果添加到 required 數(shù)組中。 在所有的字段都已經(jīng)得到檢查后，如果數(shù)組中包含某些元素，那么瀏覽器會(huì)顯示一個(gè)與缺失字段名稱(chēng)有關(guān)的警告，并阻止提交表單。

創(chuàng)建自定義版本

當(dāng)你準(zhǔn)備好對(duì)你的網(wǎng)站進(jìn)行部署時(shí)，推薦創(chuàng)建一個(gè) Modernizr 的自定義 production 版本，它只包含那些你實(shí)際需要的元素。 這可以按照你所選的功能將 Modernizr 庫(kù)的大小從 44KB 縮小到 2KB。當(dāng)前選項(xiàng)的范圍如圖所示。

如：

  1. 單擊http://www.modernizr.com/download/. 這將會(huì)打開(kāi)如上圖所示的界面。
  2. 在 CSS3 分類(lèi)中，選中box-shadow 和 CSS columns.
  3. 在 HTML5 分類(lèi)中，選中 Input Attributes.
  4. 在 Extra 分類(lèi)中，取消選擇 HTML5 Shim/IEPP.
  5. 確保 Extra 分類(lèi)中如下的選項(xiàng)被選中（它們應(yīng)該已經(jīng)自動(dòng)地被選中）。
    • Modernizr.load(yepnope.js)
    • Add CSS Classes
    • Modernizr.testProp()
    • Modernizr.testAllProps()
    • Modernizr._domPrefixes
  1. 單擊Generate按鈕。
  2. 當(dāng)自定義腳本準(zhǔn)備好（一般在一到兩秒內(nèi)）時(shí)，在 Generate 按鈕旁邊會(huì)出現(xiàn)一個(gè) Download 按鈕。 單擊 Download 按鈕并在范例網(wǎng)站的js文件夾中保存該文件。 下載頁(yè)面會(huì)給 production 腳本提供一個(gè)文件名，例如 modernizr.custom.79475.js，但是你或許會(huì)希望給它一個(gè)更加有意義的名稱(chēng)。 在范例文件中，我使用的名稱(chēng)是 modernizr.adc.js。
  3. 用自定義 production 腳本的鏈接替換 modernizr.js in css_support.html 和 required.html 的鏈接。 注意 production 腳本只有 5KB，而不是 development 版本的44KB。
  4. 單擊 css_support.html 中的 Live Code（或者使用你的瀏覽器中的 development 工具）。 現(xiàn)在，如下圖所示，開(kāi)始的<html>標(biāo)簽只有三個(gè)類(lèi)。

參考：

  • http://www.mhtml5.com/2011/03/676.html
  • http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
  • http://zh.wikipedia.org/wiki/Modernizr
  • http://modernizr.com/docs/

相關(guān)文章

最新評(píng)論