|
Modernizr——為HTML5和CSS3而生
10年前，只有最尖端的網(wǎng)站設(shè)計(jì)師會(huì)為網(wǎng)頁的布局和修飾使用CSS。那時(shí)的瀏覽器對(duì)CSS進(jìn)行布局的支持即不完善又漏洞百出，所以這些人在堅(jiān)持WEB標(biāo)準(zhǔn)化的同時(shí)，也不得不采用hacks來使得他們的頁面在所有瀏覽器中都能正常顯示。其中一個(gè)被使用的越來越多的hack技術(shù)是瀏覽器嗅探（browser sniffing），使用Javascript里的navigator.userAgent屬性來判斷用戶使用的是什么品牌哪個(gè)版本的瀏覽器。瀏覽器嗅探技術(shù)可以快捷的將代碼進(jìn)行分支，以便針對(duì)不同的瀏覽器應(yīng)用不同的指令。
今天，以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），這意味著我們不必通過問瀏覽器“你是誰？”來做出不靠譜的推測(cè)。取而代之，我們問瀏覽器“你能做這個(gè)或那個(gè)嗎”。這么來檢測(cè)瀏覽器的能力是很簡(jiǎn)便的，但一個(gè)個(gè)的花時(shí)間去手工測(cè)試依然令人厭煩。此時(shí) Modernizr 可以幫助我們。
Modernizr：專為HTML5和CSS3開發(fā)的功能檢測(cè)類庫
Modernizr是一個(gè)開源的JS庫，它使得那些基于訪客瀏覽器的不同（指對(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)頁中嵌入Modernizr的腳本時(shí)，它會(huì)檢測(cè)當(dāng)前瀏覽器是否支持CSS3的特性，比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等，同時(shí)也會(huì)檢測(cè)是否支持HTML5的特性——比如audio、video、本地儲(chǔ)存、和新的 <input>標(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ā)者就可以立即使用這些更富有語義化的標(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í)例。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 Modernizr——為HTML5和CSS3而生 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 Modernizr——為HTML5和CSS3而生 [1]
第 2 頁 
