前端初學者——初探Modernizr.js Modernizr.js筆記

時間 2019-11-22

標籤前端初學者初探 modernizr.js modernizr 筆記欄目 JavaScript 简体版

原文原文鏈接

什麼是Modernizr？

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

下載 Modernizr

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

　　重點：

　　　　<head> 的最後三行應該以下所示：

　　　　</style>

　　　　</head>

　　在html標籤中添加no-js的class，當支持javascript的瀏覽器啓動時，會動態地刪除這個no-js的class。而且會在html標籤中添加當前瀏覽器所支持的元素同名class。

如圖所示。

　　你能夠在瀏覽器中檢查元素時看到html標籤中增長的類，而在本地源代碼中並沒有改動。

　　例如，在頁面中的img標籤，如若瀏覽器不支持陰影，則.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }將會發揮做用。也就是說，你能夠看到Modernizr使用boxshadow 和 csscolumns 分別代表了對box-shadow 屬性和多欄佈局的支持。所以，你可使用no-boxshadow 和 no-csscolumns 類爲不支持這些功能的瀏覽器建立特殊的樣式規則。

一句忠告

　　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

}

初學者筆記，更多內容請點擊原文：

http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html

或者點擊堂主的文章：http://www.osmn00.com/translation/221.html

筆者新手上路，見諒見諒。