js庫Modernizr的介紹和使用_其它

傳統瀏覽器目前不會被完全取代，令你難以將最新的 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屬性進行測試，類的名稱和屬性名稱都是一樣的，然而這要求去除任何連字號或是括號。 其它類是按照它們參考的CSS3模塊而命名。

Modernizr的使用

1. 下載

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

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

創建自定義版本

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

如：

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

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

參考：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com