今天看前端公眾號發布的文章,學到了幾個新詞
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; }
這些瀏覽器兼容順序也是要根據每個瀏覽器對屬性的支持,也要在實踐中才能知道正確與否。