使用Modernizr 檢測HTML5和CSS3瀏覽器支持功能（轉自http://www.adobe.com/cn/devnet/dreamweaver/articles/using-moderni

時間 2019-11-20

標籤使用 modernizr 檢測 html5 html css3 css 瀏覽器支持功能 http www.adobe.com www adobe com devnet dreamweaver articles using moderni 欄目 HTML5 简体版

原文原文鏈接

傳統瀏覽器目前不會被徹底取代，令你難以將最新的 CSS3 或 HTML5 功能嵌入你的網站。 Modernizr 正是爲解決這一難題應運而生，做爲一個開源的 JavaScript 庫，Modernizr 檢測瀏覽器對 CSS3 或 HTML5 功能支持狀況。 Modernizr 並不是試圖添加老版本瀏覽器不支持的功能，而是令你經過建立可選風格配置修改頁面設計。它也能夠經過加載定製的腳原本模擬老版本瀏覽器不支持的功能。javascript

Modernizr 簡單易用，但不是萬能的。成功使用 Modernizr 很大程度上取決於你的 CSS 和 JavaScript 技能。經過本指南，你能夠了解如何爲不支持多欄或投影的瀏覽器設置可選風格。此外，你還能夠了解如何讓老版本瀏覽器對使用最新 HTML5 要求（required）屬性的表單進行驗證，以及如何根據瀏覽器的功能有選擇地加載腳本文件。css

什麼是Modernizr？

Modernizr 是一個用來檢測瀏覽器功能支持狀況的 JavaScript 庫。目前，經過檢驗瀏覽器對一系列測試的處理狀況，Modernizr 能夠檢測18項 CSS3 功能以及40多項關於HTML5 的功能。它比傳統檢測瀏覽器名稱（瀏覽器嗅探）的方式更爲可靠。一整套測試的執行時間僅需幾微秒。此外，Modernizr 網站經過定製腳本只對你感興趣的元素進行檢測，從而實現效率優化。html

當使用 Modernizr 檢測 CSS3 支持狀況時，你無需具有任何 JavaScript 的知識。你僅需在網頁中插入文件，它隨即根據瀏覽器的功能狀況在頁面的<html>標籤上添加一組類。相應類的名稱已經符合標準化的要求並淺顯易懂。例如，若是瀏覽器支持 box-shadow 屬性，則須要添加相應的 boxshadow 類；不然，添加一個 no-boxshadow類便可。你所要作的一切只不過是建立一個使用這些類的式樣表，以便爲相應瀏覽器提供合適的式樣。html5

Modernizr 可輕鬆實現 JavaScript 解決方案，即人們熟知的 polyfills——它模擬HTML5 相關功能和技術，如地理定位。然而，你的確須要對 JavaScript 有基本瞭解以便使用這些功能和技術。術語polyfill 來源於一種填補裂縫的黏土的英國品牌Polyfilla（即美國人熟知的填泥料）。這裏，polyfill 用來填補瀏覽器功能上的漏洞。有時，Modernizr 可無縫地執行這項任務。但本質上，這只是一種修補工做，因此，不能依賴它產生無漏洞瀏覽器所實現的徹底相同結果。java

下載 Modernizr

與其它 JavaScript 庫相同的是，Modernizr 可提供 development 和 production 版本。與大多數庫相比，惟一的不一樣之處是，空格和註釋已經從 production 版本中刪除了，這樣能夠減小下載量的大小。 Modernizr 採起了不一樣的方法。 development 版本在某種意義上可稱爲是「廚房中的水槽」—它幾乎包含了一切。 production 版本只包含了你選擇的那些元素，這樣可以顯著下降下載量。在不少狀況下，production 版本能夠縮小爲development版本大小的二十分之一。css3

當使用 Modernizr 進行測試時，我建議你下載 development 版本。一旦你掌握了它是如何運做的以及它的能力，你就能夠下載一個自定義 production 版本以便在你的網站進行部署。git

本教程的示例文件包含的是 Modernizr的development 2.0.6 版本，可是我建議你從 Modernizr 站點上用最新更新的版本替代它。github

