Modernizr：為HTML 5和CSS3而生

10年前，只有最尖端的網站設計師會為網頁的布局和修飾使用CSS。那時的瀏覽器對CSS進行布局的支援即不完善又漏洞百出，所以這些人在堅持WEB標準化的同時，也不得不採用hacks來使得他們的頁面在所有瀏覽器中都能正常顯示。其中一個被使用的越來越多的hack技術是瀏覽器嗅探browser sniffing），使用Javascript裡的navigator.userAgent屬性來判斷使用者使用的是什麼品牌哪個版本的瀏覽器。瀏覽器嗅探技術可以快捷的將代碼進行分支，以便針對不同的瀏覽器應用不同的指令。

BKJIA推薦專題：HTML 5 下一代Web開發標準詳解

今天，以CSS為基礎進行的布局已經非常普遍，瀏覽器們對它的支援也非常的堅實。但是現在CSS3和HTML5來了，曆史轉了個圈又回到了原地——各個瀏覽器對這些新技術的支援又開始變得參差不齊了。我們早都習慣了書寫整潔的符合標準的代碼，也不會再使用CSS hacks或者瀏覽器嗅探這些不靠譜又低級的技術。我們也相信越來越多的使用者會認同網站不必在所有瀏覽器裡都看起來一樣的理念。那面對當下這個熟悉的情形瀏覽器支援的不同），我們該怎麼做呢？簡單：使用特徵檢測feature detection），這意味著我們不必通過問瀏覽器“你是誰？”來做出不靠譜的推測。取而代之，我們問瀏覽器“你能做這個或那個嗎”。這麼來檢測瀏覽器的能力是很簡便的，但一個個的花時間去手工測試依然令人厭煩。此時Modernizr可以協助我們。

Modernizr：專為HTML5和CSS3開發的功能檢測類庫

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是基於漸進增強理論來開發的，所以它支援並鼓勵開發人員一層一層的建立他們的網站。一切從一個應用了Javascript的空閑地基開始，一個接一個的添加增強應用程式層。因為使用了Modernizr，所以你容易知道瀏覽器都支援什麼。下面我們來看一個通過應用Modernizr來建立尖端網站的執行個體。

從應用Modernizr開始

首先從www.modernizr.com下載Modernizr的最新的穩定版目前國內封了Modernizr的官網，我們可以從github上下載。或者更簡單點，可以從堂主這裡下載最新的1.7版的指令檔），在官網上你還可以看到它支援檢測的所有特性的清單本文末位會給出這些清單，以便翻不了牆的童鞋可以知道都支援哪些）。下載完最新版本以後作者寫這篇文章的時候用的是1.5版），把它加入頁面的地區：

 

  
 
  
 
  
 
  
 
  
My Beautiful Sample Page 
  
 
  
 
  
… 
 

接下來，向元素添加“no-js”的類。

當Modernizr啟動並執行時候，它會把這個“no-js”的類變為“js”來使你知道它已經運行。Modernizr並不僅僅只做這一件事情，它還會為所有它檢測過的特性添加class類，如果瀏覽器不支援某個特性，它就為該特性對應的類名加上“no-”的首碼。所以，你的元素可能會變得看起來像下面這個樣子：

Modernizr同時還會建立一個JS對象，被命名為“Modernizr”，其內容是為每一個檢測完的特性給出的布爾值結果組成的列表。如果瀏覽器支援新的canvas元素，那麼“Modernizr.canvas”的值就是true；如果瀏覽器不支援這個新元素，那它對應的值就是false。這個JS對象針對某些功能還會包含更為詳細的資訊，如“Modernizr.video.h264”會告訴你瀏覽器是否支援這個特殊的轉碼器。“Modernizr.inputtypes.search”會告訴你當前瀏覽器是否支援新的search input類型，等等。

我們的未加工的簡單小頁面看起來有點像一個準測試系統了，但它具備更好的語義性和可訪問性。讓我們為它添加一點基本的樣式：一點文字格式、顏色和布局以使它更好看。目前位置，沒什麼新東西，只是為一個語義化結構的HTML頁面添加表現樣式，看看添加了樣式後的頁面。

下面，我們要增強這個頁面使得它更有意思。我想為頭部的h1應用一個奇特的文字效果，把關於檢測特性的列表分為兩欄，然後將帶有一張照片的關於Modernizr的部分的一切都弄到右邊去。我還要把圍繞頁面內容的邊框變美點。現在，更給力的CSS3使你可以對一條規則添加更多的屬性，如果瀏覽器不支援這些屬性，它會忽略它們。配合使用CSS的層疊繼承），你可以不必依賴Modernizr而使用像“border-radius”這樣的新屬性。不過，使用Modernizr可以為你提供一些既有手段提供不了的功能：根據瀏覽器對新東西支援的差異動態修改的的類名。我會通過對我們的頁面添加2條新的規則來說明這點：

 

  
.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;  
  
} 
 

第一條規則為“#content ”元素添加了一個12像素的圓角。但在既有的頁面裡我們已經為“#content ”元素設定了一個屬性值為“2px outset #666”的邊框，這在box是直角的時候是蠻好看的，但在圓角情況下就不是了。感謝Modernizr，我可以在瀏覽器支援“border-radius”的情況下給box設定一個1px的實邊。

