雜談：漸進增強與優雅降級

SimonMa 發布于2019-08-02 11:03 / 981人閱讀

摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。

作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與瀏覽器兼容頑強斗爭。而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。

漸進增強（Progressive Enhancement）

一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。

優雅降級（graceful degradation）

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

初一看這兩個概念有點高大上，其實作為開發人員來說，多多少少已經在項目中運用只是你自己不察覺而已。換個詞匯就比較好理解了，漸進增強（向上/前兼容），優雅降級（向下兼容），向上兼容高版本瀏覽器，向下兼容低版本瀏覽器。

二者區別

漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。關鍵的區別則在于它們各自關注的著重點不同，以及這種不同的關注點如何影響項目開發的流程。

優雅降級觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如 Chrome，Safari，IE、FireFox等）的前一個版本。在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (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;
}
// -webkit- / -moz- / -o- (瀏覽器前綴)

很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；

不久之前：瀏覽器只支持前綴CSS3，不支持正常CSS3；

現在：瀏覽器既支持前綴CSS3，又支持正常CSS3；

未來：瀏覽器不支持前綴CSS3，僅支持正常CSS3.

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

現實項目開發中，推薦使用漸進增強的寫法（postcss的autofixer也是這種寫法），因為前綴CSS3的某些屬性在瀏覽器中的實現效果有可能與正常的CSS3實現效果不太一樣，所以最終還是得以正常CSS3為準。

可參考張鑫旭大神的文章《需警惕CSS3屬性的書寫順序。

如何選擇

低版本瀏覽器用戶占比居多，優先采用漸進增強的開發流程；

高版本瀏覽器用戶占比居多，優先采用優雅降級的開發流程；

事實上絕大多數的大公司都是采用漸進增強的方式，因為業務優先，提升用戶體驗永遠不會排在最前面。例如，淘寶，京東，新浪微博等網站前端的更新，不可能追求某個特效而不考慮低版本用戶可不可用，一定是確保低版本到高版本的可訪問性，再去漸進增強，采用新功能給高版本用戶提供更好的用戶體驗。當然也有一些反例如阿里云，本身就是面向軟件開發者，這個群體的人總是喜歡嘗試新事物，總是喜歡酷炫的特效，總是喜歡把它們的軟件更新到最新版本，而且大多用的是谷歌瀏覽器，即使用IE瀏覽器，也是高版本IE瀏覽器，面對這種情況，優雅降級的開發流程才是更好的選擇。

參考文章

漸進增強、優雅降級

漸進增強 VS 優雅降級

漸進增強和優雅降級之間的有什么不同?

需警惕CSS3屬性的書寫順序

優雅降級和漸進增強的區別

作者：以樂之名
本文原創，有不當的地方歡迎指出。轉載請指明出處。

云服務器 GPU云服務器增強學習與深度學習雜談優雅上下線 mongodb優雅連接

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52740.html

雜談：漸進增強與優雅降級

摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

hiyang 2019-08-29 16:12 評論0 收藏0
雜談：漸進增強與優雅降級

摘要：而漸進增強和優雅降級兩種不同的開發流程，也是在我們項目初期做調研選型時會考慮的一個點。二者區別漸進增強和優雅降級只是看待同種事物的兩種觀點。漸進增強和優雅降級都關注于同一網站在不同設備里不同瀏覽器下的表現程度。作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的IE6，到現在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優化的用戶體驗，前端搬磚的我們不得不與...

王軍 2019-08-23 10:29 評論0 收藏0
前端面試題-漸進增強和優雅降級

摘要：一背景介紹漸進增強和優雅降級這兩個概念是在出現之后火起來的。二概念理解漸進增強漸進增強一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然后再針對高級瀏覽器進行效果交互追加功能達到更好的體驗。一、背景介紹漸進增強和優雅降級這兩個概念是在 CSS3 出現之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器...

HollisChuang 2019-08-30 14:10 評論0 收藏0
漸進增強與優雅降級

摘要：代碼展示漸進增強優雅降級帶前綴的個滿足了大部分瀏覽器，而不帶前綴的只有最新的一部分瀏覽器才支持。如何選擇漸進增強觀點認為應關注于內容本身。優雅降級觀點則認為應該針對那些最高級最完善的瀏覽器來設計網站。 1.代碼展示 /*漸進增強*/ .div1 { -webkit-transition: all 2s; //Safari Chrome ...

only_do 2019-08-29 12:18 評論0 收藏0