JavaScript checks whether the browser supports multiple methods for CSS3 attributes. javascriptcss3

JavaScript checks whether the browser supports multiple methods for CSS3 attributes. javascriptcss3

Preface

The emergence of CSS3 makes the browser's performance more colorful, and the biggest impact of performance is animation. During daily animation writing, it is necessary to determine whether the browser supports it in advance, especially when writing a CSS3 animation library. For exampletransitionOfanimation-play-stateOnly some browsers support this feature.

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

First: the following code is commonly used in 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; };})();

Usage:Check whether it is supportedtransform

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

Second: JavaScript Method 2: ie6 is not supported

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

Usage:

Remember the above attributes and use thembackgroundColorReplacebackground-color

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

Third: CSS. supports

CSS.suportsIs a special rule in CSS3 @ support.@supportAll rules support the following function (this method is not recommended. After all@supportSome browsers may support one of the CSS3 attributes, but they do not.@support)

//pass the same string as you pass to the @supports ruleif(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 supportspalaceholder.

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}

Summary

The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message. Thank you for your support.