一、背景介紹
在前端開發(fā)過程中，如果有注意的話，發(fā)現(xiàn)有些寫css3屬性時，兼容性的寫法順序不太一樣。比如transform屬性，有些把transform放在前面有些是放在后面，這就引出了兩個概念：優(yōu)雅降級和漸進增強。
漸進增強和優(yōu)雅降級這兩個概念是在css3出現(xiàn)之后火起來的。由于低級瀏覽器不支持css3，但是也不能因噎廢食而放棄css3。所以就產(chǎn)生了一種解決方式，即在高級瀏覽器中使用css3，而在低級瀏覽器只保持最基本的功能，這樣就能皆大歡喜了。
二、知識剖析
1、什么是漸進增強？
就是一開始就針對低版本的瀏覽器構(gòu)建頁面，完成最基本的功能，然后再針對高級瀏覽器進行效果，交互，追加各種功能以達到更好用戶體驗。其實也就相當于向上兼容。
2、什么是優(yōu)雅降級？
一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復(fù)。比如一開始使用 CSS3 的特性構(gòu)建了一個應(yīng)用，然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。也就相當于向下兼容。
三、常見問題
優(yōu)雅降級(Graceful Degradation)和漸進增強(Progressive Enhancement)有什么區(qū)別？
四、解決方案
優(yōu)雅降級
優(yōu)雅降級觀點認為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器。在這種設(shè)計范例下，舊版的瀏覽器本認為僅能提供“簡陋卻無妨”的瀏覽體驗。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器。但由于它們并非我們關(guān)注的焦點，因此除了修復(fù)較大的錯誤之外了，其它的差異將被直接忽略。這就有一種“誰讓你們那么差，作為吊車尾還不趕快自己努力趕上來”的意味在里面。
漸進增強
漸進增強觀點認為應(yīng)該關(guān)注內(nèi)容本身。內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點是它們都涉及到內(nèi)容。這使得漸進增強成為一種更為合理的設(shè)計范例。這就有一種“一個也不能落下”的人道主義精神在里面了。雖然你版本低，但是也不能放棄你。
五、編碼實戰(zhàn)
這兩個概念看起來其實差別也沒那么大，似乎也就是順序不同而已。但是有時候，順序不同，相同屬性產(chǎn)生的作用是不同的。比如border-radius屬性和-webkit-border-radius屬性，當屬性值超過一個參數(shù)值的時候，兩個屬性產(chǎn)生的作用是不同的。看代碼。
六、擴展思考
漸進增強和優(yōu)雅降級如何抉擇？
如果軟件開發(fā)的預(yù)算和時間充足，就不存在抉擇的問題，可以兩者都調(diào)整到一個最佳狀態(tài)。然而現(xiàn)實中實際上要么開發(fā)周期短，要么開發(fā)預(yù)算少，或者二者兼而有之，那么如何抉擇？
1、如果低版本用戶居多，當然優(yōu)先采用漸進增強的開發(fā)流程。
2、如果高版本用戶居多，為了提高大多數(shù)用戶的使用體驗，當然優(yōu)先采用優(yōu)雅降級的開發(fā)流程。
然而事實情況是怎么樣的呢？絕大多數(shù)的大公司都是采用漸進增強的方式，因為業(yè)務(wù)優(yōu)先，提升用戶體驗永遠不會排在最前面。例如：新浪微博網(wǎng)站前端的更新，擁有這種億級用戶的網(wǎng)站，絕對不可能追求某個特效而不考慮低版本用戶可不可用，一定是確保低版本到高版本的可訪問性，再去漸進增強，采用新功能給高版本用戶提供更好的用戶體驗。
但也不是沒有反例。如果你開發(fā)的是一款面向青少年的軟件（或網(wǎng)站），你知道這個群體的人總是喜歡嘗試新事物，總是喜歡酷炫的特效，總是喜歡把它們的軟件更新到最新版本（而不像我們老一輩的用戶）。面對這種情況，優(yōu)雅降級的開發(fā)流程是“墜吼的”。
七、更多討論
對于漸進增強和優(yōu)雅降級你的看法是什么？
我們在學(xué)習(xí)工作中寫代碼時用的是哪種方式？
如果要建立個人網(wǎng)站，你會用哪種方式？
八、參考文獻
參考二：漸進增強和優(yōu)雅降級之間的區(qū)別在哪里？
