漸進增強與優雅降級有什么區別

由于一些低級的瀏覽器不支持 CSS3，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器只保證最基本的功能由于側重點不同，所以工作流程上也產生了差別，因此有了漸進增強和優雅降級的概念，接下來將在文章中為大家詳細介紹這兩者的含義與區別

【推薦課程：CSS3課程】

漸進增強：

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

優雅降級

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

換句話說漸進增強相當于向上兼容也就是低版本支持高版本，而優雅降級相當于向下兼容也就是高版本支持低版本的。一般情況下向上兼容的很少，大多數軟件都是向下兼容的

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

優雅降級和漸進增強只是關注同一網站在不同設備里和不同瀏覽器下的表現程度。關鍵的區別則在于它們各自關注于何處，以及這種關注如何影響工作的流程。

優雅降級認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器的前一個版本。在這種設計下，舊版的瀏覽器被認為僅能提供最簡單的的瀏覽體驗

漸進增強認為應關注于內容本身。會優先考慮老版本瀏覽器的可用性，最后才考慮新版本的可用性，這使得漸進增強成為一種更為合理的設計范例

例：

優雅降級(先關注最高級的，在考慮兼容)

.transition { 
 transition: all 0.2s; 
 -o-transition: all 0.2s; 
 -moz-transition: all 0.2s; 
 -webkit-transition: all 0.2s;
}

漸進增強（先考慮兼容）

.transition {
 -webkit-transition: all 0.2s;
-moz-transition: all 0.2s; 
-o-transition: all 0.2s; 
transition: all 0.2s;

}

選擇

根據所使用的客戶端的版本來做決定，因為本質上漸進增強和優雅降級的概念是軟件開發過程中低版本軟件與高版本軟件面對新功能的兼容問題，所以低版本用戶居多，當然優先采用漸進增強的開發流程；如果高版本用戶居多，為了提高大多數用戶的使用體驗，那當然優先采用優雅降級的開發流程。不過大多數情況下都是采用漸進增強的方式，因為它更加合理。

總結：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com