今天給大家分享一下，深度思考中的知識點——漸進增強和優(yōu)雅降級有什么不同？

一、背景介紹
在前端開發(fā)的過程中，經(jīng)常需要用到css3的相關(guān)屬性，因為在標準還未確定時，部分瀏覽器已經(jīng)根據(jù)最初草案實現(xiàn)了部分功能，為了與之后確定下來的標準進行兼容，所以每種瀏覽器使用了自己的私有前綴與標準進行區(qū)分，當(dāng)標準確立后，各大瀏覽器將逐步支持不帶前綴的css3新屬性。

平常稍加注意的話，發(fā)現(xiàn)有些寫css3屬性時，兼容性的寫法順序不太一樣，比如transition屬性，有些把transition放在前面有些是放在后面，這就引出了兩個概念：優(yōu)雅降級和漸進增強。

二、知識剖析
1.舉個栗子：
.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;
}

漸進增強和優(yōu)雅降級概念出現(xiàn)的原因：
如果我們翻看進度條，會發(fā)現(xiàn)漸進增強和優(yōu)雅降級這兩個概念是在 CSS3 出現(xiàn)之后火起來的。
由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄。
所以產(chǎn)生了的一種解決方式在高級瀏覽器中使用CSS3，而在低級瀏覽器只保證最基本的功能。這就是我們今天所要說的主題。

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

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

支持漸進增強和優(yōu)雅降級背后的思維是什么：
兩者之間的微妙差別：
在本質(zhì)上：“它們是看待同種事物的兩種觀點”，“優(yōu)雅降級”和“漸進增強”的目的都是關(guān)注不同瀏覽器下的不同體驗，但是它們側(cè)重點不同，所以導(dǎo)致了工作流程上的不同

漸進增強觀點：
關(guān)注于內(nèi)容本身。請注意其中的差別：我甚至連“瀏覽器”三個字都沒提。內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點是它們?nèi)忌婕暗絻?nèi)容。這使得漸進增強成為一種更為合理的設(shè)計范例。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

優(yōu)雅降級觀點：
認為應(yīng)該針對那些認為應(yīng)該針對那些最高級、最完善的瀏覽器來設(shè)計網(wǎng)站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。在這種設(shè)計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點，因此除了修復(fù)較大的錯誤之外，其它的差異將被直接忽略。

廣義和狹義不同視角：
1.廣義：其實要定義一個基準線，在此之上的增強叫做漸進增強，在此之下的兼容叫優(yōu)雅降級。(比如IE8，這個基準線對于我，是允許使用javascript、cookie和css的IE8瀏覽器)
2.狹義：漸進增強一般說的是使用CSS3技術(shù)，在不影響老瀏覽器的正常顯示與使用情形下來增強體驗，而優(yōu)雅降級則是體現(xiàn)html標簽的語義，以便在js/css的加載失敗/被禁用時，也不影響用戶的相應(yīng)功能。（保證內(nèi)容）

三、常見問題
漸進增強和優(yōu)雅降級在工作流程上面有什么區(qū)別？
1.漸進增強（progressive enhancement）：一開始只構(gòu)建站點的最少特性，保證他們的內(nèi)容，然后不斷地對版本較高的瀏覽器追加不同的功能。
2.優(yōu)雅降級（graceful degradation）：優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，就是針對版本較低的瀏覽器進行測試和修復(fù)。

關(guān)于前綴CSS3（-webkit- / -moz- / -o-）和正常CSS3在瀏覽器中的支持情況：
1.很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；
2.不久之前：瀏覽器只支持前綴CSS3，不支持正常CSS3；
3.現(xiàn)在：瀏覽器既支持前綴CSS3，又支持正常CSS3；
4.未來：瀏覽器不支持前綴CSS3，僅支持正常CSS3.

四、擴展思考
互聯(lián)網(wǎng)公司(如：美團，餓了，百姓網(wǎng)，豆瓣，阿里等)CSS3里的哪些屬性正在他們的網(wǎng)站中使用？或者說使用最多？
主要是漸進增強;
以及四個常用的CSS3屬性
border-radius
box-shadow
transition
transform

五、總結(jié)
其實優(yōu)雅降級和漸進增強都是頁面的加分項，是針對技術(shù)的一種形而上的要求。保證盡可能多的用戶都能正常使用網(wǎng)站是第一步，在此之上才需要考慮降級的極端情形和現(xiàn)代瀏覽器的體驗增強。