這裡是修真院前端小課堂，本篇分析的主題是
【漸進增強和優雅降級之間有什麼不同?】
每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充思考】【更多讨論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【漸進增強和優雅降級之間有什麼不同?】
一.背景介紹：
漸進增強和優雅降級是在CSS3出現之後才火起來的。由于低級浏覽器，（特）比（别）如（是）IE6等，不支援CSS3的浏覽器，但是CSS3的樣式又特别優秀不忍放棄 ，是以在進階浏覽器中應用CSS3樣式，在低級浏覽器隻保證基本功能。
“漸進增強”是被Steven Champeon創造于2003年3月11日在奧斯汀的SXSW互動大會，并于2003年3月和6月間通過一系列Webmonkey教程文章的公布。 （我找了半天資料，翻了下英文文章也隻找到這段曆史，無奈臉），谷歌公司是很支援這種開發方式的啊，我認為漸進增強不僅是一個前端開發思想，更加是一個程式開發思想。
二.知識剖析
1.什麼是漸進增強
在網頁開發中，漸進增強認為應該專注于内容本身。一開始針對低版本的浏覽器建構頁面，滿足最基本的功能，再針對進階浏 覽器進行效果，互動，追加各種功能以達到更好使用者體驗,換句話說，就是以最低要求，實作最基礎功能為基本，向上相容。以css為例，以下這種寫法就是漸進增強。
2.什麼是優雅降級
在網頁開發中，優雅降級指的是一開始針對一個高版本的浏覽器建構頁面，先完善所有的功能。然後針對各個不同的浏覽器進行測試，修複，保證低級浏覽器也有基本功能 就好，低級浏覽器被認為“簡陋卻無妨 (poor, but passable)” 可以做一些小的調整來适應某個特定的浏覽器。但由于它們并非我們所關注的焦點，是以除了修複較 大的錯誤之外，其它的差異将被直接忽略。也就是以高要求，高版本為基準，向下相容。同樣以css為例，優雅降級的寫法如下。
3.二者差別
1.）如果你采用漸進增強的開發流程，先做一個基本功能版，然後針對各個浏覽器進行漸進增加，增加各種功能。相對于優雅降級來說，開發周期長，初期投入資金大。 你想一下不可能拿個基本功能版給客戶看呀，多寒酸，搞不好一氣之下就不找你做了，然後就炸了。但是呢，也有好處，就是提供了較好的平台穩定性，維護起來資金小， 長期來說降低開發成本。
2.）那采用優雅降級呢，這樣可以在較短時間内開發出一個隻用于一個浏覽器的完整功能版，然後就可以拿給PM找客戶談呀，可以拿去測試，市場試水呀，對于功能尚未确定的 産品，優雅降級不失為一種節約成本的方法。
從技術出發
字首CSS3（-webkit- / -moz- / -o-*）和正常CSS3在浏覽器中的支援情況是這樣的：
1.很久以前：浏覽器字首CSS3和正常CSS3都不支援；
2.不久之前：浏覽器隻支援字首CSS3，不支援正常CSS3；
3.現在：浏覽器既支援字首CSS3，又支援正常CSS3；
4.未來：浏覽器不支援字首CSS3，僅支援正常CSS3.
.transition {
-webkit-border-radius:30px 10px;
-moz-border-radius:30px 10px;
border-radius:30px 10px;
}
.transition {
border-radius:30px 10px;
-moz-border-radius:30px 10px;
-webkit-border-radius:30px 10px;
}
從技術出發
按理說這兩種寫法效果應該是一樣的，但是我們現在浏覽器停留在操蛋的第三階段，也就是現在，既支援字首寫法，又支援正常寫法，這樣就要出問題了。
當屬性超過一個參數值的時候，不同屬性産生的作用是不一樣的!
點選連結檢視效果
可以看到，采用優雅降級的寫法，如果一個浏覽器同時支援字首寫法和正常寫法，後面的舊版浏覽器樣式就覆寫了新版樣式，出現一些奇怪的問題 ，但是用漸進增強的寫法就不存在這個問題。這種屬性不止border-radius一個，是以為了避免這個不必要的錯誤，建議大家都采用漸進增強的寫法。
三.常見問題
漸進增強和優雅降級如何抉擇
四.解決方案
如果開發時間充裕，開發資金到位，就不存在抉擇這個問題了，肯定是漸進增強好呀！
但是現實往往很骨感。
這個時候，就要看你開發産品的閱聽人，閱聽人使用的用戶端。如果閱聽人年齡覆寫面廣，用戶端從移動到平闆到電腦，比如淘寶這種頁面，那沒得選，老老實實選漸進增強。
如果閱聽人用戶端單一，例如一個移動端頁面，再漸進增強PC端就沒那麼重要了。
各有優勢，但現實是絕大多數公司采用的都是漸進增強方式，畢竟業務優先，體驗不會淩駕在業務上。
五.更多讨論
問題1：大網站一般采取什麼方式
回答1：當場搜了一下，大網站直接采用一個-webkit-xxxxxx這種方式，并未采取增強或降級
問題2：為什麼加字首
回答2：比如谷歌，老舊版本隻支援字首的寫法，新版本則都相容
問題3：為什麼會出現這兩個概念
回答3：主要是CSS3的出現，不同浏覽器的支援程度不同
六.參考資料
《需警惕css3屬性的書寫順序》 --張鑫旭
《認識優雅降級和漸進增強》 --Angus
《漸進增強 VS 優雅降級》 -- 康斌