1、背景介紹
漸進增強和優雅降級這兩個概念是在 CSS3 出現之後火起來的。
由于低級浏覽器不支援 CSS3，但是 CSS3 特效太優秀不忍放棄，是以在進階浏覽器中使用CSS3，而在低級浏覽器隻保證最基本的功能。
二者的目的都是關注不同浏覽器下的不同體驗，但是它們側重點不同，是以導緻了工作流程上的不同。
2、漸進增強
漸進增強（Progressive Enhancement）：一開始就針對低版本浏覽器進行建構頁面，完成基本的功能，然後再針對進階浏覽器進行效果、互動、追加功能達到更好的體驗。
3、優雅降級
優雅降級（Graceful Degradation）：一開始就建構站點的完整功能，然後再針對低版本浏覽器進行相容。比如一開始使用 CSS3 的特性建構了一個應用，然後逐漸針對各大浏覽器進行 hack 使其可以在低版本浏覽器上正常浏覽。
4、二者差別
漸進增強：是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以适應未來環境的需要。
優雅降級：是從複雜的現狀開始，并試圖減少使用者體驗的供給
觀點不同：
- “漸進增強”觀點認為應關注于内容本身。内容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到内容。這使得“漸進增強”成為一種更為合理的設計範例。這也是它立即被 Yahoo! 所采納并用以建構其“分級式浏覽器支援”政策的原因所在。
- “優雅降級”觀點認為應該針對那些最進階、最完善的浏覽器來設計網站。而将那些被認為“過時”或有功能缺失的浏覽器下的測試工作安排在開發周期的最後階段，并把測試對象限定為主流浏覽器（如 IE、Mozilla 等）的前一個版本。在這種設計範例下，舊版的浏覽器被認為僅能提供“簡陋卻無妨”的浏覽體驗。你可以做一些小的調整來适應某個特定的浏覽器。但由于它們并非我們所關注的焦點，是以除了修複較大的錯誤之外，其它的差異将被直接忽略。
5、示例案例
.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 在浏覽器中的支援情況：
- 很久以前：浏覽器字首CSS3和正常CSS3都不支援；
- 不久之前：浏覽器隻支援字首CSS3，不支援正常CSS3；
- 現在：浏覽器既支援字首CSS3，又支援正常CSS3；
- 未來：浏覽器不支援字首CSS3，僅支援正常CSS3；
本文來自部落格園，作者：不知名前端李小白，轉載請注明原文連結：https://www.cnblogs.com/libo-web/p/15784234.html