1. <video id="z7bfh"></video>

            您的位置:知識庫 ? Web前端

            理解“漸進增強(Progressive Enhancement)”

            來源: Taobao UED  發布時間: 2016-02-20 10:51  閱讀: 7443 次  推薦: 9   原文鏈接   [收藏]  

            Understanding Progressive Enhancement

              原文:Understanding Progressive Enhancement

              作者:Aaron Gustafson

              譯者:空帷 @ Taobao UED

              自 1994 年開始,Web 開發社群就擂起了名為“平穩退化 (Graceful Degradation)”的大鼓。這是一個從工程界引入的概念,其主旨是為那些最新最好的瀏覽器提供更全方位的瀏覽體驗,而對不幸使用 Netscape 4 的人們僅提供很少的一些基本功能。這個方法的確能夠奏效,但它卻并不真正符合 Tim Berners-Lee (譯注:萬維網之父)對“普及的可訪問型 Web (Universally Accessible Web)”的設計初衷。

              大約十年之后,一些聰明的人開始對“平穩退化”產生質疑,并最終發現它在許多層面上都存在著缺陷。他們致力于改善內容可利用性 (Content Availability)、全局可訪問性 (Overall Accessibility) 和移動設備瀏覽器的能力,并為 Web 開發尋覓到一條新的途徑 —— 一條聚焦于內容并能為舊設備提供更多實際支持的途徑。

              在 2003 年度的 SXSW (譯注:西南偏南節慶及會議,South by Southwest Festivals + Conferences,這里特指其中的“交互”主題會議,除此之外還有“電影”和“音樂”兩個主題)上,Steve Champeon 和 Nick Finck 發表了題為《展望 Web 設計的未來 (Inclusive Web Design For the Future)》的演講。在那次演講中,他們描繪出這條 Web 開發新途徑的應用藍圖。Steve 將之命名為 “漸進增強”。

              兩者間的(微妙)差別

              萬一你正撓著后腦勺,試圖找出“平穩退化”和“漸進增強”之間的差別,那么我可以告訴你:“它們是看待同種事物的兩種觀點”。“平穩退化”和“漸進增強”都關注于同一網站在不同設備里不同瀏覽器下的表現程度。關鍵的區別則在于它們各自關注于何處,以及這種關注如何影響工作的流程。

              “平穩退化”觀點

              “平穩退化”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段,并把測試對象限定為主流瀏覽器(如 IE、Mozilla 等)的前一個版本。

              在這種設計范例下,舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點,因此除了修復較大的錯誤之外,其它的差異將被直接忽略。

              “漸進增強”觀點

              “漸進增強”觀點則認為應關注于內容本身。請注意其中的差別:我甚至連“瀏覽器”三個字都沒提

              內容是我們建立網站的誘因。有的網站展示它,有的則收集它,有的尋求,有的操作,還有的網站甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

              如何發揮效用?

              深植“漸進增強”觀念其實十分簡單:即從內容出發。內容為樣式和交互構建起堅實的基礎。假如你愛吃甜食,那么可以將其類比為一粒 M&M 花生巧克力:

            M&Ms 花生巧克力
            圖:“漸進增強”的巧克力分層結構
            (由上至下分別為:“內容”、“表現”和“客戶端腳本”)

              我們先從你的花生仁兒——內容講起,它由豐富 (rich) 的語義化 (X)HTML 代碼構成。包裹著內容的是一層濃郁 (rich) 的 CSS 奶油。最后,JavaScript 就是那層可以提升其美妙口感的堅硬糖衣(并確保它“只溶于口,不溶于手”)。

              如果你對 Web 標準化運動的口號——分離、分離、再分離——爛熟于心的話,那么這個比喻就顯得極為合適。因為基于 Web 標準的開發經常被比喻為夾心蛋糕(或是更富想象力的比喻——乳脂松糕)。

              我選用 M&M 花生巧克力來做類比,是因為其每一個外層都完全包裹著里層,非常類似于網頁里樣式和腳本包含內容的方式。

              如果你還愿意繼續聽我的“食物類比論”(我希望它沒有讓你覺得有點兒餓),我將解釋“為何這種觀點更為合理”,并告訴你“該范例下各層應如何實現交互”。

              花生仁兒

              有些人喜歡吃花生;事實上比起 M&Ms 花生巧克力,有些人會更偏愛花生本身。相似地,一些人(還有一些諸如搜索引擎蜘蛛的東西)只希望得到內容。

            然而,也有一些人其實無法享用包裹著花生仁的巧克力和糖衣(打個不恰當的比方,比如糖尿病患者)。類比于前者,使用移動設備或舊版瀏覽器的人們可能無福享受你優美的視覺設計或是由流暢的 Ajax 所驅動的界面交互設計。

              請確保你的標簽結構能將其所包含的內容以最詳實的程度傳達給用戶,這一點對于為上述用戶提供基本的瀏覽體驗來說非常必要。

              巧克力涂層

              接下來,你可以將內容浸入那杯熱騰騰的美味 CSS 巧克力之中了——但在給它們包裹上糖衣之前,你還需要留意如下一些事項。

              有些人愛吃用巧克力包裹的花生。這些人就如同那些使用僅支持 CSS 卻可能缺乏相應的 JS 支持的瀏覽器用戶。或者他們受雇于某公司,而該公司的 IT 人員卻疲于應付 JavaScript 安全性問題。對于這些人, JavaScript 有可能是被完全禁止的。

              但不管是他們愛吃或是因故只能吃到這種巧克力花生豆(花生外僅有巧克力涂層,無糖衣),他們都應有享受這頓美味的權利。有一些方法可以幫助你將樣式以“漸進增強”的方式來裝飾內容,它們將是本系列的下一篇文章所要探討的主題。

              堅硬的糖衣

              最后,你可以開始向這團混合物里添加 JavaScript 了。JavaScript 擁有豐富的交互可能性,它還具有操作以及與內容和表現層實現交互的能力,可以說它能真正將訪問網站變成一種“體驗”。

              我并不了解 M&M 是如何將那層堅硬的糖衣附著到最外層的(不過我猜想不過是再一次將巧克力豆浸入調料的過程),但只要你腦袋里想著“漸進增強”,那么給網站添加基于 JavaScript 功能和交互將變得易如反掌。而且,就像 M&M 可以擁有眼花繚亂的顏色一樣,JavaScript 的體驗也可以因為目標瀏覽器和設備能力的不同而各富特色。

              你可能已經知道,這種開發方式就被稱為“無侵入 (Unobtrusive)”。我將在本系列的第三篇及最終篇里詳述其技術內涵并指導實踐。

              把它們組合起來

              一旦你理解了“漸進增強”思想并開始用它來指導實踐,那么你會發現開發過程實際上變得非常簡單;或許比做一粒巧克力豆還要簡單。本系列接下來的兩篇文章將幫助你使用 CSSJavsScript 來提煉你的“漸進增強”技巧,并告訴你如何將思想轉化為代碼。

              (插圖:Kevin Cornell

              關于作者

              ALA 的技術編輯 Aaron Gustafson 是 Web 開發商店—— Easy Designs 的創始人和首席顧問。他時常針對 Web 標準撰寫文章和發表演說,并致力于提升 Web 的可用性和可訪問性。

              譯者的話

              本文涉及到三個極具爭議的術語譯名:“漸進增強 (Progressive Enhancement)”、“平穩退化 (Graceful Degradation)”和“無侵入 (Unobtrusive)”,為了保證多數人閱讀時的流暢度,我采納了這三種比較流行的譯法;而為了照顧更多不習慣此譯法的讀者,我均附上了英文原詞,此類讀者可以把譯名作為原詞的代號來看待。另外,翻譯是一種極富主觀色彩的行為,我個人在多數的時候會用意譯來處理較為拗口的句子,“信達雅”是所有譯者的終極目標,但如果我的翻譯不合您的口味,敬請原諒。最后,附上團隊中另一成員——玉伯所翻譯的另一個版本,希望能為您提供更多的選擇。

            9
            2

            Web前端熱門文章

              Web前端最新文章

                最新新聞

                  熱門新聞

                    中文大香蕉在线影院