背景

漸進增強和優(yōu)雅降級這兩個概念是在 CSS3 出現(xiàn)之后火起來的。由于低級瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級瀏覽器中使用CSS3，而在低級瀏覽器只保證最基本的功能。二者的目的都是關(guān)注不同瀏覽器下的不同體驗，但是它們側(cè)重點不同，所以導(dǎo)致了工作流程上的不同。

概念

優(yōu)雅降級（graceful degradation）：一開始就構(gòu)建站點的完整功能，然后再針對低版本瀏覽器進行兼容。

（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認(rèn)它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優(yōu)雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。）

漸進增強（Progressive Enhancement）：針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎(chǔ)瀏覽器的額外樣式和功能。當(dāng)瀏覽器支持時，它們會自動地呈現(xiàn)出來并發(fā)揮作用。）

區(qū)別

/* 優(yōu)雅降級 */
.transition{ 
	　　     transition: all .5s;
	　　  -o-transition: all .5s;
	  　-moz-transition: all .5s;
	 -webkit-transition: all .5s;
}
 /* 漸進增強 */
.transition{
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;   
    }

通過兩段代碼的書寫順序，可以看出漸進增強和優(yōu)雅降級開發(fā)的重點不同。優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的、能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要。

優(yōu)雅降級（Graceful Degradation）原則指的是在開發(fā)過程中，先構(gòu)建網(wǎng)站或應(yīng)用的基本功能，然后再針對低版本瀏覽器進行兼容。這樣可以確保網(wǎng)站或應(yīng)用在所有瀏覽器中都能正常工作，并為那些無法支持最新版本的瀏覽器提供一個過渡方案，從而不至于完全失效。

相比之下，漸進增強（Progressive Enhancement）原則指的是在開發(fā)過程中，逐步增加新的功能和特性，以適應(yīng)不斷變化的市場和用戶需求。這種方法可以使網(wǎng)站或應(yīng)用更加現(xiàn)代化和新穎，從而吸引更多的用戶。

優(yōu)雅降級和漸進增強的區(qū)別在于，優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，盡可能減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的、能夠起作用的版本開始，不斷擴充以適應(yīng)未來環(huán)境的需要。因此，優(yōu)雅降級更加注重網(wǎng)站或應(yīng)用的功能和兼容性，而漸進增強更加注重網(wǎng)站或應(yīng)用的新穎性和現(xiàn)代化。