Check browser CSS property support with JavaScript?

Question

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.

Answer 1

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!');
}

Answer 2

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.

Answer 3

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
}

Answer 4

May be try this?

var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;