優雅降級和漸進增強的區別


有些css3效果demo,你會發現寫css3屬性時,兼容性的寫法順序不太一樣。

比如transition屬性,有些把transition放在前面有些是放在后面:

復制代碼
.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; }
復制代碼

帶前綴的排列應該只是為了整齊吧(還是代表了對瀏覽器的喜好程度)?

都不是!transition放在前面還是后面引申的是兩個不同的概念:優雅降級和漸進增強。

 

優雅降級和漸進增強印象中是隨着css3流出來的一個概念。

由於低級瀏覽器不支持css3,但css3的效果又太優秀不忍放棄,所以在高級瀏覽中使用css3而低級瀏覽器只保證最基本的功能。

咋一看兩個概念差不多,都是在關注不同瀏覽器下的不同體驗,

關鍵的區別是他們所側重的內容,以及這種不同造成的工作流程的差異。

 

什么是漸進增強、優雅降級?

  漸進增強 progressive enhancement:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

  優雅降級 graceful degradation:一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。 

區別:

  優雅降級是從復雜的現狀開始,並試圖減少用戶體驗的供給,

  而漸進增強則是從一個非常基礎的,能夠起作用的版本開始,並不斷擴充,以適應未來環境的需要。

  降級(功能衰減)意味着往回看;而漸進增強則意味着朝前看,同時保證其根基處於安全地帶。

 

“優雅降級”觀點

“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段,並把測試對象限定為主流瀏覽器(如 IE、Mozilla 等)的前一個版本。

在這種設計范例下,舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由於它們並非我們所關注的焦點,因此除了修復較大的錯誤之外,其它的差異將被直接忽略。

 

“漸進增強”觀點

“漸進增強”觀點則認為應關注於內容本身。

內容是我們建立網站的誘因。有的網站展示它,有的則收集它,有的尋求,有的操作,還有的網站甚至會包含以上的種種,但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被 Yahoo! 所采納並用以構建其“分級式瀏覽器支持 (Graded Browser Support)”策略的原因所在。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM