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.

Shanta

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

Handtohand

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). – Brinn

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. ;) – Overijssel

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.

Guan

Answer 3

May be try this?

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

Angiology

Not an ideal answer, but why is this downvoted? I don't see any technical error with it – Organism

@RobertDundon perhaps my solution is like the first, anyway thanks for support =) – Angiology

Answer 4

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
}

Hustle