作為一名前端開(kāi)發(fā)人員错沃，最頭疼的莫過(guò)于瀏覽器兼容。遠(yuǎn)古時(shí)期萬(wàn)惡的IE6雀瓢，到現(xiàn)在CSS3不兼容的IE7/8.為了保證不同版本瀏覽器都有共同或更優(yōu)化的用戶體驗(yàn)枢析，前端搬磚的我們不得不與瀏覽器兼容頑強(qiáng)斗爭(zhēng)。而漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)兩種不同的開(kāi)發(fā)流程刃麸，也是在我們項(xiàng)目初期做調(diào)研選型時(shí)會(huì)考慮的一個(gè)點(diǎn)醒叁。
漸進(jìn)增強(qiáng)（Progressive Enhancement）
一開(kāi)始就針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，完成基本的功能泊业，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果把沼、交互、追加功能達(dá)到更好的體驗(yàn)吁伺。
優(yōu)雅降級(jí)（graceful degradation）
一開(kāi)始就構(gòu)建站點(diǎn)的完整功能饮睬，然后針對(duì)瀏覽器測(cè)試和修復(fù)。比如一開(kāi)始使用 CSS3 的特性構(gòu)建了一個(gè)應(yīng)用篮奄，然后逐步針對(duì)各大瀏覽器進(jìn)行 hack 使其可以在低版本瀏覽器上正常瀏覽续捂。
初一看這兩個(gè)概念有點(diǎn)高大上，其實(shí)作為開(kāi)發(fā)人員來(lái)說(shuō)宦搬，多多少少已經(jīng)在項(xiàng)目中運(yùn)用只是你自己不察覺(jué)而已牙瓢。換個(gè)詞匯就比較好理解了，漸進(jìn)增強(qiáng)（向上/前兼容）间校，優(yōu)雅降級(jí)（向下兼容）矾克，向上兼容高版本瀏覽器，向下兼容低版本瀏覽器憔足。
二者區(qū)別
漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)只是看待同種事物的兩種觀點(diǎn)胁附。漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。關(guān)鍵的區(qū)別則在于它們各自關(guān)注的著重點(diǎn)不同滓彰，以及這種不同的關(guān)注點(diǎn)如何影響項(xiàng)目開(kāi)發(fā)的流程控妻。
優(yōu)雅降級(jí)觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站揭绑。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開(kāi)發(fā)周期的最后階段弓候，并把測(cè)試對(duì)象限定為主流瀏覽器（如 Chrome郎哭，Safari，IE菇存、FireFox等）的前一個(gè)版本夸研。在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨 (poor, but passable)” 的瀏覽體驗(yàn)依鸥。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器亥至。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外贱迟，其它的差異將被直接忽略姐扮。
漸進(jìn)增強(qiáng)觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。請(qǐng)注意其中的差別：我甚至連“瀏覽器”三個(gè)字都沒(méi)提衣吠。內(nèi)容是我們建立網(wǎng)站的誘因茶敏。有的網(wǎng)站展示它，有的則收集它蒸播，有的尋求，有的操作萍肆，還有的網(wǎng)站甚至?xí)陨系姆N種袍榆，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得漸進(jìn)增強(qiáng)成為一種更為合理的設(shè)計(jì)范例塘揣。這也是它立即被 Yahoo! 所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持 (Graded Browser Support)”策略的原因所在包雀。
概括：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給亲铡，而漸進(jìn)增強(qiáng)則是從一個(gè)非巢判矗基礎(chǔ)的，能夠起作用的版本開(kāi)始奖蔓，并不斷擴(kuò)充赞草，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看吆鹤；而漸進(jìn)增強(qiáng)則意味著朝前看厨疙，同時(shí)保證其根基處于安全地帶
代碼案例
.transition { /*漸進(jìn)增強(qiáng)寫(xiě)法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*優(yōu)雅降級(jí)寫(xiě)法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
// -webkit- / -moz- / -o- (瀏覽器前綴)
- 很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；
- 不久之前：瀏覽器只支持前綴CSS3疑务，不支持正常CSS3沾凄；
- 現(xiàn)在：瀏覽器既支持前綴CSS3，又支持正常CSS3知允；
- 未來(lái)：瀏覽器不支持前綴CSS3撒蟀，僅支持正常CSS3.
漸進(jìn)增強(qiáng)的寫(xiě)法，優(yōu)先考慮老版本瀏覽器的可用性温鸽，最后才考慮新版本的可用性保屯。在時(shí)期3中前綴CSS3和正常CSS3都可用的情況下，正常CSS3會(huì)覆蓋前綴CSS3。優(yōu)雅降級(jí)的寫(xiě)法配椭，優(yōu)先考慮新版本瀏覽器的可用性虫溜，最后才考慮老版本的可用性。在時(shí)期3中前綴CSS3和正常CSS3都可用的情況下股缸，前綴CSS3會(huì)覆蓋正常的CSS3衡楞。
現(xiàn)實(shí)項(xiàng)目開(kāi)發(fā)中，推薦使用漸進(jìn)增強(qiáng)的寫(xiě)法（postcss的autofixer也是這種寫(xiě)法）敦姻，因?yàn)榍熬YCSS3的某些屬性在瀏覽器中的實(shí)現(xiàn)效果有可能與正常的CSS3實(shí)現(xiàn)效果不太一樣瘾境，所以最終還是得以正常CSS3為準(zhǔn)。
可參考張?chǎng)涡翊笊竦奈恼隆?a target="_blank" rel="nofollow">需警惕CSS3屬性的書(shū)寫(xiě)順序镰惦。
如何選擇
- 低版本瀏覽器用戶占比居多迷守，優(yōu)先采用漸進(jìn)增強(qiáng)的開(kāi)發(fā)流程；
- 高版本瀏覽器用戶占比居多旺入，優(yōu)先采用優(yōu)雅降級(jí)的開(kāi)發(fā)流程兑凿；
事實(shí)上絕大多數(shù)的大公司都是采用漸進(jìn)增強(qiáng)的方式，因?yàn)闃I(yè)務(wù)優(yōu)先茵瘾，提升用戶體驗(yàn)永遠(yuǎn)不會(huì)排在最前面礼华。例如，淘寶拗秘，京東圣絮，新浪微博等網(wǎng)站前端的更新，不可能追求某個(gè)特效而不考慮低版本用戶可不可用雕旨，一定是確保低版本到高版本的可訪問(wèn)性扮匠，再去漸進(jìn)增強(qiáng)，采用新功能給高版本用戶提供更好的用戶體驗(yàn)凡涩。當(dāng)然也有一些反例如阿里云棒搜，本身就是面向軟件開(kāi)發(fā)者，這個(gè)群體的人總是喜歡嘗試新事物活箕，總是喜歡酷炫的特效帮非，總是喜歡把它們的軟件更新到最新版本，而且大多用的是谷歌瀏覽器讹蘑，即使用IE瀏覽器末盔，也是高版本IE瀏覽器，面對(duì)這種情況座慰，優(yōu)雅降級(jí)的開(kāi)發(fā)流程才是更好的選擇陨舱。
參考文章
- 漸進(jìn)增強(qiáng)、優(yōu)雅降級(jí)
- 漸進(jìn)增強(qiáng) VS 優(yōu)雅降級(jí)
- 漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的有什么不同?
- 需警惕CSS3屬性的書(shū)寫(xiě)順序
- 優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)的區(qū)別
作者：以樂(lè)之名
本文原創(chuàng)版仔，有不當(dāng)?shù)牡胤綒g迎指出游盲。轉(zhuǎn)載請(qǐng)指明出處误墓。
