How does JavaScript determine whether the browser supports CSS3 attributes?

This article mainly introduces how JavaScript determines whether the browser supports CSS3 attributes. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

In fact, when using css3 For some attributes, in order to take into account the unfriendliness of low-end browsers to CSS3, it is often necessary to know whether certain browsers support the CSS3 attributes to be used, so as to make downward adaptation. For example, for common CSS3 animations, it is necessary to check whether the browser supports it. This article shares several methods below, and friends in need can refer to them.

Preface

The emergence of CSS3 has made the performance of browsers more colorful. The one with the greatest impact is animation. In daily writing animation When using , it is necessary to determine in advance whether the browser supports it, especially when writing a CSS3 animation library. For example, animation-play-state of transition is only supported by some browsers.

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

The first method: javascript is more commonly used with the following code:

var support_css3 = (function() {
 var p = document.createElement('p'),
  vendors = 'Ms O Moz Webkit'.split(' '),
  len = vendors.length;
 
 return function(prop) {
  if ( prop in p.style ) return true;
 
  prop = prop.replace(/^[a-z]/, function(val) {
   return val.toUpperCase();
  });
 
  while(len--) {
   if ( vendors[len] + prop in p.style ) {
   return true;
   } 
  }
  return false;
 };
})();

Use: Check if supportedtransform

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

if(isPropertySupported('opacity')){

}else{

}

# with

backgroundColor

##Third: CSS.supports

CSS.supports

is a special one among the CSS3 @support rules One, everyone 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. For example, does the input attribute support

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
}

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About JavaScript for making simple frame charts

About js for passing array parameters to the background controller method

The above is the detailed content of How does JavaScript determine whether the browser supports CSS3 attributes?. For more information, please follow other related articles on the PHP Chinese website!