Preface
The emergence of CSS3 makes the browser's performance more colorful, and the biggest impact on the performance is animation. When writing animations in daily life, it is necessary to judge whether the browser supports it in advance, especially when writing CSS3 animation library. for exampletransitionofanimation-play-state, only some browsers support it.
The following method can use scripts to determine whether the browser supports a certain CSS3 attribute:
The first type: JavaScript is more commonly used in the following code:
var support_css3 = (function() {
var div = ('div'),
vendors = 'Ms O Moz Webkit'.split(' '),
len = ;
return function(prop) {
if ( prop in ) return true;
prop = (/^[a-z]/, function(val) {
return ();
});
while(len--) {
if ( vendors[len] + prop in ) {
return true;
}
}
return false;
};
})();
use:Check if it is supportedtransform
if(support_css3('transform')){
}else{
}
Second: JavaScript method 2: ie6 is not supported
function isPropertySupported(property)
{
return property in ;
}
use:
Remember the above attributes, usebackgroundColorreplacebackground-color
if(isPropertySupported('opacity')){
}else{
}
third:
It is a special one in the CSS3 @support rules, and each one supports it@supportAll rules support the following function (this method is not recommended, after all@supportThere is also compatibility, some browsers may support one of the CSS3 properties, but they do not.@support）
//pass the same string as you pass to the @supports rule
if(("(background-color: red) and (color:white"))
{
= "white";
= "red";
}
Finally, I will share a function to determine whether the browser supports certain HTML5 attributes, such as whether the input attribute supports them.palaceholder.
function elementSupportsAttribute(element, attribute) {
var test = (element);
if (attribute in test) {
return true;
} else {
return false;
}
};
usage:
if (elementSupportsAttribute("textarea", "placeholder") {
} else {
// fallback
}
Summarize
The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.