1. 程式人生 > >js中優雅降級與漸進增強

js中優雅降級與漸進增強

找了一上午 ,終於找到了,什麼優雅降級,什麼 漸進增強,就一個意思麼,為了實現css3的特效和js之間的配合實現設計效果。

不過話是這麼說的 但是這個東西思路還是有些不一樣

優雅降級:在網站設計時,術語優雅降級指的是新的或者是複雜特點的明智實施,目的是確保大部分的因特網使用者可以有效的和站點上的頁面互動。過去幾年站點設計和因特網使用的重要的里程碑包括圖片,幀,線上遊戲,Java, JavaScript, ActiveX控制,瀏覽標籤,因特網上的語音通話(VoIP)和視訊會議技術的引入。當瀏覽器或作業系統的更新版本釋出時,它們經常包含新的特徵來保持和因特網功能的最新增強的同步。因為各種各樣的原因,許多因特網使用者喜歡使用他們已有的瀏覽器而不是每當一個新的Web站點技術流行時,立即更新到最新版本。當一個站點被有意識設計成有優雅降級的特點時,這些使用者不會突然被強迫升級他們的瀏覽器除非他們正在使用“古董”。

說人話就是:優雅降級是因某些新發布的CSS樣式或HTML標籤在老的瀏覽器上不相容,而在寫程式碼時做的了一定的處理,確保在瀏覽器不相容時,也能夠達到原效果或部分原效果。

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

兩種方法分別對應著不同的使用者群體,優雅降級 屬於大部分優質客戶(身上裝備很好的人),漸進增強屬於大部分都是拿菜刀打怪升級的客戶

下面這個 不是本人原創 但是覺得非常好用的一個函式!

/**

  • 判斷瀏覽器是否支援某一個CSS3屬性
  • @param {String} 屬性名稱
  • @return {Boolean} true/false
  • @version 1.0
  • @author ydr.me
  • 2014年4月4日14:47:19
    */

function supportCss3(style) {
var prefix = [‘webkit’, ‘Moz’, ‘ms’, ‘o’],
i,
humpString = [],
htmlStyle = document.documentElement.style,
_toHumb = function (string) {
return string.replace(/-(\w)/g, function ($0, $1) {
return $1.toUpperCase();
});
};

for (i in prefix)
humpString.push(_toHumb(prefix[i] + ‘-’ + style));

humpString.push(_toHumb(style));

for (i in humpString)
if (humpString[i] in htmlStyle) return true;

return false;
}