Web設(shè)計的崢嶸歲月

漸進(jìn)增強(qiáng)一直是現(xiàn)代Web開發(fā)的基礎(chǔ)之一，我第一次接觸到這個概念是在Dave Shea的博客上,當(dāng)時他介紹了所謂的MOSe——Mozilla、Opera和Safari增強(qiáng)。你應(yīng)該對Dave有所耳聞，就是他創(chuàng)造了CSS禪意花園。

Dave是這樣解釋MOSe方法的：

“在IE瀏覽器上創(chuàng)建一個基本的功能頁面，你可以在擁有高級選擇器的現(xiàn)代瀏覽器里添加額外的功能，等等，這是我們可以在未來幾年持續(xù)前進(jìn)的唯一方法，讓我們擁抱它吧。”

Dave建議我們應(yīng)該首先為低級瀏覽器創(chuàng)建一個最低可用頁面，尤其針對IE的早期版本，然后在支持CSS的子選擇器、兄弟選擇器和屬性選擇器的現(xiàn)代瀏覽器里應(yīng)用更多的樣式。你會注意到，Dave討論頁面應(yīng)該如何工作，而不是應(yīng)該如何設(shè)計。

漸進(jìn)增強(qiáng)

同年早些時候，Steve Champeon 開始推廣漸進(jìn)增強(qiáng)概念。他同Jeffrey Zeldman一樣，是Web標(biāo)準(zhǔn)的創(chuàng)建人之一。

“與其優(yōu)雅降級，不如漸進(jìn)增強(qiáng)。首先為最新的、不同功能的設(shè)備構(gòu)建文檔，通過單獨的邏輯繼續(xù)增強(qiáng)這些文檔表現(xiàn)。不要讓基準(zhǔn)設(shè)備承擔(dān)過多的責(zé)任，而應(yīng)該讓使用現(xiàn)代瀏覽器的用戶擁有更加豐富的體驗。”

許多人將漸進(jìn)增強(qiáng)概念視為設(shè)計開發(fā)網(wǎng)站的理想方法。從對Web特性支持較少的瀏覽器上開始，設(shè)計一個僅能提供最基本體驗的網(wǎng)頁，然后再在高級和現(xiàn)代瀏覽器上，根據(jù)其所支持的特性，實現(xiàn)不同細(xì)節(jié)的分層設(shè)計。

這意味著在實際操作時，優(yōu)先使用老舊瀏覽器支持較為成熟的CSS選擇器和屬性，而對于較新的屬性則謹(jǐn)慎使用。理論上這種漸進(jìn)增強(qiáng)的方法是行得通的，但是在實踐中，我們又該如何選擇不同的增強(qiáng)方案，才能發(fā)揮這種設(shè)計原則的最大潛力？盡管Steve在文章中使用了術(shù)語“包容性的網(wǎng)頁設(shè)計”，但我確信，他從未打算讓我們與功能差勁的瀏覽器糾纏，限制我們的漸進(jìn)增強(qiáng)創(chuàng)作思路。就算他提過這樣的想法，你能猜猜他和Dave的那些文章是什么時候的嗎？2003年！

時代更迭

2003年，巨大的30GB容量的iPod可算是個潮物，在那一年，如果你的工作是設(shè)計、開發(fā)網(wǎng)頁或者僅僅是瀏覽網(wǎng)頁，你肯定使用過下面這些軟件。

Mac OS X 10.2 (Jaguar)

Windows XP (SP2)

Adobe Photoshop CS

Macromedia Dreamweaver 7

Microsoft FrontPage 2003

Internet Explorer 6

Apple Safari 1

Mozilla Phoenix/Firebird

Opera 7

隨著時間的流逝，我們會不斷升級軟件，然而在實踐漸進(jìn)增強(qiáng)方面，我們總是固執(zhí)地堅守著以前的常識。

沉醉其中

這并不是說漸進(jìn)增強(qiáng)不值得稱贊，事實恰恰相反。

基本內(nèi)容和功能應(yīng)該總是可訪問的。

應(yīng)該使用簡潔、清晰和語義化的標(biāo)記。

樣式表應(yīng)該可以實現(xiàn)視覺設(shè)計的所有方面。

網(wǎng)頁的交互行為應(yīng)盡可能交給腳本來完成。

我們在開發(fā)時遵循這些原則，頁面的可用性或可訪問從來不依賴CSS或者JavaScript。當(dāng)我們使用有意義的HTML標(biāo)簽時，它將變得更輕量、更具有適應(yīng)能力。CSS使得在各種尺寸和類型的屏幕上的排版更容易。

漸進(jìn)增強(qiáng)的理念不止如此，然而我們必須小心謹(jǐn)慎，不要因為堅持其原則或應(yīng)用其理念而限制了自己的創(chuàng)造力，特別是在視覺設(shè)計方面。我們必須不斷地重新評估如何應(yīng)用這些原則，從而避免我們的作品變得平庸。

老舊瀏覽器和過時設(shè)備

Zoe Gillenwater在她的演講“使用彈性布局提高響應(yīng)能力”中提到了CSS中flexbox布局的應(yīng)用，她提倡使用彈性布局在設(shè)計中實現(xiàn)漸進(jìn)增強(qiáng)。但問題是，在漸進(jìn)增強(qiáng)實踐中，往往會為了遷就還在使用老舊瀏覽器和過時設(shè)備的用戶，而放棄使用先進(jìn)的CSS屬性，甚至放棄使用flexbox這樣強(qiáng)大的工具。

