漸進增強一直是現代Web開發的基礎之一，我第一次接觸到這個概念是在Dave Shea的部落格上,當時他介紹了所謂的MOSe——Mozilla、Opera和Safari增強。你應該對Dave有所耳聞，就是他創造了CSS禪意花園。

Dave是這樣解釋MOSe方法的：

“在IE瀏覽器上建立一個基本的功能頁面，你可以在擁有高階選擇器的現代瀏覽器裡新增額外的功能，等等，這是我們可以在未來幾年持續前進的唯一方法，讓我們擁抱它吧。”

漸進增強

同年早些時候，Steve Champeon 開始推廣漸進增強概念。他同Jeffrey Zeldman一樣，是Web標準的建立人之一。

“與其優雅降級，不如漸進增強。首先為最新的、不同功能的裝置構建文件，透過單獨的邏輯繼續增強這些文件表現。不要讓基準裝置承擔過多的責任，而應該讓使用現代瀏覽器的使用者擁有更加豐富的體驗。”

許多人將漸進增強概念視為設計開發網站的理想方法。從對Web特性支援較少的瀏覽器上開始，設計一個僅能提供最基本體驗的網頁，然後再在高階和現代瀏覽器上，根據其所支援的特性，實現不同細節的分層設計。

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

時代更迭

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

Mac OS X 10.2 (Jaguar)Windows XP (SP2)Adobe Photoshop CSMacromedia Dreamweaver 7Microsoft FrontPage 2003Internet Explorer 6Apple Safari 1Mozilla Phoenix/FirebirdOpera 7

隨著時間的流逝，我們會不斷升級軟體，然而在實踐漸進增強方面，我們總是固執地堅守著以前的常識。

沉醉其中

這並不是說漸進增強不值得稱讚，事實恰恰相反。

基本內容和功能應該總是可訪問的。應該使用簡潔、清晰和語義化的標記。樣式表應該可以實現視覺設計的所有方面。網頁的互動行為應儘可能交給指令碼來完成。

我們在開發時遵循這些原則，頁面的可用性或可訪問從來不依賴CSS或者JavaScript。當我們使用有意義的HTML標籤時，它將變得更輕量、更具有適應能力。CSS使得在各種尺寸和型別的螢幕上的排版更容易。

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

老舊瀏覽器和過時裝置

Zoe Gillenwater在她的演講“使用彈性佈局提高響應能力”中提到了CSS中flexbox佈局的應用，她提倡使用彈性佈局在設計中實現漸進增強。但問題是，在漸進增強實踐中，往往會為了遷就還在使用老舊瀏覽器和過時裝置的使用者，而放棄使用先進的CSS屬性，甚至放棄使用flexbox這樣強大的工具。

增強或改善，往往意味著從底部開始。僅僅針對各種瀏覽器普遍支援的特性進行Web設計是遠遠不夠的，這也是造成當今許多網頁如此平庸的原因。我們使用新的CSS特性作為一種工具時，需要為使用新瀏覽器和裝置的使用者設計更多、更好的體驗，就如Dan Cederholm所說“為新版瀏覽器使用者提供增強的文件，以便讓他們獲得更加豐富的體驗。”

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

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

抖個機靈

我們絕不能被那些老舊的瀏覽器與過時的裝置限制了創造力。相反，我們應該利用新技術，為每一位使用者的每一次瀏覽，設計出最好的體驗。這樣我們可以充分利用一切能力更強的瀏覽器和新興技術，實現更高和更優的設計。

我猜你現在肯定在想優雅降級的事兒？

躊躇不前

漸進增強的另一面——優雅降級——確保當樣式和指令碼不可用或無法被瀏覽器解析時，使用者依然可以訪問網頁的內容。採用優雅降級方法，意味著網站的功能永遠都是可用的，儘管一定程度上也許是低保真的設計，好在它的內容仍然可以訪問。

優雅降級就夠了麼？

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

去xx的優雅。

硬派的方法，是進一步推進優雅降級，併發揮我們的創造天賦去設計，不僅只針對裝置的螢幕大小，而且也要考量其瀏覽器的功能。我們需要重新理解優雅降級，並面對今天這個領域所遇到的挑戰。

如果要建立令人期待且鼓舞人心的網站，我們必須打破過往漸進增強和優雅降級的經驗藩籬。只是鼓勵人們去使用高效能或者對Web特性支援良好的瀏覽器，是遠遠不夠的。

相反，我們應該充分利用新的技術，並且精心設計每一次使用者體驗，以便於充分發揮使用者使用的瀏覽器的潛力。這可能意味著最終頁面跟設計稿有很大不同，有時在不同的瀏覽器或裝置上差異更大。

對於一些人來說，這種方法似乎太激進，甚至有些偏執。但這種方法更好地利用了當今的技術，充分釋放創造性，令使用者體驗和設計達到更高水平，並讓我們開發出更鼓舞人心和富有想象力的網站與應用。

擁抱新特性

在漸進增強和優雅降級的概念剛提出時，網路是一個與今日完全不同的環境。在瀏覽器新特性支援領域，兩款競爭的瀏覽器間鮮有差異。而今天一切都改變了，優秀的現代瀏覽器支援各種Web特性，而老舊的瀏覽器的支援性很差，二者之間的鴻溝越來越大。下面是一些最新的CSS選擇器和屬性，在現代瀏覽器中有著穩定和良好的表現。

對任何元素的選擇器繫結樣式不再使用id跟class屬性。以多種方式實現透明效果，包括RGBa、opacity屬性和CSS濾鏡。以更多的方式讓背景跟邊框一起生效。使用偏移、旋轉、縮放和拉伸，實現元素變形。應用過渡特效，實現微妙的互動效果。製作以前只能透過JavaScript或Flash實現動畫的逐幀動畫。當前桌面瀏覽器對CSS屬性的支援情況

CSS作為高自由度的創作工具，幫助我們實現了很多驚豔的Web體驗。如果在創作中不充分利用它們，是多麼短視和愚蠢啊。如今，在掌握這些技術的前提下，我們為什麼不去使用這些屬性呢，哪怕只用其中的一個。

那麼到底是什麼在阻止我們?只不過是幾個陳舊的想法罷了。打破傳統

漸進增強和優雅降級，都不應該被教條或不經大腦地應用在我們的Web設計中。相反，它們提供了一個新的起點，而現在，我們要重新定義響應式設計的原則，以適應不斷變化的網路。

本文節選自《前端體驗設計——HTML5+CSS3終極修煉》

內容簡介

本書是Web設計暢銷書《超越CSS》作者的最新力作，結合當前移動網際網路下硬體的變化，以一個資深Web設計開發者的視角，將傳統的工作方法與最新技術相結合，透過豐富的案例為讀者展示瞭如何設計高效、充滿創意的Web頁面和應用，並透過挖掘高階佈局方式、無障礙頁面、語義化標籤、高階CSS技巧等內容，快速提升讀者的視野與設計開發水平。

此外，騰訊FERD團隊（前端研發中心）在翻譯本書的過程中，不僅嚴謹精準地表達出了作者的觀點，還兼顧了國內行業的實際情況，幫助讀者更加自然地理解原文的要義。

本書結構清晰合理、內容深入淺出，無論您是有一定經驗的前端開發工程師，還是Web設計與開發的愛好者，本書都值得您反覆品味，仔細吸收。