好程序員web前端學習路線分享css3中的漸進加強和降級

　　好程序員web前端學習路線分享css3中的漸進加強和降級，漸進加強和降級這兩個概念是在 CSS3 出現以後火起來的。因爲低級瀏覽器不支持 CSS3，可是 CSS3 特效太優秀不忍放棄，因此在高級瀏覽器中使用CSS3，而在低級瀏覽器
只保證最基本的功能。兩者的目的都是關注不一樣瀏覽器下的不一樣體驗，可是它們側重點不一樣，因此致使了工做流程上的不一樣。
　　漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
　　優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。
　　在傳統軟件開發中，常常會提到向上兼容和向下兼容的概念。漸進加強至關於向上兼容，而優雅降級至關於向下兼容。向下兼容指的是高版本支持低版本的或者說後期開發的版本支持和兼容早期開發的版本，向上兼容的不多。大多數軟件都是向下兼容的，好比說Office2010能打開Office2007，Office2006，Office2005，Office2003等建的word文件，可是用Office2003就不能打開用Office2007，Office2010等建的word文件！
　　二者的區別：
　　優雅降級和漸進加強只是看待同種事物的兩種觀點。優雅降級和漸進加強都關注於同一網站在不一樣設備裏不一樣瀏覽器下的表現程度。關鍵的區別則在於它們各自關注於何處，以及這種關注如何影響工做的流程。
　　優雅降級觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 IE、Mozilla 等）的前一個版本。在這種設計範例下，舊版的瀏覽器被認爲僅能提供「簡陋卻無妨 (poor, but passable)」 的瀏覽體驗。你能夠作一些小的調整來適應某個特定的瀏覽器。但因爲它們並不是咱們所關注的焦點，所以除了修復較大的錯誤以外，其它的差別將被直接忽略。
　　漸進加強觀點則認爲應關注於內容自己。請注意其中的差異：我甚至連「瀏覽器」三個字都沒提。內容是咱們創建網站的誘因。有的網站展現它，有的則收集它，有的尋求，有的操做，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得漸進加強成爲一種更爲合理的設計範例。這也是它當即被 Yahoo! 所採納並用以構建其「分級式瀏覽器支持 (Graded Browser Support)」策略的緣由所在。
　　案例分析：
（1）代碼
.transition { /漸進加強寫法/
      -webkit-transition: all .5s;
      -moz-transition: all .5s;
      -o-transition: all .5s;
         transition: all .5s;
}
.transition { /優雅降級寫法/
          transition: all .5s;
       -o-transition: all .5s;
     -moz-transition: all .5s;
  -webkit-transition: all .5s;
}

　　（2）前綴CSS3（-webkit- / -moz- / -o-*）和正常CSS3在瀏覽器中的支持狀況是這樣的：
　　好久之前：瀏覽器前綴CSS3和正常CSS3都不支持；
　　不久以前：瀏覽器只支持前綴CSS3，不支持正常CSS3；
　　如今：瀏覽器既支持前綴CSS3，又支持正常CSS3；
　　將來：瀏覽器不支持前綴CSS3，僅支持正常CSS3.
　　（3）漸進加強的寫法，優先考慮老版本瀏覽器的可用性，最後才考慮新版本的可用性。在時期3前綴CSS3和正常CSS3均可用的狀況下，正常CSS3會覆蓋前綴CSS3。優雅降級的寫法，優先考慮新版本瀏覽器的可用性，最後才考慮老版本的可用性。在時期3前綴CSS3和正常CSS3均可用的狀況下，前綴CSS3會覆蓋正常的CSS3。
　　就CSS3這種例子而言，我更加推崇漸進加強的寫法。由於前綴CSS3的某些屬性在瀏覽器中的實現效果有可能與正常的CSS3實現效果不太同樣，因此最終仍是得以正常CSS3爲準。若是你好奇到底是什麼屬性在前綴CSS3和正常CSS3中顯式效果不同。
　　（4）如何抉擇
　　根據你的用戶所使用的客戶端的版原本作決定。請注意個人措辭，我沒有用瀏覽器，而是用客戶端。由於漸進加強和優雅降級的概念本質上是軟件開發過程當中低版本軟件與高版本軟件面對新功能的兼容抉擇問題。服務端程序不多存在這種問題，由於開發者能夠控制服務端運行程序的版本，就無所謂漸進加強和優雅降級的問題。可是客戶端程序則不是開發者所能控制的（你總不能強制用戶去升級它們的瀏覽器吧）。咱們所謂的客戶端，能夠指瀏覽器，移動終端設備（如：手機，平板電腦，智能手錶等）以及它們對應的應用程序（瀏覽器對應的是網站，移動終端設備對應的是相應的APP）。
　　如今有很成熟的技術，可以讓你分析使用你客戶端程序的版本比例。若是低版本用戶居多，固然優先採用漸進加強的開發流程；若是高版本用戶居多，爲了提升大多數用戶的使用體驗，那固然優先採用優雅降級的開發流程。
　　然而事實狀況是怎麼樣的呢？絕大多數的大公司都是採用漸進加強的方式，由於業務優先，提高用戶體驗永遠不會排在最前面。