傳統(tǒng)瀏覽器目前不會被完全取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網(wǎng)站。 Modernizr 正是為解決這一難題應(yīng)運(yùn)而生，作為一個開源的 JavaScript 庫，Modernizr 檢測瀏覽器對 CSS3 或 HTML5 功能支持情況。 Modernizr 并非試圖添加老版本瀏覽器不支持的功能，而是令你通過創(chuàng)建可選風(fēng)格配置修改頁面設(shè)計。 它也可以通過加載定制的腳本來模擬老版本瀏覽器不支持的功能。
什么是Modernizr？
Modernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同（指對新標(biāo)準(zhǔn)支持性的差異）而開發(fā)不同級別體驗的設(shè)計師的工作變得更為簡單。它使得設(shè)計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進(jìn)行開發(fā)，同時又不會犧牲其他不支持這些新技術(shù)的瀏覽器的控制。
當(dāng)你在網(wǎng)頁中嵌入Modernizr的腳本時，它會檢測當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的 特性――比如audio、video、本地儲存、和新的 <input>標(biāo)簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個基于JS的 fallback，或者對那些不支持的瀏覽器進(jìn)行簡單的優(yōu)雅降級。另外，Modernizr還可以令I(lǐng)E支持對HTML5的元素應(yīng)用CSS樣式，這樣開發(fā)者就可以立即使用這些更富有語義化的標(biāo)簽了。
Modernizr 簡單易用，但不是萬能的。 成功使用 Modernizr 很大程度上取決于你的 CSS 和 JavaScript 技能。
使用HTML 5和CSS 3的主要問題不是普及程度和瀏覽器之間的差異，而在于首先了解這些差異是什么。一旦搞清楚，開發(fā)人員就能夠采用優(yōu)雅降級(graceful degradation)技術(shù)解決這些局限性。為此，許多開發(fā)人員求助于開源項目Modernizr。
Modernizr不是檢測user-agent字符串，而是使用一系列測試來判斷瀏覽器的特性。在幾毫秒內(nèi)它就能夠執(zhí)行超過40種測試并將結(jié)果作為屬性記錄在名為Modernizr的對象中。開發(fā)人員可以通過這些信息檢測他們準(zhǔn)備使用的某特性是否被瀏覽器支持并作出相應(yīng)的處理。
在Modernizr 2.0版中， 它增加了一個針對JavaScript和CSS的條件資源加載器(conditional resource loader)。該資源加載器接受三個參數(shù)，第一個是表達(dá)式，列舉了所需的特性。第二個參數(shù)是如果表達(dá)式返回true則加載的JavaScript和 CSS文件列表。第三個參數(shù)是所需特性不存在的情況下備用的文件列表。
除了優(yōu)雅降級，加載器還可用于引入polyfill。 請允許我向那些還不太熟悉pollyfill的朋友解釋一下，pollyfill是“一種JavaScript墊片(shim)，為老版本瀏覽器模擬了標(biāo) 準(zhǔn)API”。雖然這種方式不總是值得推薦，但是pollyfill能夠用來添加（Modernizr檢測到的）大多數(shù)HTML 5特性的支持。這里，polyfill 用來填補(bǔ)瀏覽器功能上的漏洞。 有時，Modernizr 可無縫地執(zhí)行這項任務(wù)。 但本質(zhì)上，這只是一種修補(bǔ)工作，所以，不能依賴它產(chǎn)生無漏洞瀏覽器所實(shí)現(xiàn)的完全相同結(jié)果。
為了改進(jìn)性能，開發(fā)人員可以定制Modernizr來執(zhí)行網(wǎng)站所需的測試。這可以通過Modernizr下載頁面來完成，該頁面同時顯示了能夠檢測的特性列表。在github網(wǎng)站上還標(biāo)有無法檢測的特性和可能的解決辦法。
Modernizr是基于漸進(jìn)增強(qiáng)理論來開發(fā)的，所以它支持并鼓勵開發(fā)者一層一層的創(chuàng)建他們的網(wǎng)站。一切從一個應(yīng)用了Javascript的空閑地 基開始，一個接一個的添加增強(qiáng)的應(yīng)用層。因為使用了Modernizr，所以你容易知道瀏覽器都支持什么。
Modernizr的原理
Modernizr 使用 JavaScript 檢測瀏覽器所支持的功能，但是，它并不是使用 JavaScript 動態(tài)地加載不同的樣式表，而是使用非常簡單的技術(shù)將類添加到頁面的<html>標(biāo)簽。然后作為設(shè)計者由你決定使用 CSS 層疊為目標(biāo)元素提供合適的樣式。
例如，如果頁面支持 box-shadow 屬性，那么 Modernizr 會添加 boxshadow 類。如果不支持，那么它用 no-boxshadow 類作為替代進(jìn)行添加。
由于瀏覽器忽略它們無法識別的 CSS 屬性，因此你可以放心地按照你的基本樣式規(guī)則使用 box-shadow 屬性，然而需要按照下面的格式為舊版本的瀏覽器添加單獨(dú)的 descendant selector ：
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }
只有不支持 box-shadow 的瀏覽器才會有 no-boxshadow 類，因此其它的瀏覽器不會應(yīng)用這個樣式規(guī)則。
下表列舉了 Modernizr 使用的類名稱以表明對 CSS3 的支持。 如果某個功能不支持，那么相應(yīng)類的名稱用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屬性進(jìn)行測試，類的名稱和屬性名稱都是一樣的，然而這要求去除任何連字號或是括號。 其它類是按照它們參考的CSS3模塊而命名。
Modernizr的使用
1. 下載
首先從www.modernizr.com下載Modernizr的最新的穩(wěn)定版。把它加入頁面的<head>區(qū)域：
<script src="modernizr-1.5.min.js"></script> 2. 向<html>元素添加“no-js”的類
<!DOCTYPE HTML>
<html class="no-js">
當(dāng)Modernizr運(yùn)行的時候，它會把這個“no-js”的類變?yōu)椤癹s”來使你知道它已經(jīng)運(yùn)行。Modernizr并不僅僅只做這一件事情，它還會為 所有它檢測過的特性添加class類，如果瀏覽器不支持某個特性，它就為該特性對應(yīng)的類名加上“no-”的前綴。
添加no-js class到html元素下，是告訴瀏覽器是否支持JavaScript，如果不支持就顯示no-js，如果支持就把no-js刪掉
此時如果使用Dreamweaver 的Live Code，可以看到Modernizr添加了大量的表明瀏覽器功能的類，如下圖
如圖所示， no-js 類已經(jīng)被js類替代，這表明 JavaScript 已經(jīng)啟用。
如果你的 Dreamweaver 版本沒有 Live Code（或者你正使用不同的 HTML 編輯器），那么你可以使用大多數(shù)新式瀏覽器提供的開發(fā)工具或者 Firefox 瀏覽器提供的 Firebug 檢查生成的代碼。
3. 使用案例1――在支持shadow陰影的瀏覽器顯示shadow，不支持的瀏覽器顯示標(biāo)準(zhǔn)的邊框
因為如果瀏覽器支持box-shadows的話，Modernizr就會將boxshadow class添加到<html>元素，然后你可以將它管理到一個相應(yīng)的div的id上。如果不支持，Modernizr就會將no- boxshadow class添加到<html>元素，這樣顯示的就是一個標(biāo)準(zhǔn)的邊框。這樣我們就可以很方便地在支持CSS3特性的瀏覽器上使用CSS3新功 能，不支持的瀏覽器上繼續(xù)使用以前的方式。
4. 使用案例2――對本地存儲進(jìn)行測試
Modernizr除了添加相應(yīng)的class到<html>元素以外，還提供一個全局的Modernizr JavaScript對象，該對象提供了不同的屬性來表示某種新特性在當(dāng)前瀏覽器下是否支持。例如，下面的代碼可以用于判斷瀏覽器是否支持canvas和 local storag。對于多個開發(fā)人員在多版本瀏覽器下開發(fā)測試的時候很有好處的。
<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對象也可以用來探測是否支持CSS3特性，下面的代碼用于測試是否支持border-radius 和CSS transforms:
$(document).ready(function () { if (Modernizr.borderradius) { $('#MyDiv').addClass('borderRadiusStyle'); } if (Modernizr.csstransforms) { $('#MyDiv').addClass('transformsStyle'); }}); audio 和 video 而言，返回值是一個字符串，它表明著瀏覽器能夠處理特定類型的置信水平。 根據(jù) HTML5 規(guī)范，空的字符串表示該類型不支持。 如果支持該類型，那么返回值是“maybe”或是“probably”。 例如：
if (Modernizr.video.h264 == "") { // h264 is not supported}4. 使用案例3――使用 Modernizr 驗證 HTML5 必需的表單字段
HTML5 添加了許多新的表單屬性，例如 autofocus，當(dāng)頁面第一次加載時它會自動地將光標(biāo)放在某個指定的字段。 另一個有用的屬性是 required, 如果某個必需的字段留有空白，那么它將阻止HTML5兼容的瀏覽器提交表單。
圖1. 腳本檢測到不支持新屬性的瀏覽器中的必需字段
圖2. 腳本檢測到不支持新屬性的瀏覽器中的必需字段
提交表單前，HTML5 兼容的瀏覽器會檢查必需字段是否填寫
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)放在第一個輸入字段 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)生了一個函數(shù)，當(dāng)提交表單時它能夠遍歷所有的輸入元素，以便于找到具有 required 屬性的字段。 當(dāng)它找到某個字段時，它會從值中除去開頭和結(jié)尾的空白，并且如果結(jié)果是一個空的字符串，那么它會把結(jié)果添加到 required 數(shù)組中。 在所有的字段都已經(jīng)得到檢查后，如果數(shù)組中包含某些元素，那么瀏覽器會顯示一個與缺失字段名稱有關(guān)的警告，并阻止提交表單。
創(chuàng)建自定義版本
當(dāng)你準(zhǔn)備好對你的網(wǎng)站進(jìn)行部署時，推薦創(chuàng)建一個 Modernizr 的自定義 production 版本，它只包含那些你實(shí)際需要的元素。 這可以按照你所選的功能將 Modernizr 庫的大小從 44KB 縮小到 2KB。當(dāng)前選項的范圍如圖所示。
參考：
新聞熱點(diǎn)
疑難解答