增強(qiáng)或改善，往往意味著從底部開始。僅僅針對各種瀏覽器普遍支持的特性進(jìn)行Web設(shè)計是遠(yuǎn)遠(yuǎn)不夠的，這也是造成當(dāng)今許多網(wǎng)頁如此平庸的原因。我們使用新的CSS特性作為一種工具時，需要為使用新瀏覽器和設(shè)備的用戶設(shè)計更多、更好的體驗，就如Dan Cederholm所說“為新版瀏覽器用戶提供增強(qiáng)的文檔，以便讓他們獲得更加豐富的體驗。”

在過去的幾年里，Zoe提出了很多非常有指導(dǎo)意義的Flexbox實戰(zhàn)案例，具體查閱：zomigi.com/publications/#pub-fwd。

因為我們首先開始為老舊的瀏覽器設(shè)計，所以離最終的卓越設(shè)計還差著十萬八千里。

抖個機(jī)靈

我們絕不能被那些老舊的瀏覽器與過時的設(shè)備限制了創(chuàng)造力。相反，我們應(yīng)該利用新技術(shù)，為每一位用戶的每一次瀏覽，設(shè)計出最好的體驗。這樣我們可以充分利用一切能力更強(qiáng)的瀏覽器和新興技術(shù)，實現(xiàn)更高和更優(yōu)的設(shè)計。

我猜你現(xiàn)在肯定在想優(yōu)雅降級的事兒？

躊躇不前

漸進(jìn)增強(qiáng)的另一面——優(yōu)雅降級——確保當(dāng)樣式和腳本不可用或無法被瀏覽器解析時，用戶依然可以訪問網(wǎng)頁的內(nèi)容。采用優(yōu)雅降級方法，意味著網(wǎng)站的功能永遠(yuǎn)都是可用的，盡管一定程度上也許是低保真的設(shè)計，好在它的內(nèi)容仍然可以訪問。

優(yōu)雅降級就夠了么？

在老舊的或功能較弱的瀏覽器中，考慮可用性是我們能做的最基本，也是最重要的部分。但是優(yōu)雅降級這個術(shù)語，意味著我們應(yīng)該妥協(xié)。

去xx的優(yōu)雅。

硬派的方法，是進(jìn)一步推進(jìn)優(yōu)雅降級，并發(fā)揮我們的創(chuàng)造天賦去設(shè)計，不僅只針對設(shè)備的屏幕大小，而且也要考量其瀏覽器的功能。我們需要重新理解優(yōu)雅降級，并面對今天這個領(lǐng)域所遇到的挑戰(zhàn)。

如果要創(chuàng)建令人期待且鼓舞人心的網(wǎng)站，我們必須打破過往漸進(jìn)增強(qiáng)和優(yōu)雅降級的經(jīng)驗藩籬。只是鼓勵人們?nèi)ナ褂酶咝阅芑蛘邔eb特性支持良好的瀏覽器，是遠(yuǎn)遠(yuǎn)不夠的。

相反，我們應(yīng)該充分利用新的技術(shù)，并且精心設(shè)計每一次用戶體驗，以便于充分發(fā)揮用戶使用的瀏覽器的潛力。這可能意味著最終頁面跟設(shè)計稿有很大不同，有時在不同的瀏覽器或設(shè)備上差異更大。

對于一些人來說，這種方法似乎太激進(jìn)，甚至有些偏執(zhí)。但這種方法更好地利用了當(dāng)今的技術(shù)，充分釋放創(chuàng)造性，令用戶體驗和設(shè)計達(dá)到更高水平，并讓我們開發(fā)出更鼓舞人心和富有想象力的網(wǎng)站與應(yīng)用。

擁抱新特性

在漸進(jìn)增強(qiáng)和優(yōu)雅降級的概念剛提出時，網(wǎng)絡(luò)是一個與今日完全不同的環(huán)境。在瀏覽器新特性支持領(lǐng)域，兩款競爭的瀏覽器間鮮有差異。而今天一切都改變了，優(yōu)秀的現(xiàn)代瀏覽器支持各種Web特性，而老舊的瀏覽器的支持性很差，二者之間的鴻溝越來越大。下面是一些最新的CSS選擇器和屬性，在現(xiàn)代瀏覽器中有著穩(wěn)定和良好的表現(xiàn)。

對任何元素的選擇器綁定樣式不再使用id跟class屬性。

以多種方式實現(xiàn)透明效果，包括RGBa、opacity屬性和CSS濾鏡。

以更多的方式讓背景跟邊框一起生效。

使用偏移、旋轉(zhuǎn)、縮放和拉伸，實現(xiàn)元素變形。

應(yīng)用過渡特效，實現(xiàn)微妙的交互效果。

制作以前只能通過JavaScript或Flash實現(xiàn)動畫的逐幀動畫。

當(dāng)前桌面瀏覽器對CSS屬性的支持情況

CSS作為高自由度的創(chuàng)作工具，幫助我們實現(xiàn)了很多驚艷的Web體驗。如果在創(chuàng)作中不充分利用它們，是多么短視和愚蠢啊。如今，在掌握這些技術(shù)的前提下，我們?yōu)槭裁床蝗ナ褂眠@些屬性呢，哪怕只用其中的一個。

打破傳統(tǒng)

漸進(jìn)增強(qiáng)和優(yōu)雅降級，都不應(yīng)該被教條或不經(jīng)大腦地應(yīng)用在我們的Web設(shè)計中。相反，它們提供了一個新的起點，而現(xiàn)在，我們要重新定義響應(yīng)式設(shè)計的原則，以適應(yīng)不斷變化的網(wǎng)絡(luò)。

本文節(jié)選自《前端體驗設(shè)計——HTML5+CSS3終極修煉》

Web.py

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。