好程序員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)。

  現在有很成熟的技術,能夠讓你分析使用你客戶端程序的版本比例。如果低版本用戶居多,當然優先採用漸進增強的開發流程;如果高版本用戶居多,爲了提高大多數用戶的使用體驗,那當然優先採用優雅降級的開發流程。

  然而事實情況是怎麼樣的呢?絕大多數的大公司都是採用漸進增強的方式,因爲業務優先,提升用戶體驗永遠不會排在最前面。

 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章