下載本文附帶的示例文件（使用modernizr.zip）而且在 Dreamweaver 站點內將它們解壓到一個方便的位置，或者是爲本教程建立一個新站點。
訪問 Moderniz 網站，其地址爲 http://www.modernizr.com/ 。
在 Download Modernizr 2 部分中，單擊 Development 按鈕（參見圖1）。Modernizr 的 development 版本就會直接在你的瀏覽器窗口上打開。

圖1. 選中development版本以便進行Modernizr測試

注：若是你錯誤地單擊了主導航菜單中的 Download 連接，那麼你將看到大量的複選框出現，要求你去選擇你想要的工具。這是爲定製的 production 版本所設置。單擊面板頂部的 Development 版本的連接，或者單擊瀏覽器的 Back 按鈕返回主頁並選中圖1所示的 Development 按鈕。web

在瀏覽器的主菜單上，選中 Save Page As，並在示例文件的js文件夾裏將它另存爲 modernizr.js。若是有必要的話能夠替換已有的文件。

使用 Modernizr 檢測 CSS 功能

如前所述，Modernizr 並無嘗試在舊版本的瀏覽器中添加新的功能，可是它容許你按照你的風格去彌補那些缺失的功能。爲了展現這是如何運做的，示例文件中包含了一個叫作 css_support_begin.html 的頁面。若是你在新式瀏覽器中加載這個頁面，它應該看起來如圖2所示。sql

圖2. Firefox 5以多欄的格式顯示了頁面而且在圖像中添加陰影

該頁面的風格是使用了CSS3的 column-count 和 box-shadow 屬性，以便以多欄的格式顯示文本並在圖像中添加陰影。舊版本的瀏覽器不支持這些屬性中任何一項，所以在 Internet Explorer (IE) 7 中同一頁面看起來如圖3所示。

圖3. IE7忽略了column-count 和 box-shadow屬性

在IE9中，同一頁面顯示了圖像陰影，可是文本和圖3中所示的佈局是同樣的。

你在嘗試彌補缺失的功能上採起什麼方式取決於你的設計大綱的要求。要嘗試使頁面在全部的瀏覽器中看起來徹底同樣將要涉及大量工做，可是你能夠作一些簡單的改進，好比在圖像周圍環繞文字，調整圖像與文本的左邊距，以及在圖像底部和右邊緣添加隱約的邊界，以便使它更具三維立體的感受。

檢測對 CSS3 功能的支持

Modernizr 使用 JavaScript 檢測瀏覽器所支持的功能，可是，它並非使用 JavaScript 動態地加載不一樣的樣式表，而是使用很是簡單的技術將類添加到頁面的<html>標籤。而後做爲設計者由你決定使用 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 添加到示例頁面並檢查它添加到<html> 標籤中的類。

複製 css_support_begin.html 並將它另存爲 css_support.html。
打開你剛建立的複製文件，並切換到 Code 視圖或者Split視圖。
HTML markup 的前兩行應該以下所示：

<!DOCTYPE HTML> <html>

將class="no-js"添加到<html>標籤中，以下所示：

<!DOCTYPE HTML> <html class="no-js">

Modernizr 依賴於在瀏覽器中啓用的 JavaScrip。當它啓用時，這種類會被動態地刪除。可是，在極少數狀況下，當 JavaScrip 沒有啓用時，它依然存在於 HTML makup 中，若是必要，它容許你爲這樣的訪問者建立特殊的樣式規則。

css_support.html 中的樣式是嵌入在 <style> 塊中。Modernizr 庫須要被添加到樣式加載以後的頁面的 <head> 部分。在結束的 </style> 和 </head> 標籤之間添加一條新的線，而且使用 <script>標籤附加上 moderizr.js。最簡單的方式是鍵入你本身的代碼，可是你也能夠在Insert面板中使用 Script 按鈕或者選中 Insert – HTML–Script Objects–Script。<head> 的最後三行應該以下所示：

</style> <script src="js/modernizr.js"></script> </head>

注：若是你使用 Insert 面板或者Insert菜單，則 Dreamweaver 會添加 type="text/javascript" 到開始的 <script> 標籤中。這在 HTML5 中再也不要求，可是留着它並不會形成危害。

保存 support_css.html 並在 Document 工具欄中單擊 Live Code 按鈕。目前 <html> 標籤已經加入了超過40個類的名稱，這些名稱可以代表 WebKit 瀏覽器引擎中 Dreamweaver 的內置版本的功能（參見圖4）。

