Is it possible in JavaScript to know if a CSS property is supported by the client browser? I'm talking about the rotation properties of CSS3. I want to execute some functions only if the browser supports them.
Add a comment
|
4 Answers
I believe you can do it this way:
if ('WebkitTransform' in document.body.style
|| 'MozTransform' in document.body.style
|| 'OTransform' in document.body.style
|| 'transform' in document.body.style)
{
alert('I can Rotate!');
}
2 Comments
Kylok
It may be worth noting that this technically tests whether the browser supports the CSS3
transform style and not specifically the rotate() transform function. In my (limited) experience, the former has always implied the latter, but I’m not sure if that’s a reliable assumption (see this question).
Dennis98
Working example: jsfiddle.net/dp3ueaz5 But I would rather use this function: code.tutsplus.com/tutorials/… Better to understand and it automatically checks vendor prefixes. ;)
There is a new DOM API CSS.supports for that purpose. FF, Opera (as supportsCSS) and Chrome Canary already implement this method.
For cross-browser compatibility you can use my CSS.supports polyfill
Example:
CSS.supports("display", "table");//IE<8 return false
But, you still need to specify browser prefix for prefixing css properties. For example:
CSS.supports("-webkit-filter", "blur(10px)");
I suggest to using Modernizr for feature-detection.
Comments
May be try this?
var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
2 Comments
Robert Dundon
Not an ideal answer, but why is this downvoted? I don't see any technical error with it
Buka
@RobertDundon perhaps my solution is like the first, anyway thanks for support =)
You can use Modernizr library.
Example for css transform:
in .css file;
.no-csstransforms .box { color: red; }
.csstransforms .box { color: green; }
in .js file;
if (Modernizr.csstransforms) {
// supported
} else {
// not-supported
}
