Firefox supports @⁠supports, gets my support

Warning This article was written over six months ago, and may contain outdated information.

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 API for this, using the supports attribute of the CSS object. This works by returning false or true depending on the supplied value; this value can be a simple property:value pair, like so:

var foo = window.CSS.supports('border-color','red');

Or you can create more complex requirements using parentheses:

var foo = window.CSS.supports('(border-color: red) and (z-index: 1)');

NB: Updated in June 2013 to change the reference to the API to use the correct syntax.

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.

17 comments on
“Firefox supports @⁠supports, gets my support”

  1. […] Firefox supports @⁠​supports, gets my support (Broken Links) […]

  2. A few other notes on this feature…

    When @supports was proposed I made sure to propose a JS API for the same functionality. David Baron liked the idea and it’s now (mostly) in the spec: http://dev.w3.org/csswg/css3-conditional/#window-api

    Right after @supports landed I got a bug filed for supportsCSS() https://bugzilla.mozilla.org/show_bug.cgi?id=779917 and a few days later Cameron landed an initial patch. How do people like the name ‘supportsCSS()‘. Is ‘supportsStyle()‘ better? Most folks could go either way at this point.

    Also on browser support: Opera already has an implementation in progress of @supports; we haven’t seen patches yet from WebKit but there is definitely interest.

  3. Lastly, an upcoming release of Modernizr will defer to the results of @supports if @supports is supported. :p

  4. I think the way @supports uses the conditional ‘or’ should be similar to @media where the comma expresses a logical ‘OR’.

    Can’t wait to combine this with native event detection using…
    @media(hover) { … }
    @media(pointer:coarse) { … }
    @media(pointer:fine) { … }

    @paul_irish
    Modernizr will always have a place in our hearts :)

  5. […] but native in the browser, with @supports…  Me […]

  6. Wait, not quite clear on this. @supports basically asks if the property it is asking for is supported by the browser and if so, do the following.. (what’s in the brackets)?

    If so, that would be great…!!!

  7. Yes Marco, exactly that.

  8. […] CSS3 support in Firefox :: Firefox nightly has support for @supports […]

  9. This is very cool, and I can definitely see the benefits, although I have a query.

    As an example, if we have the following
    ‘@supports ( background-image: linear-gradient(#f00,#00f) ) { background-image: linear-gradient(#f00,#00f) }‘
    surely ‘background-image: linear-gradient(#f00,#00f)‘ should have a decent fallback in the event that it is not supported?

  10. […] cualquier modo Paul Irish, desarrollador de Modernizr, nos asegura que tendremos lo mejor de los dos mundos: Lastly, an upcoming release of Modernizr will defer to […]

  11. […] CSS3 support in Firefox :: Firefox nightly has support for @supports […]

  12. […]          实际上,Modernizr自身也在计划未来使用@supports来替代自身的检测方法。 […]

  13. […] (Den här versionen av Opera använder supportsCSS . Efter genomförandet var spec ändrades till CSS.supports istället, därför använder både i testet ovan. Du skulle behöva skriva två uppsättningar regler, en med) klasserna tillämpas av Modernizr testerna, de andra som använder @ stödjer block som i tid hedrad-CSS mode, ignoreras av webbläsare som inte förstår dem. Detta gör din CSS större, men sparar en HTTP-begäran och sparar exekveringstid. Ska du använda Modernizr eller @ stöd? Svaret är definitivt ”det beror”. Som med alla webbprojekt, bara du kan avgöra vilket som är det bästa sättet. […]

  14. There is a problem with the examples:
    (column-count: 1) and (background-image: linear-gradient(#f00,#00f)
    should be
    (column-count: 1) and (background-image: linear-gradient(#f00,#00f))

  15. Thanks Philip, I’ve updated the article to remove those errors.

  16. Hi folks!
    Check out my polyfill for CSS.supports DOM API https://github.com/termi/CSS.supports/

  17. […] 但话又说回来,如果你的浏览器不支持@supports,目前来说你还是需要依赖于Modernizr来做一些检测。其实Paul Irish说过,Modernizr也在计划,未来将使用@supports来替代自身的检测方法。 […]