圖4. Modernizr添加了大量的代表瀏覽器功能的類

注：若是你的 Dreamweaver 版本沒有 Live Code（或者你正使用不一樣的 HTML 編輯器），那麼你可使用大多數新式瀏覽器提供的開發工具或者 Firefox 瀏覽器提供的 Firebug 檢查生成的代碼。

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

表1列舉了 Modernizr 使用的類名稱以代表對 CSS3 的支持。若是某個功能不支持，那麼相應類的名稱用no-做前綴。

表1. Modernizr 檢測的 CSS3 功能

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模塊而命名。

建立舊版本瀏覽器樣式規則

參見表1，你能夠看到Modernizr使用boxshadow 和 csscolumns 分別代表了對box-shadow 屬性和多欄佈局的支持。所以，你可使用no-boxshadow 和 no-csscolumns 類爲不支持這些功能的瀏覽器建立特殊的樣式規則。

爲了保證指令簡單，我將演示只有CSS 聲明的範例。你能夠直接地將它們鍵入到Code視圖中或者使用New CSS Rule對話框。

爲.no-boxshadow img建立一個新的descendant (compound) selector。
設置2像素灰色實心的右邊界和底邊（我選擇#8A8A8A）。由此產生的樣式規則應該以下所示：

 
  .no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }  
 

這不像半透明的陰影那樣有吸引力，可是儘管如此，它仍然使得圖像可以從背景中略微地突起。

在不支持多欄佈局的瀏覽器中，你須要浮動圖像而且調整它的頁邊距。爲.no-csscolumns img建立一個新的descendant selector。
設置圖像向左浮動，而且將頂部和底部頁邊距設置爲3px，右邊距爲8px，以及左邊距爲0。樣式聲明以下所示：

.no-csscolumns img { margin: 3px 8px 3px 0; float: left; }

確保這個樣式規則是遵循.columns img規則。兩個規則有着相同的特殊性，所以，若是它們順序顛倒，則.columns img 的10像素的左邊距可能會覆蓋你剛剛建立的新規則。你能夠將.no-csscolumns img重命名爲.no-csscolumns .columns img以便於給它更高的特殊性，可是最好是保證selector越簡單越好。（順便說一下，若是你不肯定什麼是特殊性，查閱Adrian Senior的文章，Understanding Specificity。它雖然發表時間很長，可是頗有價值。）
保存css_support.html，並在新式瀏覽器中對它進行測試。它應該和之前看起來徹底如出一轍。
你應該在你的本地系統上或經過連接到BrowserLab，在舊版本的瀏覽器上對這個頁面進行測試。雖然沒有陰影或者欄目，可是如今頁面的式樣是可接受的，如圖5所示。

圖5. 舊版本瀏覽器使用的是可選的樣式，例如IE6。

在這個的簡單範例中，我只用了前綴爲no-的類就爲舊版本的瀏覽器建立了特殊的樣式。可是，按照它們的能力,你不一樣時使用這兩個類（帶或不帶前綴）爲瀏覽器建立不一樣的樣式是絕對沒有道理的。例如：

 
  .csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }  
 

有時這種方法是合理的，例如，若是你想爲每一級支持都建立一個徹底不一樣的佈局。可是若是它僅僅是一個爲舊版本瀏覽器提供可選擇的樣式的問題，不要忘記，瀏覽器會忽略它們沒法識別的屬性。若是你對全部的樣式都使用 Modernizr 類，那麼在 JavaScript 禁用的瀏覽器中你的頁面將徹底非樣式化。

使用Modernizr檢測HTML5的支持功能

Modernizr 爲開始的<html>標籤添加的類名稱起着雙重目的做用。當頁面加載時，它們也是 Modernizr 對象建立的 JavaScript 屬性的名稱。表1列舉了與 CSS 有關的類和屬性的名稱。表2列舉了剩下的與 HTML5 和相關技術有關的類和屬性，例如地理位置。

表2. Modernizr 檢測的與 HTML5 有關的功能

