文章轉載自 http://www.qingmengtech.com/blogdetail?id=32
由於市場上瀏覽器種類衆多，而不同瀏覽器其內核亦不盡相同，所以各個瀏覽器對網頁的解析就有一定出入，這也是導致瀏覽器兼容問題出現的主要原因，我們的網頁需要在主流瀏覽器上正常運行，就需要做好瀏覽器兼容，再加上近年來各種用戶端設配的頻出也把兼容性提升了一個級別。 但在我們調試各種兼容性的時候最常見的就是css3的兼容。 然而在我們構建一個web項目的時候肯定要先考慮我們的項目是要以實現完整的功能爲主還是以基本功能爲主。這就引出了我們今天的主題–漸進增強vs優雅降級
漸進增強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，然後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，然後針對瀏覽器測試和修復。 ↵那我們在實際項目中要選擇哪種方式來實現呢？ ↵我們可以先從代碼的書寫方式來分析比較：
.not-a-square {//漸進增強寫法↵ -webkit-border-radius: 10px;↵ -moz-border-radius: 10px;↵ border-radius: 10px;↵}↵
.not-a-square {//優雅降級寫法↵ border-radius: 10px;↵ -moz-border-radius: 10px;↵ -webkit-border-radius: 10px;↵}↵
上面的css3語句想必大家很是熟悉的漸進增強的寫法，優先考慮老版本瀏覽器的可用性，最後才考慮新版本的可用性。在時期3前綴CSS3和正常CSS3都可用的情況下，正常CSS3會覆蓋前綴CSS3。優雅降級的寫法，優先考慮新版本瀏覽器的可用性，最後才考慮老版本的可用性。在時期3前綴CSS3和正常CSS3都可用的情況下，前綴CSS3會覆蓋正常的CSS3。 ↵ 可能有很多人之前在寫代碼的時候並沒太注意他們的順序覺得只是順序變了並不會影響頁面的效果，但大家知道css之所以叫做疊加樣式表是因爲它的重複屬性會被疊加覆蓋。比方用Chrome瀏覽器運行上面的代碼你會發現出現的結果並不一樣。
我們會發現優雅降級的寫法並不是我們最終想要的結果，而漸進增強的寫法是我們能夠理解的效果。（這裏大家注意並不是所有css3改變順序都會影響效果只有個別的樣式會有所差距）,從代碼的書寫方式來看似乎漸進增強的方式更合適，所以我們在前端開發的時候代碼的書寫方式一般都是先寫帶有前綴的css3樣式在寫正常的css3, 所以在一些我們常見到的大型web項目中使用的是漸進增強的方法。 那麼難道優雅降級的方式就無用武之地了嗎？答案肯定是否定的，接下來我們從兩種方式的思想上來分析： 漸進增強：在網站設計初期以主體功能爲主，一般都以IE爲最低兼容對象並逐步的向主流瀏覽器兼容（如Chrome、Firefox等），這樣就會使一些新的前端技術、功能無法全效展示。並追求極致的用戶體驗也就是說用戶使用任何瀏覽器訪問網頁都不會覺得有什麼不同。比如一些大型的公開網站、門戶類網站都會使用漸進增強的方式開發，因爲你不知道用戶會使用什麼樣的瀏覽器和設備訪問，你必須做到頁面功能的全部兼容。 優雅降級：在網站設計初期以主流瀏覽器的標準爲主，並賦予項目各種新技術和功能已達到最佳展示效果，然後在對一些不兼容的瀏覽器和設備做一些簡單的向下兼容，或直接捨棄。有時我們在瀏覽一些web網頁的時候會發現他有些提示：推薦使用某某瀏覽器或是請使用某某設備訪問等等。這些web項目都捨棄了一些客戶端來實現項目的最佳效果，而這種網站還是少數優雅降級的常用場景還有一些公司內部的系統或是特定用戶和場景的應用。 綜上所述到底哪種方式適合你的項目，這就要根據你的需求而定，沒有哪一種技術是絕對好的也沒有哪一種技術是絕對不好的，要應用到最合理的場景才能體現它的價值，有了價值它對於你來說就是好的技術。
參考文檔：
https://www.jianshu.com/p/d313f1108862