Various methods for JavaScript to determine whether the browser supports CSS3 attributes

Foreword

The emergence of CSS3 has made browser performance more colorful. The biggest impact on performance is animation. When writing animations on a daily basis, it is necessary to determine whether the browser supports it in advance, especially when writing CSS3 animation libraries. when. For example, transition animation-play-state is only supported by some browsers.

The following method can use a script to determine whether the browser supports a certain CSS3 attribute:

First type: javascript is more commonly used the following code:

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;
 };
})();

Usage: Check whether transform is supported

if(support_css3('transform')){
 
}else{
 
}

Second: JavaScript method 2: ie6 is not supported

function isPropertySupported(property)
{
 return property in document.body.style;
}

Use:

Remember the above attributes and replace background-color with backgroundColor

if(isPropertySupported('opacity')){
 
}else{
 
}

Third: CSS.supports

CSS.supports is a special one among CSS3 @support rules. Every one that supports @support rules supports the following function (this method is not recommended. After all, @support also has compatibility. Some browsers may support CSS3 attributes. One, but it does not support @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";
}

Finally, I will share a function to determine whether the browser supports certain HTML5 attributes, such as whether the input attribute supports palaceholder.

function elementSupportsAttribute(element, attribute) {
 var test = document.createElement(element);
 if (attribute in test) {
 return true;
 } else {
 return false;
 }
};

Usage:

if (elementSupportsAttribute("textarea", "placeholder") {
 
} else {
 // fallback
}