1. 程式人生 > >優雅降級與漸進增強

優雅降級與漸進增強

漸進增強(Progressive Enhancement):一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然後再針對高階瀏覽器進行效果、互動、追加功能達到更好的體驗。

優雅降級(Graceful Degradation):一開始就構建站點的完整功能,然後針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用,然後逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。

其實漸進增強和優雅降級並非什麼新概念,只是舊的概念換了一個新的說法。在傳統軟體開發中,經常會提到向上相容向下相容的概念。漸進增強相當於向上相容,而優雅降級相當於向下相容。向下相容指的是高版本支援低版本的或者說後期開發的版本支援和相容早期開發的版本,向上相容的很少。大多數軟體都是向下相容的,比如說Office2010能開啟Office2007,Office2006,Office2005,Office2003等建的word檔案,但是用Office2003就不能開啟用Office2007,Office2010等建的word檔案!

二者區別


優雅降級和漸進增強只是看待同種事物的兩種觀點。優雅降級和漸進增強都關注於同一網站在不同裝置裡不同瀏覽器下的表現程度。關鍵的區別則在於它們各自關注於何處,以及這種關注如何影響工作的流程。

優雅降級觀點認為應該針對那些最高階、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發週期的最後階段,並把測試物件限定為主流瀏覽器(如 IE、Mozilla 等)的前一個版本。在這種設計範例下,舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點,因此除了修復較大的錯誤之外,其它的差異將被直接忽略。

漸進增強觀點則認為應關注於內容本身。請注意其中的差別:我甚至連“瀏覽器”三個字都沒提。內容是我們建立網站的誘因。有的網站展示它,有的則收集它,有的尋求,有的操作,還有的網站甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得漸進增強成為一種更為合理的設計範例。這也是它立即被 Yahoo! 所採納並用以構建其“分級式瀏覽器支援 (Graded Browser Support)”策略的原因所在。

案例分析


看如下這兩段程式碼的書寫順序,表示了我們開發的著重點。

.transition { /*漸進增強寫法*/
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;
}
.transition { /*優雅降級寫法*/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

字首CSS3(-webkit-* / -moz-* / -o-*)和正常CSS3在瀏覽器中的支援情況是這樣的:

  1. 很久以前:瀏覽器字首CSS3和正常CSS3都不支援
  2. 不久之前:瀏覽器只支援字首CSS3,不支援正常CSS3;
  3. 現在:瀏覽器既支援字首CSS3,又支援正常CSS3;
  4. 未來:瀏覽器不支援字首CSS3,僅支援正常CSS3.

漸進增強的寫法,優先考慮老版本瀏覽器的可用性,最後才考慮新版本的可用性。在時期3字首CSS3和正常CSS3都可用的情況下,正常CSS3會覆蓋字首CSS3。優雅降級的寫法,優先考慮新版本瀏覽器的可用性,最後才考慮老版本的可用性。在時期3字首CSS3和正常CSS3都可用的情況下,字首CSS3會覆蓋正常的CSS3。

就CSS3這種例子而言,我更加推崇漸進增強的寫法。因為字首CSS3的某些屬性在瀏覽器中的實現效果有可能與正常的CSS3實現效果不太一樣,所以最終還是得以正常CSS3為準。如果你好奇究竟是什麼屬性在字首CSS3和正常CSS3中顯式效果不一樣,可以看看這篇文章《需警惕CSS3屬性的書寫順序》。

如何抉擇


如果軟體開發的預算和時間充足,就不存在抉擇的問題。然而現實很殘酷,要麼開發週期短,要麼開發預算少,或者二者兼而有之,這個時候該如何抉擇?就我個人而言,講講我的觀點。

根據你的使用者所使用的客戶端的版本來做決定。請注意我的措辭,我沒有用瀏覽器,而是用客戶端。因為漸進增強和優雅降級的概念本質上是軟體開發過程中低版本軟體與高版本軟體面對新功能的相容抉擇問題。服務端程式很少存在這種問題,因為開發者可以控制服務端執行程式的版本,就無所謂漸進增強和優雅降級的問題。但是客戶端程式則不是開發者所能控制的(你總不能強制使用者去升級它們的瀏覽器吧)。我們所謂的客戶端,可以指瀏覽器,移動終端裝置(如:手機,平板電腦,智慧手錶等)以及它們對應的應用程式(瀏覽器對應的是網站,移動終端裝置對應的是相應的APP)。

現在有很成熟的技術,能夠讓你分析使用你客戶端程式的版本比例。如果低版本使用者居多,當然優先採用漸進增強的開發流程;如果高版本使用者居多,為了提高大多數使用者的使用體驗,那當然優先採用優雅降級的開發流程。

然而事實情況是怎麼樣的呢?絕大多數的大公司都是採用漸進增強的方式,因為業務優先,提升使用者體驗永遠不會排在最前面。例如:新浪微博網站前端的更新,擁有這種億級使用者的網站,絕對不可能追求某個特效而不考慮低版本使用者可不可用,一定是確保低版本到高版本的可訪問性,再去漸進增強,採用新功能給高版本使用者提供更好的使用者體驗。但也不是沒有反例。如果你開發的是一款面向青少年的軟體(或網站),你知道這個群體的人總是喜歡嘗試新事物,總是喜歡酷炫的特效,總是喜歡把它們的軟體更新到最新版本(而不像我們老一輩的使用者)。面對這種情況,漸進增強的開發流程實為上選。