@supports API lands in Firefox Nightlies

This is old(ish) news to those of you who have been paying attention: support for the @supports API — CSS.supports() — landed in Firefox late last month. So far, a complete implementation is only available in Firefox Nightly builds. It should show up in a Firefox release sometime soon.

Opera included full support for @supports and its JavaScript API (with the older window.supportsCSS() syntax instead of CSS.supports()) in its 12.10 release.

Firefox has supported the CSS portion of @supports for awhile. However, now in Firefox you can test whether a particular CSS feature is supported using the CSS.supports() API. For example, you may want to include a JavaScript animation library if CSS3 animations aren't supported.

if( CSS.supports('animation-name', 'none' ) ){
    var js = document.createElement('script');
    js.src = 'animation-script.js';
    document.head.appendChild(js);
}

Note that CSS.supports() returns true if the property is “a literal match for the name of a CSS property that the UA supports” and the value provided “would be successfully parsed as a supported value for that property”. This means CSS.supports('background','none') is true, but CSS.supports('background','pixies') is false.

In Opera, the syntax is slightly different. You need to use window.supportsCSS('animation-name','none') instead. In your development process, you may want to abstract away the syntactical differences, since CSS.supports() will become the final syntax.

~~That said, implementations between Opera and Firefox (Aurora) differ slightly for reasons I need to investigate. For example, CSS.supports('animation-name') currently evaluates to true in Opera 12.1x and false in Firefox. Yet CSS.supports('animation-name',null) evaluates to true in both (as does CSS.supports('animation-name', 'none') since 'none' is a valid value).~~

Webkit support for @supports is complete. So far, it is only available in builds that have the CSS3_CONDITIONAL_RULES flag enabled. As of January 17, this does not include the WebKit Nightly release for Mac, which means it also isn't yet available in any versions of Chrome or Safari.

Support also hasn't landed in Opera Mobile or Firefox for Android. I can only assume that the Internet Explorer team is working on it.