JavaScript判斷瀏覽器是否支持CSS3屬性

2016-11-07 1480 2 編輯:網站前端設計伍林 來源:網頁設計書籍

在使用css3的一些屬性時,為了兼顧低端瀏覽器對CSS3的不友好性,往往需要知道某些瀏覽器是否支持要使用的CSS3屬性,以此來做向下適配。比如常見的CSS3動畫就很有必要檢測瀏覽器是否支持。下面分享幾種方法:

第一種:javascript比較常用下面這個代碼:

var support_css3 = (function() {

   var div = document.createElement('div'),

      vendors = 'Ms O Moz Webkit'.split(' '),

      len = vendors.length; 

   return function(prop) {

      if ( prop in div.style ) return true;

 

      prop = prop.replace(/^[a-z]/, function(val) {

         return val.toUpperCase();

      }); 

      while(len--) {

         if ( vendors[len] + prop in div.style ) {

            return true;

         } 

      }

      return false;

   };

})();

使用:檢查是否支持transform

if(support_css3('transform')){

}else{

}

第二:JavaScript方法2:不支持ie6

function isPropertySupported(property)

{

return property in document.body.style;

}

使用:

記得上面的屬性,要用backgroundColor替換background-color

if(isPropertySupported('opacity')){

}else{

}

第三:CSS.supports

CSS.suports是CSS3 @support 規則中比較特別的一個,每一個支持@support規則的都支持下面這個函數(不推薦這種方法,畢竟@support也有兼容性,某些瀏覽器可能支持CSS3屬性中的一個,但卻不支持@support)

//pass the same string as you pass to the @supports rule

if(CSS.supports("(background-color: red) and (color:white"))

{

    document.body.style.color = "white";

    document.body.style.backgroundColor = "red";

}

最后再分享一個判斷瀏覽器是否支持某些HTML5屬性的函數,比如input屬性是否支持palaceholder.

function elementSupportsAttribute(element, attribute) {

  var test = document.createElement(element);

  if (attribute in test) {

    return true;

  } else {

    return false;

  }

};

用法:

if (elementSupportsAttribute("textarea", "placeholder") {

} else {

   // fallback

}

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