南順網絡
漸進增強 VS 優雅降級
一(yī)圖勝千言
印象中，漸進增強和(hé)優雅降級這兩個概念是在 CSS3 出現之後火起來的(de)。由于低(dī)級浏覽器不支持 CSS3，但是 CSS3 特效太優秀不忍放棄，所以在高(gāo)級浏覽器中使用CSS3，而在低(dī)級浏覽器隻保證最基本的(de)功能。二者的(de)目的(de)都是關注不同浏覽器下的(de)不同體驗，但是它們側重點不同，所以導緻了工作流程上的(de)不同。
名詞解釋
漸進增強（Progressive Enhancement）：一(yī)開始就針對低(dī)版本浏覽器進行構建頁面，完成基本的(de)功能，然後再針對高(gāo)級浏覽器進行效果、交互、追加功能達到更好的(de)體驗。
優雅降級（Graceful Degradation）：一(yī)開始就構建站點的(de)完整功能，然後針對浏覽器測試和(hé)修複。比如(rú)一(yī)開始使用 CSS3 的(de)特性構建了一(yī)個應用，然後逐步針對各大浏覽器進行 hack 使其可(kě)以在低(dī)版本浏覽器上正常浏覽。
其實漸進增強和(hé)優雅降級并非什麽新概念，隻是舊(jiù)的(de)概念換了一(yī)個新的(de)說法。在傳統軟件開發中，經常會提到向上兼容和(hé)向下兼容的(de)概念。漸進增強相當于向上兼容，而優雅降級相當于向下兼容。向下兼容指的(de)是高(gāo)版本支持低(dī)版本的(de)或者說後期開發的(de)版本支持和(hé)兼容早期開發的(de)版本，向上兼容的(de)很少。大多數軟件都是向下兼容的(de)，比如(rú)說Office2010能打開Office2007，Office2006，Office2005，Office2003等建的(de)word文件，但是用Office2003就不能打開用Office2007，Office2010等建的(de)word文件！
二者區别
優雅降級和(hé)漸進增強隻是看待同種事物的(de)兩種觀點。優雅降級和(hé)漸進增強都關注于同一(yī)網站在不同設備裏不同浏覽器下的(de)表現程度。關鍵的(de)區别則在于它們各自(zì)關注于何處，以及這種關注如(rú)何影響工作的(de)流程。
優雅降級觀點認為(wèi)應該針對那些最高(gāo)級、最完善的(de)浏覽器來設計網站。而将那些被認為(wèi)“過時”或有功能缺失的(de)浏覽器下的(de)測試工作安排在開發周期的(de)最後階段，并把測試對象限定為(wèi)主流浏覽器（如(rú) IE、Mozilla 等）的(de)前一(yī)個版本。在這種設計範例下，舊(jiù)版的(de)浏覽器被認為(wèi)僅能提供“簡陋卻無妨 (poor, but passable)” 的(de)浏覽體驗。你可(kě)以做(zuò)一(yī)些小的(de)調整來适應某個特定的(de)浏覽器。但由于它們并非我們所關注的(de)焦點，因此除了修複較大的(de)錯誤之外，其它的(de)差異将被直接忽略。
漸進增強觀點則認為(wèi)應關注于內(nèi)容本身。請注意其中的(de)差别：我甚至連“浏覽器”三個字都沒提。內(nèi)容是我們建立網站的(de)誘因。有的(de)網站展示它，有的(de)則收集它，有的(de)尋求，有的(de)操作，還有的(de)網站甚至會包含以上的(de)種種，但相同點是它們全都涉及到內(nèi)容。這使得漸進增強成為(wèi)一(yī)種更為(wèi)合理(lǐ)的(de)設計範例。這也是它立即被 Yahoo! 所采納并用以構建其“分級式浏覽器支持 (Graded Browser Support)”策略的(de)原因所在。
案例分析
看如(rú)下這兩段代碼的(de)書寫順序，表示了我們開發的(de)着重點。
.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-*）和(hé)正常CSS3在浏覽器中的(de)支持情況是這樣的(de)：
很久以前：浏覽器前綴CSS3和(hé)正常CSS3都不支持；
不久之前：浏覽器隻支持前綴CSS3，不支持正常CSS3；
現在：浏覽器既支持前綴CSS3，又支持正常CSS3；
未來：浏覽器不支持前綴CSS3，僅支持正常CSS3.
漸進增強的(de)寫法，優先考慮老版本浏覽器的(de)可(kě)用性，最後才考慮新版本的(de)可(kě)用性。在時期3前綴CSS3和(hé)正常CSS3都可(kě)用的(de)情況下，正常CSS3會覆蓋前綴CSS3。優雅降級的(de)寫法，優先考慮新版本浏覽器的(de)可(kě)用性，最後才考慮老版本的(de)可(kě)用性。在時期3前綴CSS3和(hé)正常CSS3都可(kě)用的(de)情況下，前綴CSS3會覆蓋正常的(de)CSS3。
就CSS3這種例子(zǐ)而言，我更加推崇漸進增強的(de)寫法。因為(wèi)前綴CSS3的(de)某些屬性在浏覽器中的(de)實現效果有可(kě)能與正常的(de)CSS3實現效果不太一(yī)樣，所以最終還是得以正常CSS3為(wèi)準。如(rú)果你好奇究竟是什麽屬性在前綴CSS3和(hé)正常CSS3中顯式效果不一(yī)樣，可(kě)以看看這篇文章(zhāng)《需警惕CSS3屬性的(de)書寫順序》。
如(rú)何抉擇
如(rú)果軟件開發的(de)預算和(hé)時間充足，就不存在抉擇的(de)問題。然而現實很殘酷，要麽開發周期短(duǎn)，要麽開發預算少，或者二者兼而有之，這個時候該如(rú)何抉擇？就我個人而言，講講我的(de)觀點。
根據你的(de)用戶所使用的(de)客戶端的(de)版本來做(zuò)決定。請注意我的(de)措辭，我沒有用浏覽器，而是用客戶端。因為(wèi)漸進增強和(hé)優雅降級的(de)概念本質上是軟件開發過程中低(dī)版本軟件與高(gāo)版本軟件面對新功能的(de)兼容抉擇問題。服務端程序很少存在這種問題，因為(wèi)開發者可(kě)以控制服務端運行程序的(de)版本，就無所謂漸進增強和(hé)優雅降級的(de)問題。但是客戶端程序則不是開發者所能控制的(de)（你總不能強制用戶去(qù)升級它們的(de)浏覽器吧(ba)）。我們所謂的(de)客戶端，可(kě)以指浏覽器，移動終端設備（如(rú)：手機，平闆電腦，智能手表等）以及它們對應的(de)應用程序（浏覽器對應的(de)是網站，移動終端設備對應的(de)是相應的(de)APP）。
現在有很成熟的(de)技術，能夠讓你分析使用你客戶端程序的(de)版本比例。如(rú)果低(dī)版本用戶居多，當然優先采用漸進增強的(de)開發流程；如(rú)果高(gāo)版本用戶居多，為(wèi)了提高(gāo)大多數用戶的(de)使用體驗，那當然優先采用優雅降級的(de)開發流程。
然而事實情況是怎麽樣的(de)呢(ne)？絕大多數的(de)大公司都是采用漸進增強的(de)方式，因為(wèi)業務優先，提升用戶體驗永遠不會排在最前面。例如(rú)：新浪微博網站前端的(de)更新，擁有這種億級用戶的(de)網站，絕對不可(kě)能追求某個特效而不考慮低(dī)版本用戶可(kě)不可(kě)用，一(yī)定是确保低(dī)版本到高(gāo)版本的(de)可(kě)訪問性，再去(qù)漸進增強，采用新功能給高(gāo)版本用戶提供更好的(de)用戶體驗。但也不是沒有反例。如(rú)果你開發的(de)是一(yī)款面向青少年(nián)的(de)軟件（或網站），你知道(dào)這個群體的(de)人總是喜歡嘗試新事物，總是喜歡酷炫的(de)特效，總是喜歡把它們的(de)軟件更新到最新版本（而不像我們老一(yī)輩的(de)用戶）。面對這種情況，漸進增強的(de)開發流程實為(wèi)上選。
軟件開發中，從來就沒有銀彈。具體的(de)抉擇，請讀者視(shì)情況而定。
原文鏈接：https://www.jianshu.com/p/d313f1108862
編輯:--ns868
