Modernizr——爲HTML5和CSS3而生！

時間 2019-11-13

標籤 modernizr html5 html css3 css 欄目 HTML5 简体版

原文原文鏈接

Modernizr——爲HTML5和CSS3而生！

Tags : HTML5 CSS3 譯文 JS 03-10 / 20112 commentscss

原文地址：http://www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr/html

堂主譯文地址：http://www.osmn00.com/translation/221.htmlhtml5

轉載請尊重原做者及譯者勞動，附帶以上信息，謝謝合做~css3

-------------------- 分割線，如下是正文 --------------------git

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

今天，以CSS爲基礎進行的佈局已經很是廣泛，瀏覽器們對它的支持也很是的堅實。可是如今CSS3和HTML5來了，歷史轉了個圈又回到了原地——各個瀏覽器對這些新技術的支持又開始變得良莠不齊了。咱們早都習慣了書寫整潔的符合標準的代碼，也不會再使用CSS hacks或者瀏覽器嗅探這些不靠譜又低級的技術。咱們也相信愈來愈多的用戶會認同網站沒必要在全部瀏覽器裏都看起來同樣的理念。那面對當下這個熟悉的情形（瀏覽器支持的不一樣），咱們該怎麼作呢？簡單：使用特徵檢測（feature detection），這意味着咱們沒必要經過問瀏覽器「你是誰？」來作出不靠譜的推測。取而代之，咱們問瀏覽器「你能作這個或那個嗎」。這麼來檢測瀏覽器的能力是很簡便的，但一個個的花時間去手工測試依然使人厭煩。此時Modernizr能夠幫助咱們。web

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

Modernizr是一個開源的JS庫，它使得那些基於訪客瀏覽器的不一樣（指對新標準支持性的差別）而開發不一樣級別體驗的設計師的工做變得更爲簡單。它使得設計師能夠在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進行開發，同時又不會犧牲其餘不支持這些新技術的瀏覽器的控制。canvas

當你在網頁中嵌入Modernizr的腳本時，它會檢測當前瀏覽器是否支持CSS3的特性，好比 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時也會檢測是否支持HTML5的特性——好比audio、video、本地儲存、和新的 <input>標籤的類型和屬性等。在獲取到這些信息的基礎上，你能夠在那些支持這些功能的瀏覽器上使用它們，來決定是否建立一個基於JS的fallback，或者對那些不支持的瀏覽器進行簡單的優雅降級。另外，Modernizr還能夠令IE支持對HTML5的元素應用CSS樣式，這樣開發者就能夠當即使用這些更富有語義化的標籤了。瀏覽器

Modernizr是基於漸進加強理論來開發的，因此它支持並鼓勵開發者一層一層的建立他們的網站。一切從一個應用了Javascript的空閒地基開始，一個接一個的添加加強的應用層。由於使用了Modernizr，因此你容易知道瀏覽器都支持什麼。下面咱們來看一個經過應用Modernizr來建立尖端網站的實例。session

從應用Modernizr開始

首先從www.modernizr.com下載Modernizr的最新的穩定版（目前國內封了Modernizr的官網，咱們能夠從github上下載。或者更簡單點，能夠從堂主這裏下載最新的1.7版的腳本文件），在官網上你還能夠看到它支持檢測的全部特性的清單（本文末位會給出這些清單，以便翻不了牆的童鞋能夠知道都支持哪些）。下載完最新版本之後（做者寫這篇文章的時候用的是1.5版），把它加入頁面的<head>區域：

<!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 class="no-js">

當Modernizr運行的時候，它會把這個「no-js」的類變爲「js」來使你知道它已經運行。Modernizr並不只僅只作這一件事情，它還會爲全部它檢測過的特性添加class類，若是瀏覽器不支持某個特性，它就爲該特性對應的類名加上「no-」的前綴。因此，你的<html>元素可能會變得看起來像下面這個樣子：

<html class="js canvas canvastext no-geolocation rgba hsla   
multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns   
cssgradients cssreflections csstransforms csstransforms3d csstransitions video   
audio localstorage sessionstorage webworkers applicationcache fontface">

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能夠爲你提供一些既有手段提供不了的功能：根據瀏覽器對新東西支持的差別動態修改的<html>的類名。我會經過對咱們的頁面添加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爲<html>添加的「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那些牛掰的新特性。

附，Modernizr檢測清單：

1. @font-face
2. Canvas
3. Canvas Text
4. WebGL
5. HTML5 Audio
6. HTML5 Audio formats
7. HTML5 Video
8. HTML5 Video formats
9. rgba()
10. hsla()
11. border-image
12. border-radius
13. box-shadow
14. text-shadow
15. Multiple backgrounds
16. background-size
17. opacity
18. CSS Animations
19. CSS Columns
20. CSS Gradients
21. CSS Reflections
22. CSS 2D Transforms
23. CSS 3D Transforms
24. Flexible Box Model
25. CSS Transitions
26. Geolocation API
27. Input Types
28. Input Attributes
29. localStorage
30. sessionStorage
31. Web Workers
32. applicationCache
33. SVG
34. Inline SVG
35. SVG Clip paths
36. SMIL
37. Web SQL Database
38. IndexedDB
39. Web Sockets
40. hashchange Event
41. History Management
42. Drag and Drop
43. Cross-window Messaging
44. Touch Events