建站
咨詢
售后
建站咨詢
新聞中心
背景
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)這兩個(gè)概念是在 CSS3 出現(xiàn)之后火起來(lái)的。由于低級(jí)瀏覽器不支持 CSS3，但是 CSS3 特效太優(yōu)秀不忍放棄，所以在高級(jí)瀏覽器中使用CSS3，而在低級(jí)瀏覽器只保證最基本的功能。二者的目的都是關(guān)注不同瀏覽器下的不同體驗(yàn)，但是它們側(cè)重點(diǎn)不同，所以導(dǎo)致了工作流程上的不同。
概念
優(yōu)雅降級(jí)（graceful degradation）：一開(kāi)始就構(gòu)建站點(diǎn)的完整功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
（Web站點(diǎn)在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會(huì)檢查以確認(rèn)它們是否能正常工作。由于IE獨(dú)特的盒模型布局問(wèn)題，針對(duì)不同版本的IE的hack實(shí)踐過(guò)優(yōu)雅降級(jí)了，為那些無(wú)法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級(jí)體驗(yàn)卻不至于完全失效。）
漸進(jìn)增強(qiáng)（Progressive Enhancement）：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。
（從被所有瀏覽器支持的基本功能開(kāi)始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁(yè)面添加無(wú)害于基礎(chǔ)瀏覽器的額外樣式和功能。當(dāng)瀏覽器支持時(shí)，它們會(huì)自動(dòng)地呈現(xiàn)出來(lái)并發(fā)揮作用。）
區(qū)別
/* 優(yōu)雅降級(jí) */
.transition{
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
/* 漸進(jìn)增強(qiáng) */
.transition{
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}通過(guò)兩段代碼的書(shū)寫(xiě)順序，可以看出漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)開(kāi)發(fā)的重點(diǎn)不同。優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的、能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。
優(yōu)雅降級(jí)（Graceful Degradation）原則指的是在開(kāi)發(fā)過(guò)程中，先構(gòu)建網(wǎng)站或應(yīng)用的基本功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。這樣可以確保網(wǎng)站或應(yīng)用在所有瀏覽器中都能正常工作，并為那些無(wú)法支持最新版本的瀏覽器提供一個(gè)過(guò)渡方案，從而不至于完全失效。
相比之下，漸進(jìn)增強(qiáng)（Progressive Enhancement）原則指的是在開(kāi)發(fā)過(guò)程中，逐步增加新的功能和特性，以適應(yīng)不斷變化的市場(chǎng)和用戶需求。這種方法可以使網(wǎng)站或應(yīng)用更加現(xiàn)代化和新穎，從而吸引更多的用戶。
優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)的區(qū)別在于，優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，盡可能減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的、能夠起作用的版本開(kāi)始，不斷擴(kuò)充以適應(yīng)未來(lái)環(huán)境的需要。因此，優(yōu)雅降級(jí)更加注重網(wǎng)站或應(yīng)用的功能和兼容性，而漸進(jìn)增強(qiáng)更加注重網(wǎng)站或應(yīng)用的新穎性和現(xiàn)代化。
當(dāng)前名稱：前端面試：優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)
鏈接地址：http://m.5511xx.com/article/djddsig.html