HTML5 有關功能	Modernizr 類（屬性）
Application cache	`applicationcache`
Audio	`audio.type (ogg, mp3, wav, m4a)`
Canvas	`canvas`
Canvas text	`canvastext`
Drag and drop	`draganddrop`
Form input attributes	`input.attributeName`
Form input elements	`inputtypes.elementName`
Geolocation	`geolocation`
hashchange event	`hashchange`
History management	`history`
IndexedDB	`indexeddb`
Inline SVG	`inlinesvg`
Local storage	`localstorage`
Messaging	`postmessage`
Session storage	`sessionstorage`
SMIL	`smil`
SVG	`svg`
SVG clip paths	`svgclippaths`
Touch events	`touch`
Video	`video.type (ogg, webm, h264)`
WebGL	`webgl`
Web sockets	`websockets`
Web SQL database	`websqldatabase`
Web workers	`webworkers`

在大多數狀況下，表1和表2列舉的全部屬性返回的都是 true 或者 false 。因此，你能夠按照以下所示使用 JavaScript 對本地存儲進行測試：

 
  if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }  
 

然而,就 audio 和 video 而言，返回值是一個字符串，它代表着瀏覽器可以處理特定類型的置信水平。根據 HTML5 規範，空的字符串表示該類型不支持。若是支持該類型，那麼返回值是「maybe」或是「probably」。例如：

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

使用 Modernizr 驗證 HTML5 必需的表單字段

HTML5 添加了許多新的表單屬性，例如 autofocus，當頁面第一次加載時它會自動地將光標放在某個指定的字段。另外一個有用的屬性是 required, 若是某個必需的字段留有空白，那麼它將阻止HTML5兼容的瀏覽器提交表單（參見圖6）。

圖6. 提交表單前，HTML5 兼容的瀏覽器會檢查必需字段是否填寫

這很好，可是它會給你留下一個問題：舊版本的瀏覽器該怎麼辦？

一個解決方法是忽略它們，並留給服務器側的驗證功能進行最終的檢查。若是瀏覽器沒法識別 required 屬性，那麼另一個處理這種狀況的用戶界面更爲友好的方法是建立一個小小的腳本對必需字段進行檢查。以下的指令顯示了在Modernizr幫助下如何進行相應的操做。

在範例文件夾中複製 required_start.html並保存爲 required.html。
在結束的</head> 標籤前用 <script>塊按照以下所示將 modernizr.js 粘貼到頁面中：

</style> <script src="js/modernizr.js"></script> </head>

緊接在 Modernizr 庫與頁面鏈接的標籤以後，建立一個單獨的 <script> 塊，而且在頁面一加載完就建立一個事件處理程序以便於執行代碼：

 
  <script src="js/modernizr.js"></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head  
 

事件處理程序須要得到一個與表單元素有關的參考並在沒法識別 autofocus 和 required 屬性的瀏覽器中模擬它們。處理autofocus 的方式很簡單：

 
  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) { inputs[0].focus(); } // if required not supported, emulate it }  
 

該條件測試了 Modernizr.input.autofocus，若是不支持 autofocus，那麼返回的值是 false。然而，邏輯運算符NOT（一個感嘆號）卻能使意思顛倒，所以若是不支持 autofocus，那麼該條件的求值結果爲 true，而且 inputs[0].focus() 將光標放在第一個輸入字段。

若是不支持 required，那麼如今添加代碼以便於檢查必需字段。事件處理程序的完整代碼以下所示：

 
  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) { 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; } }; } }  
 

新代碼產生了一個函數，當提交表單時它可以遍歷全部的輸入元素，以便於找到具備 required 屬性的字段。當它找到某個字段時，它會從值中除去開頭和結尾的空白，而且若是結果是一個空的字符串，那麼它會把結果添加到 required 數組中。在全部的字段都已經獲得檢查後，若是數組中包含某些元素，那麼瀏覽器會顯示一個與缺失字段名稱有關的警告，並阻止提交表單。

保存 required.html 並加載到某個瀏覽器中，例如尚不支持 HTML5 表單的 IE 6-9。注意一下光標是如何自動地填入第一個字段的。
單擊提交按鈕而無需填寫任何其它字段。你應該能看到一個警告提示你名稱和郵箱字段須要填寫（參見圖7）。

圖7. 腳本檢測到不支持新屬性的瀏覽器中的必需字段