第二條規則更進步了一點，我們為“#content ”元素添加了一個陰影，並且針對支援“box-shadow”屬性的瀏覽器一併移除了border屬性。為什麼呢？因為大部分瀏覽器並不為“邊框附帶邊角”的組合外加陰影這樣的效果提供一個好的表現這是一個應該被注意的瀏覽器的瑕疵，但我們現在卻必須忍受它）。同不使用陰影只使用邊框相比，我寧可只使用陰影包圍元素。採用這種方式，我可以擁有全世界最好的，準確點的，最好的一種CSS表現：在支援“box-shadow”屬性的瀏覽器裡將會呈現一個美妙的陰影；只支援“border-radius”屬性的瀏覽器將會呈現一個好看的圓角薄邊框；對於那些這2者都不支援的破爛瀏覽器，我們會看到一個2像素的直角邊框。

下面我們要為header應用一個自訂的特殊字型，下面的是我們目前針對h1的聲明，沒改動版的：

 

  
h1 {  
  
    color: #e33a89;  
  
    font: 27px/27px Baskerville, Palatino, "Palatino Linotype",  
  
    "Book Antiqua", Georgia, serif;  
  
    margin: 0;  
  
    text-shadow: #aaa 5px 5px 5px;  
  
} 
 

這些聲明在我們的基礎網頁裡工作良好，27像素的文字大小也很適合我們為h1設定的那些字型的展示。但對於我要用的名叫“Beautiful”的字型來說，27像素就太小了。下面我們要添加其他的規則來使用這個自訂字型：

 

  
@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一個很大的字型大小。

此外，我們漂亮的手寫體文字在文字陰影方面存在一些渲染問題，所以我們要在瀏覽器決定使用自訂文字時取消文字的陰影。另外，關於檢測特徵部分的列表還需要被分為兩欄。為了達到目的，我要使用牛叉的CSS columns 屬性，這一屬性會使瀏覽器把列表智能分欄而不會打亂它的順序，而我們的列表，雖然沒有數字序號，卻也是按照字母順序排列的。當然，不是所有的瀏覽器都支援這一屬性，對於那些不支援的瀏覽器，我們使用浮動來達到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來針對不同的情況設定不同的屬性。如果瀏覽器支援CSS columns，它就會把列表完美的分為2欄，如果不支援，通過Modernizr為添加的“no-csscolumns”類我們也可以用浮動的方式使得列表變為兩欄，雖然不那麼完美，但也比直接來一個長串的單欄列表強。

這裡您可能注意到了我為屬性添加了不同的首碼-moz-、-webkit-、-o-），這是因為不同的瀏覽器廠商對該功能的實現有不同的定義，所以要實現該功能需要針對不同的瀏覽器加上它們對應的首碼。

經過這些改變，我們新的頁面看起來更好了。

我們將為我們的頁面添加進更多的漸進式增強效果來結束這篇教程。基於WebKit的瀏覽器支援一些更牛叉的特效，如CSS變換、動畫和三維轉換等。並且我想在最後一個階段的頁面中應用一些這類特效。再一次的，這些屬性會被添加進我們既有的CSS中並在不支援它們的瀏覽器中給忽視。所以，針對這種一方面是漸進增強一方面是不被支援的情況，使用Modernizr是恰當的。

首先設定的：

 

  
@-webkit-keyframes spin {  
  
      0% { -webkit-transform: rotateY(0); }  
  
    100% { -webkit-transform: rotateY(360deg); }  
  
}    
  
 
  
.csstransforms3d.cssanimations section {  
  
    -webkit-perspective: 1000;  
  
} 
 

@keyframes規則是新的CSS animations規範中的一部分，目前只有WebKit支援。它容許你針對任何屬性聲明一個完整的動畫路徑，並在你喜歡的任何階段改變它們。想知道關於animations的更多知識，請閱讀 W3C Working Draft specification。

下面我們添加使得我們一個元素在三維空間裡旋轉的代碼：

 

  
.csstransforms3d.cssanimations section h2 {  
  
    background-image: url(modernizr-logo.png);  
  
    overflow: hidden;  
  
    -webkit-animation: spin 2s linear infinite;  
  
} 
 

因為logo要轉動，且又希望它轉的時候和背景相處的融洽些，於是這裡用了一個png格式的檔案。我還採用了一個“overflow:hidden”屬性來隱藏設定了縮排-9999像素的header裡的文字。使元素以3D的形式旋轉雖然有趣卻並不太美觀。最終，我們選擇使用animation規則，設定它的旋轉周期為2秒鐘，沿著自身的中軸線旋轉，永不停止。

最終的頁面看起來很給力，甚至還針對WebKit瀏覽器設定了好玩的動畫。我希望到現在你能明白使用Modernizr可以使你對網站控制的手腕變得多麼牛叉，以及它可以令真正的漸進增強變得多麼簡單。這還不僅僅是Modernizr的全部好處，它還可以幫你建立基於JS的fallbacks以及可以幫你應用html5那些牛掰的新特性。

原文地址：http://www.mhtml5.com/2011/03/676.html