25

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.

Anders
  • 8,307
  • 9
  • 56
  • 88
mck89
  • 18,918
  • 16
  • 89
  • 106

4 Answers4

40

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!');
}
jamland
  • 931
  • 15
  • 23
  • 3
    It may be worth noting that this technically tests whether the browser supports the CSS3 `transform` style and not specifically the `rotate()` [transform function](https://developer.mozilla.org/en-US/docs/Web/CSS/transform#CSS_transform_functions). 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](http://stackoverflow.com/questions/23528176/do-all-browsers-that-support-css3-transforms-also-support-all-transform-function)). – Kylok May 09 '14 at 17:44
  • Working example: http://jsfiddle.net/dp3ueaz5/ But I would rather use this function: http://code.tutsplus.com/tutorials/quick-tip-detect-css-support-in-browsers-with-javascript--net-16444 Better to understand and it automatically checks vendor prefixes. ;) – Dennis98 Jul 06 '15 at 02:01
8

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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132
termi
  • 946
  • 9
  • 8
1

May be try this?

var temp = document.createElement('div');
var isSupport = temp.style['propName'] != undefined;
Buka
  • 59
  • 6
0

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
}
Haydar C.
  • 742
  • 12
  • 24