modernizr這個js，在國外的主題里面很多地方都看到，就只記得是為HTML補充的，有點類似與responsive.js一樣。今天搜索到這篇文章，深入的講解了modernizr.js是為檢測瀏覽器的CSS3和HTML5的屬性而生，從而通過CSS來解決兼容性問題。
個人覺得這種做法明顯增加了CSS代碼量，而且可能會造成當用戶的頁面沒有啟用js的情況下，里面的CSS3效果無法使用，另外就是今后維護比較困難，如果改變了某個樣式，那樣子CSS的代碼類也要改變。個人不推薦使用這種方法來寫兼容代碼。以下為譯文
10年前，只有最尖端的網(wǎng)站設(shè)計師會為網(wǎng)頁的布局和修飾使用CSS。那時的瀏覽器對CSS進行布局的支持即不完善又漏洞百出，所以這些人在堅持WEB標準化的同時，也不得不采用hacks來使得他們的頁面在所有瀏覽器中都能正常顯示。其中一個被使用的越來越多的hack技術(shù)是瀏覽器嗅探（browser sniffing），使用Javascript里的navigator.userAgent屬性來判斷用戶使用的是什么品牌哪個版本的瀏覽器。瀏覽器嗅探技術(shù)可以快捷的將代碼進行分支，以便針對不同的瀏覽器應(yīng)用不同的指令。
今天，以CSS為基礎(chǔ)進行的布局已經(jīng)非常普遍，瀏覽器們對它的支持也非常的堅實。但是現(xiàn)在CSS3和HTML5來了，歷史轉(zhuǎn)了個圈又回到了原地——各個瀏覽器對這些新技術(shù)的支持又開始變得參差不齊了。我們早都習(xí)慣了書寫整潔的符合標準的代碼，也不會再使用CSS hacks或者瀏覽器嗅探這些不靠譜又低級的技術(shù)。我們也相信越來越多的用戶會認同網(wǎng)站不必在所有瀏覽器里都看起來一樣的理念。那面對當下這個熟悉的情形（瀏覽器支持的不同），我們該怎么做呢？簡單：使用特征檢測（feature detection），這意味著我們不必通過問瀏覽器“你是誰？”來做出不靠譜的推測。取而代之，我們問瀏覽器“你能做這個或那個嗎”。這么來檢測瀏覽器的能力是很簡便的，但一個個的花時間去手工測試依然令人厭煩。此時Modernizr可以幫助我們。
Modernizr是一個開源的JS庫，它使得那些基于訪客瀏覽器的不同（指對新標準支持性的差異）而開發(fā)不同級別體驗的設(shè)計師的工作變得更為簡單。它使得設(shè)計師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發(fā)，同時又不會犧牲其他不支持這些新技術(shù)的瀏覽器的控制。
當你在網(wǎng)頁中嵌入Modernizr的腳本時，它會檢測當前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的特性——比如audio、video、本地儲存、和新的 <input>標簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個基于JS的fallback，或者對那些不支持的瀏覽器進行簡單的優(yōu)雅降級。另外，Modernizr還可以令I(lǐng)E支持對HTML5的元素應(yīng)用CSS樣式，這樣開發(fā)者就可以立即使用這些更富有語義化的標簽了。
Modernizr是基于漸進增強理論來開發(fā)的，所以它支持并鼓勵開發(fā)者一層一層的創(chuàng)建他們的網(wǎng)站。一切從一個應(yīng)用了Javascript的空閑地基開始，一個接一個的添加增強的應(yīng)用層。因為使用了Modernizr，所以你容易知道瀏覽器都支持什么。下面我們來看一個通過應(yīng)用Modernizr來創(chuàng)建尖端網(wǎng)站的實例。
首先從www.modernizr.com下載Modernizr的最新的穩(wěn)定版（目前國內(nèi)封了Modernizr的官網(wǎng)，我們可以從github上下載?；蛘吒唵吸c，可以從堂主這里下載最新的1.7版的腳本文件），在官網(wǎng)上你還可以看到它支持檢測的所有特性的清單（本文末位會給出這些清單，以便翻不了墻的童鞋可以知道都支持哪些）。下載完最新版本以后（作者寫這篇文章的時候用的是1.5版），把它加入頁面的<head>區(qū)域：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Beautiful Sample Page</title> <script src="modernizr-1.5.min.js"></script> </head> …
接下來，向<html>元素添加“no-js”的類。
<html>
當Modernizr運行的時候，它會把這個“no-js”的類變?yōu)椤癹s”來使你知道它已經(jīng)運行。Modernizr并不僅僅只做這一件事情，它還會為所有它檢測過的特性添加class類，如果瀏覽器不支持某個特性，它就為該特性對應(yīng)的類名加上“no-”的前綴。所以，你的<html>元素可能會變得看起來像下面這個樣子：
<html>
Modernizr同時還會創(chuàng)建一個JS對象，被命名為“Modernizr”，其內(nèi)容是為每一個檢測完的特性給出的布爾值結(jié)果組成的列表。如果瀏覽器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；如果瀏覽器不支持這個新元素，那它對應(yīng)的值就是false。這個JS對象針對某些功能還會包含更為詳細的信息，如“Modernizr.video.h264”會告訴你瀏覽器是否支持這個特殊的編解碼器?！癕odernizr.inputtypes.search”會告訴你當前瀏覽器是否支持新的search input類型，等等。
我們的未加工的簡單小頁面看起來有點像一個準測試系統(tǒng)了，但它具備更好的語義性和可訪問性。讓我們?yōu)樗砑右稽c基本的樣式：一點文字格式、顏色和布局以使它更好看。目前位置，沒什么新東西，只是為一個語義化結(jié)構(gòu)的HTML頁面添加表現(xiàn)樣式，看看添加了樣式后的頁面。
下面，我們要增強這個頁面使得它更有意思。我想為頭部的h1應(yīng)用一個奇特的文字效果，把關(guān)于檢測特性的列表分為兩欄，然后將帶有一張照片的關(guān)于Modernizr的部分的一切都弄到右邊去。我還要把圍繞頁面內(nèi)容的邊框變美點?，F(xiàn)在，更給力的CSS3使你可以對一條規(guī)則添加更多的屬性，如果瀏覽器不支持這些屬性，它會忽略它們。配合使用CSS的層疊（繼承），你可以不必依賴Modernizr而使用像“border-radius”這樣的新屬性。不過，使用Modernizr可以為你提供一些既有手段提供不了的功能：根據(jù)瀏覽器對新東西支持的差異動態(tài)修改的<html>的類名。我會通過對我們的頁面添加2條新的規(guī)則來說明這點：
.borderradius #content { border: 1px solid #141414; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; } .boxshadow #content { border: none; -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px; -moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px; box-shadow: rgba(0,0,0, .5) 3px 3px 6px; }第一條規(guī)則為“#content ”元素添加了一個12像素的圓角。但在既有的頁面里我們已經(jīng)為“#content ”元素設(shè)置了一個屬性值為“2px outset #666”的邊框，這在box是直角的時候是蠻好看的，但在圓角情況下就不是了。感謝Modernizr，我可以在瀏覽器支持“border-radius”的情況下給box設(shè)置一個1px的實邊。
第二條規(guī)則更進步了一點，我們?yōu)椤?content ”元素添加了一個陰影，并且針對支持“box-shadow”屬性的瀏覽器一并移除了border屬性。為什么呢？因為大部分瀏覽器并不為“邊框附帶邊角”的組合外加陰影這樣的效果提供一個好的表現(xiàn)（這是一個應(yīng)該被注意的瀏覽器的瑕疵，但我們現(xiàn)在卻必須忍受它）。同不使用陰影只使用邊框相比，我寧可只使用陰影包圍元素。采用這種方式，我可以擁有全世界最好的，準確點的，最好的一種CSS表現(xiàn)：在支持“box-shadow”屬性的瀏覽器里將會呈現(xiàn)一個美妙的陰影；只支持“border-radius”屬性的瀏覽器將會呈現(xiàn)一個好看的圓角薄邊框；對于那些這2者都不支持的破爛瀏覽器，我們會看到一個2像素的直角邊框。
下面我們要為header應(yīng)用一個自定義的特殊字體，下面的是我們目前針對h1的聲明，沒改動版的：
h1 { color: #e33a89; font: 27px/27px Baskerville, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; margin: 0; text-shadow: #aaa 5px 5px 5px; }這些聲明在我們的基礎(chǔ)網(wǎng)頁里工作良好，27像素的文字大小也很適合我們?yōu)閔1設(shè)置的那些字體的展示。但對于我要用的名叫“Beautiful”的字體來說，27像素就太小了。下面我們要添加其他的規(guī)則來使用這個自定義字體：
@font-face { src: url(Beautiful-ES.ttf); font-family: "Beautiful"; } .fontface h1 { font: 42px/50px Beautiful; text-shadow: none; }首先，我們添加“@font-face”聲明，并在其中為我們的自定義字體指定路徑、文件名和字體名。之后我們用一條CSS語句為我們的h1選擇字體樣式。你會看到，我這里選擇了一個很大的字號，那是因為“Beautiful”字體本身就比其他字體的文字要小很多，所以我們必須要指示瀏覽器在展示我們自定義字體的時候，給予h1一個很大的字號。
此外，我們漂亮的手寫體文字在文字陰影方面存在一些渲染問題，所以我們要在瀏覽器決定使用自定義文字時取消文字的陰影。另外，關(guān)于檢測特征部分的列表還需要被分為兩欄。為了達到目的，我要使用牛叉的CSS columns 屬性，這一屬性會使瀏覽器把列表智能分欄而不會打亂它的順序，而我們的列表，雖然沒有數(shù)字序號，卻也是按照字母順序排列的。當然，不是所有的瀏覽器都支持這一屬性，對于那些不支持的瀏覽器，我們使用浮動來達到2欄的目的——使用了浮動后列表在視覺上不會再按照字母順序排列，但那也好過什么都沒有。
.csscolumns ol.features { -moz-column-count: 2; -webkit-columns: 2; -o-columns: 2; columns: 2; } .no-csscolumns ol.features { float: left; margin: 0 0 20px; } .no-csscolumns ol.features li { float: left; width: 180px; }我又一次使用了Modernizr來針對不同的情況設(shè)置不同的屬性。如果瀏覽器支持CSS columns，它就會把列表完美的分為2欄，如果不支持，通過Modernizr為<html>添加的“no-csscolumns”類我們也可以用浮動的方式使得列表變?yōu)閮蓹冢m然不那么完美，但也比直接來一個長串的單欄列表強。
這里您可能注意到了我為屬性添加了不同的前綴（-moz-、-webkit-、-o-），這是因為不同的瀏覽器廠商對該功能的實現(xiàn)有不同的定義，所以要實現(xiàn)該功能需要針對不同的瀏覽器加上它們對應(yīng)的前綴。
經(jīng)過這些改變，我們新的頁面看起來更好了。
我們將為我們的頁面添加進更多的漸進式增強效果來結(jié)束這篇教程?；赪ebKit的瀏覽器支持一些更牛叉的特效，如CSS變換、動畫和三維轉(zhuǎn)換等。并且我想在最后一個階段的頁面中應(yīng)用一些這類特效。再一次的，這些屬性會被添加進我們既有的CSS中并在不支持它們的瀏覽器中給忽視。所以，針對這種一方面是漸進增強一方面是不被支持的情況，使用Modernizr是恰當?shù)摹?/p>
首先設(shè)置的：
@-webkit-keyframes spin { 0% { -webkit-transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); } } .csstransforms3d.cssanimations section { -webkit-perspective: 1000; }@keyframes規(guī)則是新的CSS animations規(guī)范中的一部分，目前只有WebKit支持。它容許你針對任何屬性聲明一個完整的動畫路徑，并在你喜歡的任何階段改變它們。想知道關(guān)于animations的更多知識，請閱讀 W3C Working Draft specification。
下面我們添加使得我們一個元素在三維空間里旋轉(zhuǎn)的代碼：
.csstransforms3d.cssanimations section h2 { background-image: url(modernizr-logo.png); overflow: hidden; -webkit-animation: spin 2s linear infinite; }因為logo要轉(zhuǎn)動，且又希望它轉(zhuǎn)的時候和背景相處的融洽些，于是這里用了一個png格式的文件。我還采用了一個“overflow:hidden”屬性來隱藏設(shè)置了縮進-9999像素的header里的文字。使元素以3D的形式旋轉(zhuǎn)雖然有趣卻并不太美觀。最終，我們選擇使用animation規(guī)則，設(shè)置它的旋轉(zhuǎn)周期為2秒鐘，沿著自身的中軸線旋轉(zhuǎn)，永不停止。
最終的頁面看起來很給力，甚至還針對WebKit瀏覽器設(shè)置了好玩的動畫。我希望到現(xiàn)在你能明白使用Modernizr可以使你對網(wǎng)站控制的手腕變得多么牛叉，以及它可以令真正的漸進增強變得多么簡單。這還不僅僅是Modernizr的全部好處，它還可以幫你建立基于JS的fallbacks以及可以幫你應(yīng)用html5那些牛掰的新特性。
1. @font-face2. Canvas3. Canvas Text4. WebGL5. HTML5 Audio6. HTML5 Audio formats7. HTML5 Video8. HTML5 Video formats9. rgba()10. hsla()11. border-image12. border-radius13. box-shadow14. text-shadow15. Multiple backgrounds16. background-size17. opacity18. CSS Animations19. CSS Columns20. CSS Gradients21. CSS Reflections22. CSS 2D Transforms23. CSS 3D Transforms24. Flexible Box Model25. CSS Transitions26. Geolocation API27. Input Types28. Input Attributes29. localStorage30. sessionStorage31. Web Workers32. applicationCache33. SVG34. Inline SVG35. SVG Clip paths36. SMIL37. Web SQL Database38. IndexedDB39. Web Sockets40. hashchange Event41. History Management42. Drag and Drop43. Cross-window Messaging44. Touch Events
聯(lián)系客服
