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


什么是Modernizr?
  Modernizr 是一個用來檢測瀏覽器功能支持情況的 JavaScript 庫。 目前,通過檢驗瀏覽器對一系列測試的處理情況,Modernizr 可以檢測18項 CSS3 功能以及40多項關於HTML5 的功能。 它比傳統檢測瀏覽器名稱(瀏覽器嗅探)的方式更為可靠。 一整套測試的執行時間僅需幾微秒。 此外,Modernizr 網站通過定制腳本只對你感興趣的元素進行檢測,從而實現效率優化。
 
 
下載 Modernizr
與其它 JavaScript 庫相同的是,Modernizr 可提供 development 和 production 版本。 與大多數庫相比,唯一的不同之處是,空格和注釋已經從 production 版本中刪除了,這樣可以減少下載量的大小。 Modernizr 采取了不同的方法。 development 版本在某種意義上可稱為是“廚房中的水槽”—它幾乎包含了一切。 production 版本只包含了你選擇的那些元素,這樣能夠顯著降低下載量。 在很多情況下,production 版本可以縮小為development版本大小的二十分之一。
 
  重點:
    <head> 的最后三行應該如下所示:
 
    </style>
    <script src="js/modernizr.js"></script>
    </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
 
筆者新手上路,見諒見諒。
  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM