Check whether a CSS property is supported

Sometimes when using JavaScript, you need to determine whether a certain CSS property is supported by the current browser or not. For instance when setting opacity for an element, you need to find out whether the property that the browser supports is opacity, -moz-opacity (MozOpacity), -khtml-opacity (KhtmlOpacity) or the IE proprietary filter.

Instead of performing a forwards incompatible browser detect, you can easily check which property is supported with a simple conditional. The only thing you’ll need is a DOM element that exists for sure. A DOM element that exists in every page and is also easily accessible via JS (no need for getElementsByTagName), is the body element, but you could use the <head> or even a <script> tag (since there is a script running in the page, a <script> tag surely exists). In this article we’ll use document.body, but it’s advised that you use the head or script elements, since document.body may not exist at the time your script is run.

So, now that we have an element to test at, the test required is:

if('opacity' in document.body.style)
{
	// do stuff
}

Of course you’d change document.body with a reference to the element you’d like to test at (in case it’s not the body tag)  and 'opacity' with the name of the actual property you want to test. You can even wrap up a function to use when you want to check about the support of a certain property:

function isPropertySupported(property)
{
	return property in document.body.style;
}

The only thing you should pay attention to, is using the JavaScript version of the CSS property (for example backgroundColor instead of background-color)

Wasn’t it easy?

  • Pingback: Things you should know when not using a JS library « Lea Verou

  • Pingback: Check whether the browser supports RGBA (and other CSS3 values) « Lea Verou

  • http://thinkweb2.com/projects/prototype/ kangax

    I would recommend to *always* use `document.documentElement` (i.e. HTML element) instead of `document.body` (for the exactly the reasons you mention), or explicitly create a dummy element, remembering to `null` it afterwords.

    `document.documentElement` is *always present* at the time of script execution, as long as browser implements DOM L1 (if I’m not mistaken).

    And, btw, SCRIPT element *can* be missing if script is executed as part of an intrinsic event handler ; )

    <body onload=”alert(document.getElementsByTagName(‘script’)[0])”>

    </body>

  • http://leaverou.me Lea Verou

    You’re right about document.documentElement. I thought that in IE6- Quirks mode it had issues, but as it turns out, it works fine for this case at least.

    I also hadn’t thought about the case of intrinsic event handlers.

    Good points, thank you. :)