Modernizr：為HTML 5和CSS3而生
10年前，只有最尖端的網(wǎng)站設(shè)計(jì)師會(huì)為網(wǎng)頁(yè)的布局和修飾使用CSS。那時(shí)的瀏覽器對(duì)CSS進(jìn)行布局的支持即不完善又漏洞百出，所以這些人在堅(jiān)持WEB標(biāo)準(zhǔn)化的同時(shí)，也不得不采用hacks來使得他們的頁(yè)面在所有瀏覽器中都能正常顯示。其中一個(gè)被使用的越來越多的hack技術(shù)是瀏覽器嗅探（browser sniffing），使用Javascript里的navigator.userAgent屬性來判斷用戶使用的是什么品牌哪個(gè)版本的瀏覽器。瀏覽器嗅探技術(shù)可以快捷的將代碼進(jìn)行分支，以便針對(duì)不同的瀏覽器應(yīng)用不同的指令。
51CTO推薦專題：HTML 5 下一代Web開發(fā)標(biāo)準(zhǔn)詳解
今天，以CSS為基礎(chǔ)進(jìn)行的布局已經(jīng)非常普遍，瀏覽器們對(duì)它的支持也非常的堅(jiān)實(shí)。但是現(xiàn)在CSS3和HTML5來了，歷史轉(zhuǎn)了個(gè)圈又回到了原地——各個(gè)瀏覽器對(duì)這些新技術(shù)的支持又開始變得參差不齊了。我們?cè)缍剂?xí)慣了書寫整潔的符合標(biāo)準(zhǔn)的代碼，也不會(huì)再使用CSS hacks或者瀏覽器嗅探這些不靠譜又低級(jí)的技術(shù)。我們也相信越來越多的用戶會(huì)認(rèn)同網(wǎng)站不必在所有瀏覽器里都看起來一樣的理念。那面對(duì)當(dāng)下這個(gè)熟悉的情形（瀏覽器支持的不同），我們?cè)撛趺醋瞿?？?jiǎn)單：使用特征檢測(cè)（feature detection），這意味著我們不必通過問瀏覽器“你是誰(shuí)？”來做出不靠譜的推測(cè)。取而代之，我們問瀏覽器“你能做這個(gè)或那個(gè)嗎”。這么來檢測(cè)瀏覽器的能力是很簡(jiǎn)便的，但一個(gè)個(gè)的花時(shí)間去手工測(cè)試依然令人厭煩。此時(shí)Modernizr可以幫助我們。
Modernizr：專為HTML5和CSS3開發(fā)的功能檢測(cè)類庫(kù)
Modernizr是一個(gè)開源的JS庫(kù)，它使得那些基于訪客瀏覽器的不同（指對(duì)新標(biāo)準(zhǔn)支持性的差異）而開發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)師的工作變得更為簡(jiǎn)單。它使得設(shè)計(jì)師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進(jìn)行開發(fā)，同時(shí)又不會(huì)犧牲其他不支持這些新技術(shù)的瀏覽器的控制。
當(dāng)你在網(wǎng)頁(yè)中嵌入Modernizr的腳本時(shí)，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時(shí)也會(huì)檢測(cè)是否支持HTML5的特性——比如audio、video、本地儲(chǔ)存、和新的 標(biāo)簽的類型和屬性等。在獲取到這些信息的基礎(chǔ)上，你可以在那些支持這些功能的瀏覽器上使用它們，來決定是否創(chuàng)建一個(gè)基于JS的fallback，或者對(duì)那些不支持的瀏覽器進(jìn)行簡(jiǎn)單的優(yōu)雅降級(jí)。另外，Modernizr還可以令I(lǐng)E支持對(duì)HTML5的元素應(yīng)用CSS樣式，這樣開發(fā)者就可以立即使用這些更富有語(yǔ)義化的標(biāo)簽了。
Modernizr是基于漸進(jìn)增強(qiáng)理論來開發(fā)的，所以它支持并鼓勵(lì)開發(fā)者一層一層的創(chuàng)建他們的網(wǎng)站。一切從一個(gè)應(yīng)用了Javascript的空閑地基開始，一個(gè)接一個(gè)的添加增強(qiáng)的應(yīng)用層。因?yàn)槭褂昧薓odernizr，所以你容易知道瀏覽器都支持什么。下面我們來看一個(gè)通過應(yīng)用Modernizr來創(chuàng)建尖端網(wǎng)站的實(shí)例。
從應(yīng)用Modernizr開始
首先從www.modernizr.com下載Modernizr的最新的穩(wěn)定版（目前國(guó)內(nèi)封了Modernizr的官網(wǎng)，我們可以從github上下載?；蛘吒?jiǎn)單點(diǎn)，可以從堂主這里下載最新的1.7版的腳本文件），在官網(wǎng)上你還可以看到它支持檢測(cè)的所有特性的清單（本文末位會(huì)給出這些清單，以便翻不了墻的童鞋可以知道都支持哪些）。下載完最新版本以后（作者寫這篇文章的時(shí)候用的是1.5版），把它加入頁(yè)面的
區(qū)域：
- >
- <html>
- <head>
- <meta charset="utf-8">
- <title>My Beautiful Sample Pagetitle>
- <script src="modernizr-1.5.min.js">script>
- head>
- …
接下來，向元素添加“no-js”的類。
當(dāng)Modernizr運(yùn)行的時(shí)候，它會(huì)把這個(gè)“no-js”的類變?yōu)椤癹s”來使你知道它已經(jīng)運(yùn)行。Modernizr并不僅僅只做這一件事情，它還會(huì)為所有它檢測(cè)過的特性添加class類，如果瀏覽器不支持某個(gè)特性，它就為該特性對(duì)應(yīng)的類名加上“no-”的前綴。所以，你的元素可能會(huì)變得看起來像下面這個(gè)樣子：
Modernizr同時(shí)還會(huì)創(chuàng)建一個(gè)JS對(duì)象，被命名為“Modernizr”，其內(nèi)容是為每一個(gè)檢測(cè)完的特性給出的布爾值結(jié)果組成的列表。如果瀏覽器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；如果瀏覽器不支持這個(gè)新元素，那它對(duì)應(yīng)的值就是false。這個(gè)JS對(duì)象針對(duì)某些功能還會(huì)包含更為詳細(xì)的信息，如“Modernizr.video.h264”會(huì)告訴你瀏覽器是否支持這個(gè)特殊的編解碼器?！癕odernizr.inputtypes.search”會(huì)告訴你當(dāng)前瀏覽器是否支持新的search input類型，等等。
我們的未加工的簡(jiǎn)單小頁(yè)面看起來有點(diǎn)像一個(gè)準(zhǔn)測(cè)試系統(tǒng)了，但它具備更好的語(yǔ)義性和可訪問性。讓我們?yōu)樗砑右稽c(diǎn)基本的樣式：一點(diǎn)文字格式、顏色和布局以使它更好看。目前位置，沒什么新東西，只是為一個(gè)語(yǔ)義化結(jié)構(gòu)的HTML頁(yè)面添加表現(xiàn)樣式，看看添加了樣式后的頁(yè)面。
下面，我們要增強(qiáng)這個(gè)頁(yè)面使得它更有意思。我想為頭部的h1應(yīng)用一個(gè)奇特的文字效果，把關(guān)于檢測(cè)特性的列表分為兩欄，然后將帶有一張照片的關(guān)于Modernizr的部分的一切都弄到右邊去。我還要把圍繞頁(yè)面內(nèi)容的邊框變美點(diǎn)?，F(xiàn)在，更給力的CSS3使你可以對(duì)一條規(guī)則添加更多的屬性，如果瀏覽器不支持這些屬性，它會(huì)忽略它們。配合使用CSS的層疊（繼承），你可以不必依賴Modernizr而使用像“border-radius”這樣的新屬性。不過，使用Modernizr可以為你提供一些既有手段提供不了的功能：根據(jù)瀏覽器對(duì)新東西支持的差異動(dòng)態(tài)修改的的類名。我會(huì)通過對(duì)我們的頁(yè)面添加2條新的規(guī)則來說明這點(diǎn)：
- .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 ”元素添加了一個(gè)12像素的圓角。但在既有的頁(yè)面里我們已經(jīng)為“#content ”元素設(shè)置了一個(gè)屬性值為“2px outset #666”的邊框，這在box是直角的時(shí)候是蠻好看的，但在圓角情況下就不是了。感謝Modernizr，我可以在瀏覽器支持“border-radius”的情況下給box設(shè)置一個(gè)1px的實(shí)邊。
第二條規(guī)則更進(jìn)步了一點(diǎn)，我們?yōu)椤?content ”元素添加了一個(gè)陰影，并且針對(duì)支持“box-shadow”屬性的瀏覽器一并移除了border屬性。為什么呢？因?yàn)榇蟛糠譃g覽器并不為“邊框附帶邊角”的組合外加陰影這樣的效果提供一個(gè)好的表現(xiàn)（這是一個(gè)應(yīng)該被注意的瀏覽器的瑕疵，但我們現(xiàn)在卻必須忍受它）。同不使用陰影只使用邊框相比，我寧可只使用陰影包圍元素。采用這種方式，我可以擁有全世界最好的，準(zhǔn)確點(diǎn)的，最好的一種CSS表現(xiàn)：在支持“box-shadow”屬性的瀏覽器里將會(huì)呈現(xiàn)一個(gè)美妙的陰影；只支持“border-radius”屬性的瀏覽器將會(huì)呈現(xiàn)一個(gè)好看的圓角薄邊框；對(duì)于那些這2者都不支持的破爛瀏覽器，我們會(huì)看到一個(gè)2像素的直角邊框。
下面我們要為header應(yīng)用一個(gè)自定義的特殊字體，下面的是我們目前針對(duì)h1的聲明，沒改動(dòng)版的：
- 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)頁(yè)里工作良好，27像素的文字大小也很適合我們?yōu)閔1設(shè)置的那些字體的展示。但對(duì)于我要用的名叫“Beautiful”的字體來說，27像素就太小了。下面我們要添加其他的規(guī)則來使用這個(gè)自定義字體：
- @font-face {
- src: url(Beautiful-ES.ttf);
- font-family: "Beautiful";
- }
- .fontface h1 {
- font: 42px/50px Beautiful;
- text-shadow: none;
- }
首先，我們添加“@font-face”聲明，并在其中為我們的自定義字體指定路徑、文件名和字體名。之后我們用一條CSS語(yǔ)句為我們的h1選擇字體樣式。你會(huì)看到，我這里選擇了一個(gè)很大的字號(hào)，那是因?yàn)椤癇eautiful”字體本身就比其他字體的文字要小很多，所以我們必須要指示瀏覽器在展示我們自定義字體的時(shí)候，給予h1一個(gè)很大的字號(hào)。
此外，我們漂亮的手寫體文字在文字陰影方面存在一些渲染問題，所以我們要在瀏覽器決定使用自定義文字時(shí)取消文字的陰影。另外，關(guān)于檢測(cè)特征部分的列表還需要被分為兩欄。為了達(dá)到目的，我要使用牛叉的CSS columns 屬性，這一屬性會(huì)使瀏覽器把列表智能分欄而不會(huì)打亂它的順序，而我們的列表，雖然沒有數(shù)字序號(hào)，卻也是按照字母順序排列的。當(dāng)然，不是所有的瀏覽器都支持這一屬性，對(duì)于那些不支持的瀏覽器，我們使用浮動(dòng)來達(dá)到2欄的目的——使用了浮動(dòng)后列表在視覺上不會(huì)再按照字母順序排列，但那也好過什么都沒有。
- .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來針對(duì)不同的情況設(shè)置不同的屬性。如果瀏覽器支持CSS columns，它就會(huì)把列表完美的分為2欄，如果不支持，通過Modernizr為添加的“no-csscolumns”類我們也可以用浮動(dòng)的方式使得列表變?yōu)閮蓹?，雖然不那么完美，但也比直接來一個(gè)長(zhǎng)串的單欄列表強(qiáng)。
這里您可能注意到了我為屬性添加了不同的前綴（-moz-、-webkit-、-o-），這是因?yàn)椴煌臑g覽器廠商對(duì)該功能的實(shí)現(xiàn)有不同的定義，所以要實(shí)現(xiàn)該功能需要針對(duì)不同的瀏覽器加上它們對(duì)應(yīng)的前綴。
經(jīng)過這些改變，我們新的頁(yè)面看起來更好了。
我們將為我們的頁(yè)面添加進(jìn)更多的漸進(jìn)式增強(qiáng)效果來結(jié)束這篇教程?；赪ebKit的瀏覽器支持一些更牛叉的特效，如CSS變換、動(dòng)畫和三維轉(zhuǎn)換等。并且我想在最后一個(gè)階段的頁(yè)面中應(yīng)用一些這類特效。再一次的，這些屬性會(huì)被添加進(jìn)我們既有的CSS中并在不支持它們的瀏覽器中給忽視。所以，針對(duì)這種一方面是漸進(jìn)增強(qiáng)一方面是不被支持的情況，使用Modernizr是恰當(dāng)?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支持。它容許你針對(duì)任何屬性聲明一個(gè)完整的動(dòng)畫路徑，并在你喜歡的任何階段改變它們。想知道關(guān)于animations的更多知識(shí)，請(qǐng)閱讀 W3C Working Draft specification。
下面我們添加使得我們一個(gè)元素在三維空間里旋轉(zhuǎn)的代碼：
- .csstransforms3d.cssanimations section h2 {
- background-image: url(modernizr-logo.png);
- overflow: hidden;
- -webkit-animation: spin 2s linear infinite;
- }
因?yàn)閘ogo要轉(zhuǎn)動(dòng)，且又希望它轉(zhuǎn)的時(shí)候和背景相處的融洽些，于是這里用了一個(gè)png格式的文件。我還采用了一個(gè)“overflow:hidden”屬性來隱藏設(shè)置了縮進(jìn)-9999像素的header里的文字。使元素以3D的形式旋轉(zhuǎn)雖然有趣卻并不太美觀。最終，我們選擇使用animation規(guī)則，設(shè)置它的旋轉(zhuǎn)周期為2秒鐘，沿著自身的中軸線旋轉(zhuǎn)，永不停止。
最終的頁(yè)面看起來很給力，甚至還針對(duì)WebKit瀏覽器設(shè)置了好玩的動(dòng)畫。我希望到現(xiàn)在你能明白使用Modernizr可以使你對(duì)網(wǎng)站控制的手腕變得多么牛叉，以及它可以令真正的漸進(jìn)增強(qiáng)變得多么簡(jiǎn)單。這還不僅僅是Modernizr的全部好處，它還可以幫你建立基于JS的fallbacks以及可以幫你應(yīng)用html5那些牛掰的新特性。
原文地址：http://www.mhtml5.com/2011/03/676.html
【編輯推薦】
