Css property support detection

Question

Is there a generic way in javascript to check if the css property is supported by current browser or not?

I am currently using "document.compatMode" to check if it is quirks or not. But there must be a way to check specific to a property.

Answer 1

You can do this, ex:

typeof document.body.style.borderRadius

In supported browsers, it should return 'string'. In non supported, it will be 'undefined'

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.