只填寫其中一個必需字段，再進行一次頁面測試。當你單擊 OK 關閉警告時，你填寫的字段仍然有它的內容，這代表表單還沒有提交。
同時填寫兩個必需表單，並單擊 submit 按鈕。這一次，全部表單字段被清空，而且你應該可以看到隸屬於 URL 的數據做爲查詢字符串出如今瀏覽器的地址欄。這就證明了表單數據已被提交。
在 HTML5 兼容的瀏覽器中，例如最新版本的 Firefox、Chrome 或者 Opera，對這個頁面進行測試。瀏覽器顯示了它本身的相似於圖6所示的錯誤信息，而不是顯示警告信息。

注意： Safari 5.1 錯誤地報告了它支持 required 屬性，因此它在沒有驗證必需字段的狀況下就提交了表單。這是 Safari 的缺陷，然而在 Modernizr 裏它是不存在的。

建立版本

當你準備好對你的網站進行部署時，推薦建立一個 Modernizr 的自定義 production 版本，它只包含那些你實際須要的元素。這能夠按照你所選的功能將 Modernizr 庫的大小從 44KB 縮小到 2KB。當前選項的範圍如圖8所示。

圖8. Modernizr 下載頁面容許你僅選擇那些你須要的功能

選項能夠便捷地按照以下類別進行分組：CSS三、HTML五、Misc(ellaneous) 和 Extra。單擊前三個標題旁邊的 Toggle 按鈕可任意地選擇或者放棄選擇分類中的全部複選框。

在默認情形下，Extra 分類將會選中以下三個條目：

HTML5 Shim/IEPP：它添加了兩個腳本— HTML5 shim 和 IE Print Protector—它們迫使 IE6-8 正確地設計並打印 HTML5 元素。若是你打算使用新的 HTML5 語義標籤，例如 <header> 、<footer>、<nav> 、 <section> 、<article> 等等時，那麼你才須要這個選項。
Modernizr.load(yepnope.js)：它添加了一個不包含在 development 版本中的可選擇的腳本加載器。它增長了3KB 的下載量，因此若是你不須要它，你能夠放棄選擇它。稍後我將描述如何使用該加載器。
Add CSS Classes： 它將 Modernizr 類添加到開始的<html>標籤。若是你想檢測對 CSS3 功能支持，那麼你必須選擇這個選項。

若是你在 CSS3 分類中選中任何選項，那麼以下 Extra 分類中的選項也會被選中：

Modernizr.testProp()
Modernizr.testAllProps()
Modernizr._domPrefixes()

不要取消選擇這些選項。這樣作將會自動地取消你在 CSS3 分類中已經選擇的任何選項。

Extra 分類中的MQ Polyfill (respond.js) 添加了一個腳本，它可使IE 6-8中的 media queries 得到有限的支持。當你選中這個選項時，它會自動地選中Media Queries 和 Modernizr.testStyles()。如需知道更多關於media queries polyfill (respond.js)的信息，請訪問https://github.com/scottjehl/Respond。

只有高級用戶纔會對 Extra 分類中的其它選項感興趣。關於它們是什麼和如何使用它們的更多細節，參見Modernizr 文檔的擴展性部分（Extensibility section of the Modernizr documentation）。

下載 Modernizr 自定義版本

下面的說明描述瞭如何爲範例文件建立一個 Modernizr 的自定義production版本。後續的練習須要使用這一自定義版本，它將展現如何使用 Modernizr.load() 加載外部 JavaScript 文件。

單擊http://www.modernizr.com/download/. 這將會打開如圖8所示的界面。
在 CSS3 分類中，選中box-shadow 和 CSS columns.
在 HTML5 分類中，選中 Input Attributes.
在 Extra 分類中，取消選擇 HTML5 Shim/IEPP.
確保 Extra 分類中以下的選項被選中（它們應該已經自動地被選中）。
- Modernizr.load(yepnope.js)
- Add CSS Classes
- Modernizr.testProp()
- Modernizr.testAllProps()
- Modernizr._domPrefixes

