js庫Modernizr的介紹和使用

 　　Modernizr是一個開源的JS庫，它使得那些基於訪客浏覽器的不同(指對新標准支持性的差異)而開發不同級別體驗的設計師的工作變得更為簡單

　　傳統浏覽器目前不會被完全取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網站。 Modernizr 正是為解決這一難題應運而生，作為一個開源的 JavaScript 庫，Modernizr 檢測浏覽器對 CSS3 或 HTML5 功能支持情況。 Modernizr 並非試圖添加老版本浏覽器不支持的功能，而是令你通過創建可選風格配置修改頁面設計。 它也可以通過加載定制的腳本來模擬老版本浏覽器不支持的功能。

　　什麼是Modernizr?

　　Modernizr是一個開源的JS庫，它使得那些基於訪客浏覽器的不同(指對新標准支持性的差異)而開發不同級別體驗的設計師的工作變得更為簡單。它使得設計師可以在支持HTML5和CSS3的浏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其他不支持這些新技術的浏覽器的控制。

　　當你在網頁中嵌入Modernizr的腳本時，它會檢測當前浏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的 特性——比如audio、video、本地儲存、和新的 標簽的類型和屬性等。在獲取到這些信息的基礎上，你可以在那些支持這些功能的浏覽器上使用它們，來決定是否創建一個基於JS的 fallback，或者對那些不支持的浏覽器進行簡單的優雅降級。另外，Modernizr還可以令IE支持對HTML5的元素應用CSS樣式，這樣開發者就可以立即使用這些更富有語義化的標簽了。

　　Modernizr 簡單易用，但不是萬能的。 成功使用 Modernizr 很大程度上取決於你的 CSS 和 JavaScript 技能。

　　使用HTML 5和CSS 3的主要問題不是普及程度和浏覽器之間的差異，而在於首先了解這些差異是什麼。一旦搞清楚，開發人員就能夠采用優雅降級(graceful degradation)技術解決這些局限性。為此，許多開發人員求助於開源項目Modernizr。

　　Modernizr不是檢測user-agent字符串，而是使用一系列測試來判斷浏覽器的特性。在幾毫秒內它就能夠執行超過40種測試並將結果作為屬性記錄在名為Modernizr的對象中。開發人員可以通過這些信息檢測他們准備使用的某特性是否被浏覽器支持並作出相應的處理。

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

　　除了優雅降級，加載器還可用於引入polyfill。 請允許我向那些還不太熟悉pollyfill的朋友解釋一下，pollyfill是“一種JavaScript墊片(shim)，為老版本浏覽器模擬了標 准API”。雖然這種方式不總是值得推薦，但是pollyfill能夠用來添加(Modernizr檢測到的)大多數HTML 5特性的支持。這裡，polyfill 用來填補浏覽器功能上的漏洞。 有時，Modernizr 可無縫地執行這項任務。 但本質上，這只是一種修補工作，所以，不能依賴它產生無漏洞浏覽器所實現的完全相同結果。

　　為了改進性能，開發人員可以定制Modernizr來執行網站所需的測試。這可以通過Modernizr下載頁面來完成，該頁面同時顯示了能夠檢測的特性列表。在github網站上還標有無法檢測的特性和可能的解決辦法。

　　Modernizr是基於漸進增強理論來開發的，所以它支持並鼓勵開發者一層一層的創建他們的網站。一切從一個應用了Javascript的空閒地 基開始，一個接一個的添加增強的應用層。因為使用了Modernizr，所以你容易知道浏覽器都支持什麼。

　　Modernizr的原理

　　Modernizr 使用 JavaScript 檢測浏覽器所支持的功能，但是，它並不是使用 JavaScript 動態地加載不同的樣式表，而是使用非常簡單的技術將類添加到頁面的標簽。然後作為設計者由你決定使用 CSS 層疊為目標元素提供合適的樣式。

　　例如，如果頁面支持 box-shadow 屬性，那麼 Modernizr 會添加 boxshadow 類。如果不支持，那麼它用 no-boxshadow 類作為替代進行添加。

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

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

　　只有不支持 box-shadow 的浏覽器才會有 no-boxshadow 類，因此其它的浏覽器不會應用這個樣式規則。

　　下表列舉了 Modernizr 使用的類名稱以表明對 CSS3 的支持。 如果某個功能不支持，那麼相應類的名稱用no-作前綴。

CSS 功能

Modernizr 類（屬性）

@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

　　無論在哪對特定的CSS屬性進行測試，類的名稱和屬性名稱都是一樣的，然而這要求去除任何連字號或是括號。 其它類是按照它們參考的CSS3模塊而命名。

　　Modernizr的使用

　　1. 下載

　　首先從www.modernizr.com下載Modernizr的最新的穩定版。把它加入頁面的區域：

　　 2. 向元素添加“no-js”的類

　　

　　

　　當Modernizr運行的時候，它會把這個“no-js”的類變為“js”來使你知道它已經運行。Modernizr並不僅僅只做這一件事情，它還會為 所有它檢測過的特性添加class類，如果浏覽器不支持某個特性，它就為該特性對應的類名加上“no-”的前綴。

　　添加no-js class到html元素下，是告訴浏覽器是否支持JavaScript，如果不支持就顯示no-js，如果支持就把no-js刪掉

　　此時如果使用Dreamweaver 的Live Code，可以看到Modernizr添加了大量的表明浏覽器功能的類，如下圖

　　如圖所示， no-js 類已經被js類替代，這表明 JavaScript 已經啟用。

　　如果你的 Dreamweaver 版本沒有 Live Code(或者你正使用不同的 HTML 編輯器)，那麼你可以使用大多數新式浏覽器提供的開發工具或者 Firefox 浏覽器提供的 Firebug 檢查生成的代碼。

　　3. 使用案例1——在支持shadow陰影的浏覽器顯示shadow，不支持的浏覽器顯示標准的邊框

　　復制代碼 代碼如下:

　　.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;

　　}

　　因為如果浏覽器支持box-shadows的話，Modernizr就會將boxshadow class添加到元素，然後你可以將它管理到一個相應的div的id上。如果不支持，Modernizr就會將no- boxshadow class添加到元素，這樣顯示的就是一個標准的邊框。這樣我們就可以很方便地在支持CSS3特性的浏覽器上使用CSS3新功 能，不支持的浏覽器上繼續使用以前的方式。

　　4. 使用案例2——對本地存儲進行測試

　　Modernizr除了添加相應的class到元素以外，還提供一個全局的Modernizr JavaScript對象，該對象提供了不同的屬性來表示某種新特性在當前浏覽器下是否支持。例如，下面的代碼可以用於判斷浏覽器是否支持canvas和 local storag。對於多