天天看點

css優雅降級和漸進增強

優雅降級:一開始就建構完整的功能,然後再針對低版本浏覽器進行相容。

.transition { /*優雅降級寫法*/
          transform:rotate(30deg);
       -o-transform: rotate(30deg);//-o opera浏覽器字首
     -moz-transform: rotate(30deg);// -moz代表firefox浏覽器私有屬性
-webkit-transform: rotate(30deg);// -webkit代表chrome、safari私有屬性
                                 // -ms代表IE浏覽器私有屬性

}
           

漸進增強:針對低版本浏覽器進行建構頁面,保證最基本的功能,然後再針對進階浏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

.transition { /*漸進增強寫法*/
  -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
       -o-transform: rotate(30deg);
          transform: rotate(30deg);
}
           

差別:漸進增強是向上相容,優雅降級是向下相容。

建議: 現在網際網路發展很快, 連微軟公司都抛棄了ie浏覽器,轉而支援 edge這樣的高版本浏覽器,我們很多情況下沒有必要再時刻想着低版本浏覽器了,而是一開始就建構完整的效果,根據實際情況,修補低版本浏覽器問題。

參考 參考連結

css