I’ve been really excited about the @supports rule since I first heard the proposal for it, and now that an implementation has landed in Firefox Nightly (and is on it’s way in Opera) my excitement has only increased. You can think of @supports as a native implementation of Modernizr — and hopefully that description is enough to get you excited too.

@supports uses essentially the same syntax as media queries, only with expressions made of standard CSS declarations rather than media features. If the expression logic is true, all of the rules inside the braces are applied. For example, if you wanted to apply a set of rules only to browsers which support unprefixed CSS multiple columns, you could use this:

@supports (column-count: 1) { ... }

You can use and, not and or operators to extend the logical expressions; so, to test for multiple columns or their –moz– prefixed equivalents:

@supports (column-count: 1) or (-moz-column-count: 1) { … }

And to test for support for both multiple columns and linear gradients:

@supports (column-count: 1) and (background-image: linear-gradient(#f00,#00f)) { … }

Or for browsers which don’t support CSS transforms:

@supports not (transform: rotate(45deg)) { … }

If you’re writing expressions with lots of operators, you have to use parentheses to show precedence, like this:

@supports ((column-count: 1) or (-moz-column-count: 1)) and (background-image: linear-gradient(#f00,#00f)) { … }

As mentioned, @supports is currently in Firefox Nightly and penciled in for release in Firefox 17. However, due to Mozilla’s policy on experimental features, it may have to be enabled using the layout.css.supports-rule.enabled preference in about:config. Opera have mentioned that it’s being worked on, so hopefully we’ll see that come soon and can start using @supports in the near future.

Obviously as no other browsers will support @supports, its value in the short term will mainly be in testing for –moz– and –o– prefixed properties; but in the longer term, this is going to be amazingly useful.

Read more on the blog of Cameron McCormack, who wrote Firefox’s implementation.

Update: There’s a matching JS API for this, using a function which has the working name supportsCSS. This would work like matchMedia, with the expression being supplied as an argument:

var foo = window.supportsCSS('column-count: 1');

The function would return true if the expression was matched, or false otherwise. This has been patched into Gecko, but is not yet available, as it’s possible (probable?) that the function name will change.

Also, a forthcoming release of Modernizr will defer to the results of @supports where available.

Thanks to Paul Irish for the additional info in the comments below.