漸進增強和優(yōu)雅降級之間的區(qū)別
大家好涩蜘，我是IT修真院成都分院第7期的學(xué)員韓建名，一枚正直純潔善良的WEB前端程序員熏纯。
今天給大家?guī)淼氖牵簼u進增強和優(yōu)雅降級之間的區(qū)別
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實戰(zhàn)
6.拓展思考
7.課后討論
8.參考文獻
1.背景介紹
漸進增強和優(yōu)雅降級是在CSS3出現(xiàn)之后才火起來的同诫。由于低級瀏覽器，（特）比（別）如（是）IE6等樟澜，不支持CSS3的瀏覽器误窖，但是CSS3的樣式又特別優(yōu)秀不忍放棄 ，所以在高級瀏覽器中應(yīng)用CSS3樣式秩贰，在低級瀏覽器只保證基本功能霹俺。
“漸進增強”是被Steven Champeon創(chuàng)造于2003年3月11日在奧斯汀的SXSW互動大會，并于2003年3月和6月間通過一系列Webmonkey教程文章的公布毒费。 （我找了半天資料丙唧，翻了下英文文章也只找到這段歷史，無奈臉）觅玻，谷歌公司是很支持這種開發(fā)方式的啊艇棕，我認為漸進增強不僅是一個前端開發(fā)思想，更加是一個程序開發(fā)思想串塑。
2.知識剖析
一，什么是漸進增強
在網(wǎng)頁開發(fā)中北苟，漸進增強認為應(yīng)該專注于內(nèi)容本身桩匪。一開始針對低版本的瀏覽器構(gòu)建頁面，滿足最基本的功能友鼻，再針對高級瀏 覽器進行效果傻昙，交互闺骚，追加各種功能以達到更好用戶體驗,換句話說，就是以最低要求妆档，實現(xiàn)最基礎(chǔ)功能為基本僻爽，向上兼容。以css為例贾惦，以下這種寫法就是漸進增強胸梆。
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
二，什么是優(yōu)雅降級
在網(wǎng)頁開發(fā)中须板，優(yōu)雅降級指的是一開始針對一個高版本的瀏覽器構(gòu)建頁面碰镜，先完善所有的功能。然后針對各個不同的瀏覽器進行測試习瑰，修復(fù)绪颖，保證低級瀏覽器也有基本功能 就好，低級瀏覽器被認為“簡陋卻無妨 (poor, but passable)” 可以做一些小的調(diào)整來適應(yīng)某個特定的瀏覽器甜奄。但由于它們并非我們所關(guān)注的焦點柠横，因此除了修復(fù)較 大的錯誤之外，其它的差異將被直接忽略课兄。也就是以高要求牍氛，高版本為基準，向下兼容第喳。同樣以css為例糜俗，優(yōu)雅降級的寫法如下。
.box {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
三曲饱，漸進增強和優(yōu)雅降級的區(qū)別
講到這里悠抹，有同學(xué)肯定覺得這兩者好像區(qū)別不大，不就一個正著寫扩淀，一個倒著寫么楔敌？實現(xiàn)的效果不差不多？
我看完基本概念之后也很懵逼啊驻谆，不就是一個向上兼容卵凑，一個向下兼容么，實現(xiàn)的效果不都一樣嗎胜臊？有啥子區(qū)別嘛勺卢！
后來深入了解了之后才發(fā)現(xiàn)這兩者區(qū)別還是大大的有的。
容我一一道來呀象对！
從成本出發(fā)
1.如果你采用漸進增強的開發(fā)流程黑忱，先做一個基本功能版，然后針對各個瀏覽器進行漸進增加，增加各種功能甫煞。相對于優(yōu)雅降級來說菇曲，開發(fā)周期長，初期投入資金大抚吠。 你想一下不可能拿個基本功能版給客戶看呀常潮，多寒酸，搞不好一氣之下就不找你做了楷力，然后就炸了喊式。但是呢，也有好處弥雹，就是提供了較好的平臺穩(wěn)定性垃帅，維護起來資金小， 長期來說降低開發(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 { /*漸進增強寫法*/
-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)在磁餐，既支持前綴寫法，又支持正常寫法阿弃，這樣就要出問題了诊霹。
當屬性超過一個參數(shù)值的時候，不同屬性產(chǎn)生的作用是不一樣的!
可以看到渣淳，采用優(yōu)雅降級的寫法脾还，如果一個瀏覽器同時支持前綴寫法和正常寫法，后面的舊版瀏覽器樣式就覆蓋了新版樣式入愧，出現(xiàn)一些奇怪的問題 鄙漏，但是用漸進增強的寫法就不存在這個問題赛蔫。這種屬性不止border-radius一個，所以為了避免這個不必要的錯誤泥张，建議大家都采用漸進增強的寫法。
3.常見問題
漸進增強和優(yōu)雅降級如何抉擇
4.解決方案
如果開發(fā)時間充裕鞠值，開發(fā)資金到位媚创，就不存在抉擇這個問題了，肯定是漸進增強好呀彤恶！
但是現(xiàn)實往往很骨感钞钙。
這個時候，就要看你開發(fā)產(chǎn)品的受眾声离，受眾使用的客戶端芒炼。如果受眾年齡覆蓋面廣，客戶端從移動到平板到電腦术徊，比如淘寶這種頁面本刽，那沒得選，老老實實選漸進增強赠涮。
如果受眾客戶端單一子寓，例如一個移動端頁面，再漸進增強PC端就沒那么重要了笋除。
各有優(yōu)勢斜友，但現(xiàn)實是絕大多數(shù)公司采用的都是漸進增強方式，畢竟業(yè)務(wù)優(yōu)先垃它，體驗不會凌駕在業(yè)務(wù)上鲜屏。
開發(fā)個人網(wǎng)站？隨便你怎么用啦国拇，你開心就好咯洛史。
5.編碼實戰(zhàn)
這節(jié)沒啥可實戰(zhàn)的鸵钝，或者說實戰(zhàn)起來太大祖屏，大家碼代碼的時候都試試就好郁稍。
6.課后討論
大家學(xué)習(xí)過程中有沒有遇到其他類似如上的border-radius的屬性门躯？
7.參考文獻
鳴謝
感謝大家觀看
