|
從應用Modernizr開始
首先從www.modernizr.com下載Modernizr的最新的穩(wěn)定版（目前國內(nèi)封了Modernizr的官網(wǎng)，我們可以從github上下載。或者更簡單點，可以從堂主這里下載最新的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 class="no-js">
當Modernizr運行的時候，它會把這個“no-js”的類變?yōu)椤癹s”來使你知道它已經(jīng)運行。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同時還會創(chuàng)建一個JS對象，被命名為“Modernizr”，其內(nèi)容是為每一個檢測完的特性給出的布爾值結(jié)果組成的列表。如果瀏覽器支持新的canvas元素，那么“Modernizr.canvas”的值就是true；如果瀏覽器不支持這個新元素，那它對應的值就是false。這個JS對象針對某些功能還會包含更為詳細的信息，如“Modernizr.video.h264”會告訴你瀏覽器是否支持這個特殊的編解碼器�！癕odernizr.inputtypes.search”會告訴你當前瀏覽器是否支持新的search input類型，等等。
我們的 未加工的簡單小頁面 看起來有點像一個準測試系統(tǒng)了，但它具備更好的語義性和可訪問性。讓我們?yōu)樗砑右稽c基本的樣式：一點文字格式、顏色和布局以使它更好看。目前位置，沒什么新東西，只是為一個語義化結(jié)構(gòu)的HTML頁面添加表現(xiàn)樣式，看看添加了樣式后的頁面。
下面，我們要增強這個頁面使得它更有意思。我想為頭部的h1應用一個奇特的文字效果，把關(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 ”元素設置了一個屬性值為“2px outset #666”的邊框，這在box是直角的時候是蠻好看的，但在圓角情況下就不是了。感謝Modernizr，我可以在瀏覽器支持“border-radius”的情況下給box設置一個1px的實邊。
第二條規(guī)則更進步了一點，我們?yōu)椤?content ”元素添加了一個陰影，并且針對支持“box-shadow”屬性的瀏覽器一并移除了border屬性。為什么呢？因為大部分瀏覽器并不為“邊框附帶邊角”的組合外加陰影這樣的效果提供一個好的表現(xiàn)（這是一個應該被注意的瀏覽器的瑕疵，但我們現(xiàn)在卻必須忍受它）。同不使用陰影只使用邊框相比，我寧可只使用陰影包圍元素。采用這種方式，我可以擁有全世界最好的，準確點的，最好的一種CSS表現(xiàn)：在支持“box-shadow”屬性的瀏覽器里將會呈現(xiàn)一個美妙的陰影；只支持“border-radius”屬性的瀏覽器將會呈現(xiàn)一個好看的圓角薄邊框；對于那些這2者都不支持的破爛瀏覽器，我們會看到一個2像素的直角邊框。
出處：藍色理想
責任編輯：bluehearts
上一頁 Modernizr——為HTML5和CSS3而生 [1] 下一頁 Modernizr——為HTML5和CSS3而生 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 Modernizr——為HTML5和CSS3而生 [2]
