作為一名前端開發人員，最頭疼的莫過于瀏覽器兼容。遠古時期萬惡的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屬性的書寫順序

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

?

轉載于:https://www.cnblogs.com/guchengnan/p/9405301.html

總結

以上是生活随笔為你收集整理的优雅降级和渐进增强的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。