單擊Generate按鈕。
當自定義腳本準備好（通常在一到兩秒內）時，在 Generate 按鈕旁邊會出現一個 Download 按鈕。單擊 Download 按鈕並在範例網站的js文件夾中保存該文件。下載頁面會給 production 腳本提供一個文件名，例如 modernizr.custom.79475.js，可是你或許會但願給它一個更加有意義的名稱。在範例文件中，我使用的名稱是 modernizr.adc.js。
用自定義 production 腳本的連接替換 modernizr.js in css_support.html 和 required.html 的連接。注意 production 腳本只有 5KB，而不是 development 版本的44KB。
單擊 css_support.html 中的 Live Code（或者使用你的瀏覽器中的 development 工具）。如今，如圖9所示，開始的<html>標籤只有三個類。

圖9. 如今<html>標籤中的類只涉及必要的 CSS3 功能

使用 Moder 年 izr 加載外部腳本

當建立Modernizr的自定義production版本時，在默認情形下，必須選中包含 Modernizr.load() 的選項。Modernizr.load() 是 yepnope() 的別名，它是與 Modernizr 同步開發的獨立腳本加載器。爲了說明如何使用它，我給出一個簡單範例。我已經將相應的腳本從 required.html 移到了 check_required.js，而且作了三個微小的改動以便於去除 Modernizr 測試以及將它賦值到一個名爲 init 的變量中。修訂的腳本以下所示：

 
  var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted 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; } }; };  
 

Modernizr.load() 的一個很大的優勢是，根據測試瀏覽器能力的結果，它能夠有條件地加載腳本—這就是爲何起初叫它 yepnope() 的緣由。它能夠異步地加載外部腳本—換句話說，就是可以在瀏覽器已加載 Document Object Model (DOM) 以後加載外部腳本—所以它能夠有助於提高你的網站性能。

Modernizr.load() 的基本語法是將一個具備以下屬性的對象傳遞給它：

test: 你但願檢測的 Modernizr 屬性。
yep: 若是測試成功，你但願加載的腳本的位置。使用一個多腳本數組。
nope: 若是測試失敗，你但願加載的腳本的位置。使用一個多腳本數組。
complete: 外部腳本一經加載就運行的函數（可選）。

yep 和 nope 二者都是可選的，只要你提供了其中一個便可。

爲了在 check_required.js 中加載和執行腳本，須要在 modernizr.adc.js 已附着到頁面以後添加以下<script> 塊（代碼位於required_load.html 中）：

 
  <script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>  
 

這樣就與以前運行的徹底一致，可是卻能夠下降已支持 required 屬性的瀏覽器的下載負荷。

爲了測試多種條件，你能夠給 Modernizr.load()傳遞一組對象。如需得到更多細節信息，參見 Modernizr 文檔上的Modernizr.load() 教程。

一句忠告

Modernizr 是一個強大而有用的工具，可是這並不意味着你就應該使用它。並非在全部情形下均必須使用 Modernizr 給瀏覽器提供多種樣式。若是你主要關注的對象是 Internet Explorer，那麼考慮使用IE conditional comments。你也可使用CSS層疊覆蓋一些樣式。例如，先使用hexadecimal color，而後使用 rgba() 或hsla() 覆蓋它。舊版本的瀏覽器會使用第一個值而且忽略第二個值。

Modernizr 真正地變成現實是當它與 polyfills 和其它 JavaScript 相結合的時候。可是記住，一般很容易建立屬於你本身的適合支持功能的測試。例如，下面就是你測試某個瀏覽器是否支持 required 屬性的所有代碼（代碼位於required_nomodernizr.html 中）：

 
  var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }  
 

下一步閱讀方向

本教程已經涵蓋了 Modernizr 的全部主要功能如需瞭解關於這些功能的更多信息，請查閱相應的官方文檔，其網站地址爲 http://www.modernizr.com/docs/。此外，你還能夠找到下列有用資源：

yepnopejs.com 提供關於 yepnope()的深刻討論，它已經在 Modernizr 中被合併爲Modernizr.load()。
充分利用HTML5和CSS3的Modernizr功能（Taking Advantage of HTML5 and CSS3 with Modernizr），做者：Faruk Ateş（Modernizr 項目負責人）儘管基於Modernizr 的較早版本，但該文章包含了一個關於經過 Modernizr 和 CSS3 獲取的逐步性能改善的詳細範例。