原文:Understanding Progressive Enhancement
作者:Aaron Gustafson
翻譯:http://lifesinger.org/
從1994年開始,Web開發社群就敲響了優雅降級(Graceful Degradation)的
鼓聲。這個概念來自工程世界,其核心理念是給最新最強大的浏覽器全套餐式的體驗,而給那些不幸還在使用Netscape
4的可憐人們隻留些殘羹冷炙般的基本功能。毫無疑問,這發揮了作用。但是它并不很符合Tim
Berners-Lee(譯注:網際網路之父)關于普遍可通路性網絡(Universally Accessible Web)的原始願景。
大約10年後,一些聰明的家夥開始質疑優雅降級,發現它在很多層面上有不足之處。他們将精力集中在内容可用性(Content
Availability)、總體可通路性(Overall
Accessibility)和移動裝置浏覽器的能力上,尋找到了一條Web開發的新途徑——此方法将内容作為關注焦點,而不隻是對舊裝置的支援嘴上說說
卻沒有實際行動。
在2003年的SXSW會議(譯注:一個關于電影、音樂和互動的會議)中,Steve Champeon和Nick Finck做了名為 “面向未來的全方位Web設計” 的演講。這樣,他們揭示了這種Web開發新方法的藍圖。Steve還給它取了個名稱:漸進增強(Progressive Enhancement)。
這裡有個(微妙的)差别
如果你撓着頭想弄清楚優雅降級和漸進增強的差別,我告訴你,這是視角問題。優雅降級和漸進增強都考慮網站在各種裝置的各種浏覽器上如何良好運轉。兩者差別的關鍵在于它們各自關注的焦點,以及這種關注對工作流程的影響。
優雅降級的視角
優雅降級關注于在最先進/最全能的浏覽器上建構網站。在被認為“老的”或能力不足的浏覽器中的測試,經常要等到開發周期的最後一個環節才進行,并且通常限制在主流浏覽器(如IE、Mozzila等)的前一個釋出版本中。
在這種模式下,老的浏覽器隻可能提供差強人意(poor, but passable)的體驗。或許會做些小更新檔來适應某個特定浏覽器,但這些浏覽器畢竟不是關注的焦點,除了修正重大的錯誤,也不會再費多大的神了。
漸進增強的視角
漸進增強關注于内容。請注意差別:我甚至都沒提及浏覽器。
内容是我們最初建立網站的原因。有些網站傳播内容,有些收集内容,有些請求内容,有些操作内容,有些網站以上所有功能都有,然而它們都需要内容。這就是漸進增加成為一種更适合的模式的關鍵所在。這也是Yahoo!迅速采納這種模式并用它建立了分級浏覽器支援(Graded Browser Support)政策的原因。
它是怎樣運作的
進入漸進增強的思維方法很簡單:隻要從内容開始往外想。内容形成堅實的基石,在此之上才能添加樣式和互動。如果你愛吃糖果,可以将它想像成一顆M&M花生巧克力:
(圖示:漸進增強的巧克力層)
從内容花生開始,将其标記為富含語義的(X)HTML. 接着給内容裹上一層富含奶油的CSS. 最後,添加JavaScript作為糖果硬殼,這就做成了一顆可口無比的美味(并使得它不會在你手裡融化)。
如果非常熟悉Web标準化運動的口号——分離、分離、分離——這個類比就相當清楚了。基于Web标準的開發經常被比作夾心蛋糕(或者,可以更富想像力地比作為松糕(譯注:一種多層蛋糕,可以夾水果、奶油、沙司等))。
我更傾向拿M&M花生巧克力來類比,因為它的外層把内容完全包裹住了,這和我們的樣式與腳本将内容包裹起來幾乎是一樣的。
如果你允許我的食物類比論再多講一點(希望不會讓你感覺饑餓),我将解釋為什麼這種方式更好以及在這種模式下各層之間是如何互動的。
花生仁
有些人喜歡花生。實際上,有人喜歡花生勝過M&M花生巧克力。類似地,有些家夥(以及像搜尋引擎爬蟲這類東西)隻想要内容。
還有些人無福消受花生上的巧克力和糖果層(例如糖尿病患者)。和他們類似,移動裝置或老浏覽器使用者可能無法看到漂亮的設計,或者與流暢的AJAX驅動的界面互動。
確定标記能夠将所包裹的内容的細節最大限度地傳達出來,這對于給這些使用者提供基本體驗至關重要。
巧克力外衣
接下來,可以将内容小心地浸入芳香美味的CSS暖浴中了。不過在跳進糖果硬殼之前,還有些額外的考慮。
有的人愛吃巧克力裹着的花生。這些人就像中級使用者,他們的浏覽器有比較好的CSS支援,但可能沒有很好的JavaScript支援。或者,可能在他
們工作的公司裡,IT安全人員對JavaScript極其病态性地恐懼。對他們來說,JavaScript就可能完全被禁用了。
無論是傾向于愛吃巧克力花生(譯注:一種直接用巧克力覆寫的花生,沒有外層硬殼,類似于有内容和CSS但沒有JavaScript支援的網站)還是被限制隻能吃巧克力花生,這些人都應該得到滿足。這裡有幾種漸進增強的方式可以将樣式應用于内容,這将是本系列第二篇文章的話題。
糖果硬殼
最後,可以将JavaScript添加到内容和樣式的混合體中了。JavaScript提供了富互動的可能性,同時具有操作内容層和展現層并與其互動的能力,這實際上使得JavaScript成為了把網站帶入“體驗”高度的一味配料。
我不确定糖果硬殼到底是怎樣添加到M&M花生巧克力上的(我猜是另一種什麼浸蘸過程吧),但是,在腦中想着漸進增強的話,在網站上加入基于
JavaScript的功能和互動就輕而易舉了。另外,就如M&M花生巧克力有各種各樣顔色一樣,依據所運作的浏覽器和裝置的能
力,JavaScript的體驗也可以各不相同。
正如你可能知道的那樣,這種類型的開發叫做無侵入式(Unobtrusive)JavaScript. 我将在本系列的第三篇和最後一篇文章中講述這些技巧和實踐。
都放在一起
一旦了解了漸進增強的理念并開始在實踐中使用,那麼用漸進增強進行開發就非常簡單了。也許比做糖果還簡單。本系列接下來的兩篇文章将幫助你使用CSS和JavaScript來磨練你的漸進增強技巧,并展示怎樣把哲學轉換成代碼。
~~~~~~
譯注:
- Graceful Degradation有譯為預留退路、平穩退化的,但我覺得這兩個翻譯沒有表達原意,不如直接翻譯成優雅降級的好。
- Unobtrusive有譯為不唐突的、分離的、低調的,在Web開發領域,我覺得翻譯成“無侵入的”最能表達原意。
2008年10月08日 射雕&安吉 譯于杭州
2008年10月09日 審校
2008年10月14日 根據taine的建議,去掉了譯文中許多“你”、“你的”等無意義詞
原文:Understanding Progressive Enhancement
作者:Aaron Gustafson
翻譯:http://lifesinger.org/
從1994年開始,Web開發社群就敲響了優雅降級(Graceful Degradation)的
鼓聲。這個概念來自工程世界,其核心理念是給最新最強大的浏覽器全套餐式的體驗,而給那些不幸還在使用Netscape
4的可憐人們隻留些殘羹冷炙般的基本功能。毫無疑問,這發揮了作用。但是它并不很符合Tim
Berners-Lee(譯注:網際網路之父)關于普遍可通路性網絡(Universally Accessible Web)的原始願景。
大約10年後,一些聰明的家夥開始質疑優雅降級,發現它在很多層面上有不足之處。他們将精力集中在内容可用性(Content
Availability)、總體可通路性(Overall
Accessibility)和移動裝置浏覽器的能力上,尋找到了一條Web開發的新途徑——此方法将内容作為關注焦點,而不隻是對舊裝置的支援嘴上說說
卻沒有實際行動。
在2003年的SXSW會議(譯注:一個關于電影、音樂和互動的會議)中,Steve Champeon和Nick Finck做了名為 “面向未來的全方位Web設計” 的演講。這樣,他們揭示了這種Web開發新方法的藍圖。Steve還給它取了個名稱:漸進增強(Progressive Enhancement)。
這裡有個(微妙的)差别
如果你撓着頭想弄清楚優雅降級和漸進增強的差別,我告訴你,這是視角問題。優雅降級和漸進增強都考慮網站在各種裝置的各種浏覽器上如何良好運轉。兩者差別的關鍵在于它們各自關注的焦點,以及這種關注對工作流程的影響。
優雅降級的視角
優雅降級關注于在最先進/最全能的浏覽器上建構網站。在被認為“老的”或能力不足的浏覽器中的測試,經常要等到開發周期的最後一個環節才進行,并且通常限制在主流浏覽器(如IE、Mozzila等)的前一個釋出版本中。
在這種模式下,老的浏覽器隻可能提供差強人意(poor, but passable)的體驗。或許會做些小更新檔來适應某個特定浏覽器,但這些浏覽器畢竟不是關注的焦點,除了修正重大的錯誤,也不會再費多大的神了。
漸進增強的視角
漸進增強關注于内容。請注意差別:我甚至都沒提及浏覽器。
内容是我們最初建立網站的原因。有些網站傳播内容,有些收集内容,有些請求内容,有些操作内容,有些網站以上所有功能都有,然而它們都需要内容。這就是漸進增加成為一種更适合的模式的關鍵所在。這也是Yahoo!迅速采納這種模式并用它建立了分級浏覽器支援(Graded Browser Support)政策的原因。
它是怎樣運作的
進入漸進增強的思維方法很簡單:隻要從内容開始往外想。内容形成堅實的基石,在此之上才能添加樣式和互動。如果你愛吃糖果,可以将它想像成一顆M&M花生巧克力:
(圖示:漸進增強的巧克力層)
從内容花生開始,将其标記為富含語義的(X)HTML. 接着給内容裹上一層富含奶油的CSS. 最後,添加JavaScript作為糖果硬殼,這就做成了一顆可口無比的美味(并使得它不會在你手裡融化)。
如果非常熟悉Web标準化運動的口号——分離、分離、分離——這個類比就相當清楚了。基于Web标準的開發經常被比作夾心蛋糕(或者,可以更富想像力地比作為松糕(譯注:一種多層蛋糕,可以夾水果、奶油、沙司等))。
我更傾向拿M&M花生巧克力來類比,因為它的外層把内容完全包裹住了,這和我們的樣式與腳本将内容包裹起來幾乎是一樣的。
如果你允許我的食物類比論再多講一點(希望不會讓你感覺饑餓),我将解釋為什麼這種方式更好以及在這種模式下各層之間是如何互動的。
花生仁
有些人喜歡花生。實際上,有人喜歡花生勝過M&M花生巧克力。類似地,有些家夥(以及像搜尋引擎爬蟲這類東西)隻想要内容。
還有些人無福消受花生上的巧克力和糖果層(例如糖尿病患者)。和他們類似,移動裝置或老浏覽器使用者可能無法看到漂亮的設計,或者與流暢的AJAX驅動的界面互動。
確定标記能夠将所包裹的内容的細節最大限度地傳達出來,這對于給這些使用者提供基本體驗至關重要。
巧克力外衣
接下來,可以将内容小心地浸入芳香美味的CSS暖浴中了。不過在跳進糖果硬殼之前,還有些額外的考慮。
有的人愛吃巧克力裹着的花生。這些人就像中級使用者,他們的浏覽器有比較好的CSS支援,但可能沒有很好的JavaScript支援。或者,可能在他
們工作的公司裡,IT安全人員對JavaScript極其病态性地恐懼。對他們來說,JavaScript就可能完全被禁用了。
無論是傾向于愛吃巧克力花生(譯注:一種直接用巧克力覆寫的花生,沒有外層硬殼,類似于有内容和CSS但沒有JavaScript支援的網站)還是被限制隻能吃巧克力花生,這些人都應該得到滿足。這裡有幾種漸進增強的方式可以将樣式應用于内容,這将是本系列第二篇文章的話題。
糖果硬殼
最後,可以将JavaScript添加到内容和樣式的混合體中了。JavaScript提供了富互動的可能性,同時具有操作内容層和展現層并與其互動的能力,這實際上使得JavaScript成為了把網站帶入“體驗”高度的一味配料。
我不确定糖果硬殼到底是怎樣添加到M&M花生巧克力上的(我猜是另一種什麼浸蘸過程吧),但是,在腦中想着漸進增強的話,在網站上加入基于
JavaScript的功能和互動就輕而易舉了。另外,就如M&M花生巧克力有各種各樣顔色一樣,依據所運作的浏覽器和裝置的能
力,JavaScript的體驗也可以各不相同。
正如你可能知道的那樣,這種類型的開發叫做無侵入式(Unobtrusive)JavaScript. 我将在本系列的第三篇和最後一篇文章中講述這些技巧和實踐。
都放在一起
一旦了解了漸進增強的理念并開始在實踐中使用,那麼用漸進增強進行開發就非常簡單了。也許比做糖果還簡單。本系列接下來的兩篇文章将幫助你使用CSS和JavaScript來磨練你的漸進增強技巧,并展示怎樣把哲學轉換成代碼。
~~~~~~
譯注:
- Graceful Degradation有譯為預留退路、平穩退化的,但我覺得這兩個翻譯沒有表達原意,不如直接翻譯成優雅降級的好。
- Unobtrusive有譯為不唐突的、分離的、低調的,在Web開發領域,我覺得翻譯成“無侵入的”最能表達原意。
2008年10月08日 射雕&安吉 譯于杭州
2008年10月09日 審校
2008年10月14日 根據taine的建議,去掉了譯文中許多“你”、“你的”等無意義詞