CSS3中的“漸進增強”開發思想

隨著CSS3在各大瀏覽器中的支援率越來越高，也有更多的網站開發人員和網頁設計者開始關心CSS3的實用技巧和使用CSS3設計“背後的理念”。畢竟，雖然支援率走高的趨勢是好的，但是面前冷酷的事實仍然是各瀏覽器的標準紛雜，W3C的規範滯後。需要一種理念，或至少是一種倡議，指導Web開發人員應付這些複雜的局面。

在《CSS3實用指南》中，Zoe推薦給我們的是這樣一種思想，漸進增強。漸進增強（Progressive Enhancement）是這樣一種開發方式：在你編寫Web頁面時，首先讓它們在基礎的瀏覽器和裝置上正常工作且展現得當，然後再輔以更高階但非必要的CSS和JavaScript等增強功能來為當前和未來的瀏覽器提供更好的支援。舉例來說，你可以用樸素卻語義化的HTML構建一個表單，即使沒有樣式它也能得到良好地展現，禁用JavaScript後它也可以正常地工作；隨後你可以用CSS來豐富其外觀，再使用JavaScript增加客戶端層面的驗證。我們的目標是利用現代瀏覽器的優勢特性在確保網站對於每個使用者來說可用的同時創造儘可能豐富的體驗。

這個理念在國內尚處於預熱的階段，但是《JavaScript DOM程式設計藝術》的作者Jeremy Keith、jQuery之父John Resig等等很多前端暢銷圖書的作者以及技術大牛們，都曾在自己的書中或各種技術大會上倡導這一設計理念。幾年來，漸進增強、平穩退化、不唐突性等概念也已經在國內前端技術社群中逐漸深入人心，同時也有一批積極的踐行者，比如淘寶網開發團隊等。

具體到CSS3的實踐中，雖然“向儘可能多的人提供儘可能好的體驗”這一偉大目標聽起來相當不錯，但其實不使用漸進增強技巧你也可以實現它——比如為舊式瀏覽器提供一套相容方案來確保頁面與其在新式瀏覽器下的表現和行為儘量保持一致——但通常來說這並不是明智的選擇。改用漸進增強技術能夠讓網站的視覺豐富程度隨著瀏覽器的現代化發展而不斷提升，這能讓使用者和你雙方都受益。

首先，為了在支援度較低的瀏覽器也能實現相同的效果而去新增Hack、相容方案、模擬性指令碼或其他技術將會耗費大量的人力和時間。即使最終你（在所能測試的有限數量的使用者環境之下）實現了近乎一致的表現，但問題是——使用者真正收穫了什麼？所有試圖讓IE看起來堪比年輕它十歲的瀏覽器的那些努力，完全可以用來改善網站的可訪問性，或是進行更多的可用性測試，或是去實現其他真正可以幫到使用者的改進工作，而不僅僅是讓頁面看起來“更靚一點”。

除此之外，想讓網站在任何環境下看起來都保持一致是不可能的，因此不管你為此付出多少努力，結局依舊會令你失望。因此，如果網站無論如何都看起來不同的話，那麼為什麼不用CSS3技術來使它在新式瀏覽器上看起來更為驚豔呢？某些CSS3特性在不支援它的瀏覽器中簡直是“無法模擬實現”的，但使用漸進增強的話，你就無需為了讓你的網站適合所有人而放棄這些技術。僅僅因為部分人不願或不能升級瀏覽器，卻讓使用新型瀏覽器的使用者無法享受CSS3所提供的偉大技術，這是毫無道理可言的。相反地，先讓網站能夠正常工作於盡可能舊的瀏覽器上，然後不斷為它在新型瀏覽器上實現更多的增強和改進。這個方法可讓每個使用者都得到對他來說最好的體驗。隨著時間的推移，當越來越多的人開始升級瀏覽器而瀏覽器本身的支援度也不斷得到提升時，就會有越來越多的人體驗到這些增強和改進，它不斷而有效地使網站變得越來越好，卻無需你刻意去做什麼。只需要一次實現，它就讓網站的體驗與時俱進。

大部分人可能永遠都不知道你的網站在不同的瀏覽器和裝置上看起來並不相同，因為普通人並不會像Web設計師一樣使用多個瀏覽器來對比設計的細節差異。即使他們會使用不同瀏覽器來訪問你的網站，只要這些差異不會影響網站的易用性，他們也不會對此有什麼特別的想法。說到底，假如有人上班時使用IE8，回家後使用筆記本上的Chrome，在iPhone上使用Safari，並且在Wii上使用Opera來訪問你的網站，我想他終究會習慣所有這些不同裝置上的不同表現。

如果你對漸進增強這個理念感興趣，也可以關注這本書《Designing with Progressive Enhancement: Building the Web that Works for Everyone》，及其網站http://www.filamentgroup.com/dwpe/#aboutthisbook。這也是圖靈在2012年計劃出版的書籍，敬請期待。

（本文部分節選自《CSS3實用指南》）