漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的區(qū)別
大家好，我是IT修真院成都分院第7期的學(xué)員韓建名，一枚正直純潔善良的WEB前端程序員。
今天給大家?guī)淼氖牵簼u進(jìn)增強(qiáng)和優(yōu)雅降級之間的區(qū)別
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰(zhàn)
6.拓展思考
7.課后討論
8.參考文獻(xiàn)
1.背景介紹
漸進(jìn)增強(qiáng)和優(yōu)雅降級是在CSS3出現(xiàn)之后才火起來的。由于低級瀏覽器，（特）比（別）如（是）IE6等，不支持CSS3的瀏覽器，但是CSS3的樣式又特別優(yōu)秀不忍放棄 ，所以在高級瀏覽器中應(yīng)用CSS3樣式，在低級瀏覽器只保證基本功能。
“漸進(jìn)增強(qiáng)”是被Steven Champeon創(chuàng)造于2003年3月11日在奧斯汀的SXSW互動大會，并于2003年3月和6月間通過一系列Webmonkey教程文章的公布。 （我找了半天資料，翻了下英文文章也只找到這段歷史，無奈臉），谷歌公司是很支持這種開發(fā)方式的啊，我認(rèn)為漸進(jìn)增強(qiáng)不僅是一個前端開發(fā)思想，更加是一個程序開發(fā)思想。
2.知識剖析
一，什么是漸進(jìn)增強(qiáng)
在網(wǎng)頁開發(fā)中，漸進(jìn)增強(qiáng)認(rèn)為應(yīng)該專注于內(nèi)容本身。一開始針對低版本的瀏覽器構(gòu)建頁面，滿足最基本的功能，再針對高級瀏 覽器進(jìn)行效果，交互，追加各種功能以達(dá)到更好用戶體驗,換句話說，就是以最低要求，實現(xiàn)最基礎(chǔ)功能為基本，向上兼容。以css為例，以下這種寫法就是漸進(jìn)增強(qiáng)。
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
二，什么是優(yōu)雅降級
在網(wǎng)頁開發(fā)中，優(yōu)雅降級指的是一開始針對一個高版本的瀏覽器構(gòu)建頁面，先完善所有的功能。然后針對各個不同的瀏覽器進(jìn)行測試，修復(fù)，保證低級瀏覽器也有基本功能 就好，低級瀏覽器被認(rèn)為“簡陋卻無妨 (poor, but passable)” 可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點，因此除了修復(fù)較 大的錯誤之外，其它的差異將被直接忽略。也就是以高要求，高版本為基準(zhǔn)，向下兼容。同樣以css為例，優(yōu)雅降級的寫法如下。
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
三，漸進(jìn)增強(qiáng)和優(yōu)雅降級的區(qū)別
講到這里，有同學(xué)肯定覺得這兩者好像區(qū)別不大，不就一個正著寫，一個倒著寫么？實現(xiàn)的效果不差不多？
我看完基本概念之后也很懵逼啊，不就是一個向上兼容，一個向下兼容么，實現(xiàn)的效果不都一樣嗎？有啥子區(qū)別嘛！
后來深入了解了之后才發(fā)現(xiàn)這兩者區(qū)別還是大大的有的。
容我一一道來呀！
從成本出發(fā)
1.如果你采用漸進(jìn)增強(qiáng)的開發(fā)流程，先做一個基本功能版，然后針對各個瀏覽器進(jìn)行漸進(jìn)增加，增加各種功能。相對于優(yōu)雅降級來說，開發(fā)周期長，初期投入資金大。 你想一下不可能拿個基本功能版給客戶看呀，多寒酸，搞不好一氣之下就不找你做了，然后就炸了。但是呢，也有好處，就是提供了較好的平臺穩(wěn)定性，維護(hù)起來資金小， 長期來說降低開發(fā)成本。
2.那采用優(yōu)雅降級呢，這樣可以在較短時間內(nèi)開發(fā)出一個只用于一個瀏覽器的完整功能版，然后就可以拿給PM找客戶談呀，可以拿去測試，市場試水呀，對于功能尚未確定的 產(chǎn)品，優(yōu)雅降級不失為一種節(jié)約成本的方法。
從技術(shù)出發(fā)
前綴CSS3（-webkit- / -moz- / -o-*）和正常CSS3在瀏覽器中的支持情況是這樣的：
1.很久以前：瀏覽器前綴CSS3和正常CSS3都不支持；
2.不久之前：瀏覽器只支持前綴CSS3，不支持正常CSS3；
3.現(xiàn)在：瀏覽器既支持前綴CSS3，又支持正常CSS3；
4.未來：瀏覽器不支持前綴CSS3，僅支持正常CSS3.
.transition { /*漸進(jìn)增強(qiáng)寫法*/
-webkit-border-radius:30px 10px;
-moz-border-radius:30px 10px;
border-radius:30px 10px;
}
.transition { /*優(yōu)雅降級寫法*/
border-radius:30px 10px;
-moz-border-radius:30px 10px;
-webkit-border-radius:30px 10px;
}
從技術(shù)出發(fā)
按理說這兩種寫法效果應(yīng)該是一樣的，但是我們現(xiàn)在瀏覽器停留在操蛋的第三階段，也就是現(xiàn)在，既支持前綴寫法，又支持正常寫法，這樣就要出問題了。
當(dāng)屬性超過一個參數(shù)值的時候，不同屬性產(chǎn)生的作用是不一樣的!
可以看到，采用優(yōu)雅降級的寫法，如果一個瀏覽器同時支持前綴寫法和正常寫法，后面的舊版瀏覽器樣式就覆蓋了新版樣式，出現(xiàn)一些奇怪的問題 ，但是用漸進(jìn)增強(qiáng)的寫法就不存在這個問題。這種屬性不止border-radius一個，所以為了避免這個不必要的錯誤，建議大家都采用漸進(jìn)增強(qiáng)的寫法。
3.常見問題
漸進(jìn)增強(qiáng)和優(yōu)雅降級如何抉擇
4.解決方案
如果開發(fā)時間充裕，開發(fā)資金到位，就不存在抉擇這個問題了，肯定是漸進(jìn)增強(qiáng)好呀！
但是現(xiàn)實往往很骨感。
這個時候，就要看你開發(fā)產(chǎn)品的受眾，受眾使用的客戶端。如果受眾年齡覆蓋面廣，客戶端從移動到平板到電腦，比如淘寶這種頁面，那沒得選，老老實實選漸進(jìn)增強(qiáng)。
如果受眾客戶端單一，例如一個移動端頁面，再漸進(jìn)增強(qiáng)PC端就沒那么重要了。
各有優(yōu)勢，但現(xiàn)實是絕大多數(shù)公司采用的都是漸進(jìn)增強(qiáng)方式，畢竟業(yè)務(wù)優(yōu)先，體驗不會凌駕在業(yè)務(wù)上。
開發(fā)個人網(wǎng)站？隨便你怎么用啦，你開心就好咯。
5.編碼實戰(zhàn)
這節(jié)沒啥可實戰(zhàn)的，或者說實戰(zhàn)起來太大，大家碼代碼的時候都試試就好。
6.課后討論
大家學(xué)習(xí)過程中有沒有遇到其他類似如上的border-radius的屬性？
7.參考文獻(xiàn)
《認(rèn)識優(yōu)雅降級和漸進(jìn)增強(qiáng)》 --Angus
《漸進(jìn)增強(qiáng) VS 優(yōu)雅降級》 -- 康斌
鳴謝
感謝大家觀看
