css優雅降級和漸進增強


今天看前端公眾號發布的文章,學到了幾個新詞

1、modernizr

2、@support

3、優雅降級

其中第三個“優雅降級”,如此文藝的名字居然還是第一次聽到。度娘了一下,發現[優雅降級],[漸進增強]兩個是相對的概念,總之上面三個詞匯都與對css樣式的支持息息相關。

所謂[優雅降級]與[漸進增強]並不難以理解,是不同的設計模式

[優雅降級]:通俗來講,是我們首先滿足的是“新“,比如當前的CSS3一些新的特性<canvas><video>……當前所流行的瀏覽器版本並不完全支持。也許由於我們的用戶群體使用的瀏覽器版本絕大部分可以支持。那么

     我們的設計可以先來滿足這一部分的需求,但同時我們也要考慮到那些低版本的,不能兼容的改特性的瀏覽器,我們需要添加一些類似於'hack'的技術,使得低版本也可以看到我們要表達的效果。

[漸進增強]:相對於[降級]設計模式是,也許我們的受眾群體絕大部分使用的是低版本的瀏覽器,因此我們實現我們的效果的時候,優先滿足低版本的要求,但是對於那些高版本的,我們也會根據其新增效果來添加

     新效果的實現方式。如我們需要顯示用戶的頭像,低版本的里瀏覽器我們可以直接用方形顯示,而且高版本的瀏覽器我們就可以使用radius實現其圓形的展示。

總之,兩種設計模式的不同是由於側重點不一樣。

像優雅降級舉得常見的例子中:

transition{ 
   -webkit-transition: all .5s; 
      -moz-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
}        

這些瀏覽器兼容順序也是要根據每個瀏覽器對屬性的支持,也要在實踐中才能知道正確與否。

 


免責聲明!

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



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