Firefox supports @⁠supports, gets my support

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

I’ve been real­ly excit­ed about the @supports rule since I first heard the pro­pos­al for it, and now that an imple­men­ta­tion has land­ed in Fire­fox Night­ly (and is on it’s way in Opera) my excite­ment has only increased. You can think of @supports as a native imple­men­ta­tion of Mod­ern­izr — and hope­ful­ly that descrip­tion is enough to get you excit­ed too.

@supports uses essen­tial­ly the same syn­tax as media queries, only with expres­sions made of stan­dard CSS dec­la­ra­tions rather than media fea­tures. If the expres­sion log­ic is true, all of the rules inside the braces are applied. For exam­ple, if you want­ed to apply a set of rules only to browsers which sup­port unpre­fixed CSS mul­ti­ple columns, you could use this:

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

You can use and, not and or oper­a­tors to extend the log­i­cal expres­sions; so, to test for mul­ti­ple columns or their -moz- pre­fixed equivalents:

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

And to test for sup­port for both mul­ti­ple columns and lin­ear gradients:

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

Or for browsers which don’t sup­port CSS transforms:

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

If you’re writ­ing expres­sions with lots of oper­a­tors, you have to use paren­the­ses to show prece­dence, like this:

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

As men­tioned, @supports is cur­rent­ly in Fire­fox Night­ly and pen­ciled in for release in Fire­fox 17. How­ev­er, due to Mozil­la’s pol­i­cy on exper­i­men­tal fea­tures, it may have to be enabled using the layout.css.supports-rule.enabled pref­er­ence in about:config. Opera have men­tioned that it’s being worked on, so hope­ful­ly we’ll see that come soon and can start using @supports in the near future.

Obvi­ous­ly as no oth­er browsers will sup­port @supports, its val­ue in the short term will main­ly be in test­ing for -moz- and -o- pre­fixed prop­er­ties; but in the longer term, this is going to be amaz­ing­ly useful.

Read more on the blog of Cameron McCor­ma­ck, who wrote Fire­fox’s implementation.

Update: There’s a match­ing API for this, using the supports attribute of the CSS object. This works by return­ing false or true depend­ing on the sup­plied val­ue; this val­ue can be a sim­ple property:value pair, like so:

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

Or you can cre­ate more com­plex require­ments using parentheses:

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

NB: Updat­ed in June 2013 to change the ref­er­ence to the API to use the cor­rect syntax.

Also, a forth­com­ing release of Mod­ern­izr will defer to the results of @supports where available.

Thanks to Paul Irish for the addi­tion­al info in the com­ments below.

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

  1. […] Fire­fox sup­ports @⁠​supports, gets my sup­port (Bro­ken Links) […]

  2. A few oth­er notes on this feature…

    When @supports was pro­posed I made sure to pro­pose a JS API for the same func­tion­al­i­ty. David Baron liked the idea and it’s now (most­ly) in the spec:

    Right after @supports land­ed I got a bug filed for sup­port­sC­SS() and a few days lat­er Cameron land­ed an ini­tial patch. How do peo­ple like the name ‘sup­port­sC­SS()‘. Is ‘sup­port­sStyle()‘ bet­ter? Most folks could go either way at this point.

    Also on brows­er sup­port: Opera already has an imple­men­ta­tion in progress of @supports; we haven’t seen patch­es yet from WebKit but there is def­i­nite­ly inter­est.

  3. Last­ly, an upcom­ing release of Mod­ern­izr will defer to the results of @supports if @supports is sup­port­ed. :p

  4. I think the way @supports uses the con­di­tion­al ‘or’ should be sim­i­lar to @media where the com­ma express­es a log­i­cal ‘OR’.

    Can’t wait to com­bine this with native event detec­tion using…
    @media(hover) { ... }
    @media(pointer:coarse) { ... }
    @media(pointer:fine) { ... }

    Mod­ern­izr will always have a place in our hearts :)

  5. […] but native in the brows­er, with @supports…  Me […]

  6. Wait, not quite clear on this. @supports basi­cal­ly asks if the prop­er­ty it is ask­ing for is sup­port­ed by the brows­er and if so, do the fol­low­ing.. (what’s in the brackets)?

    If so, that would be great…!!!

  7. Yes Mar­co, exact­ly that.

  8. […] CSS3 sup­port in Fire­fox :: Fire­fox night­ly has sup­port for @supports […]

  9. This is very cool, and I can def­i­nite­ly see the ben­e­fits, although I have a query.

    As an exam­ple, if we have the following
    ‘@supports ( back­ground-image: linear-gradient(#f00,#00f) ) { back­ground-image: linear-gradient(#f00,#00f) }‘
    sure­ly ‘back­ground-image: linear-gradient(#f00,#00f)‘ should have a decent fall­back in the event that it is not supported?

  10. […] cualquier modo Paul Irish, desar­rol­lador de Mod­ern­izr, nos ase­gu­ra que ten­dremos lo mejor de los dos mun­dos: Last­ly, an upcom­ing release of Mod­ern­izr will defer to […]

  11. […] CSS3 sup­port in Fire­fox :: Fire­fox night­ly has sup­port for @supports […]

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

  13. […] (Den här ver­sio­nen av Opera använ­der sup­port­sC­SS . Efter genom­föran­det var spec ändrades till CSS.supports istäl­let, där­för använ­der både i testet ovan. Du skulle behö­va skri­va två upp­sät­tningar regler, en med) klasser­na tilläm­pas av Mod­ern­izr tester­na, de andra som använ­der @ stöd­jer block som i tid hedrad-CSS mode, ignor­eras av web­bläsare som inte förstår dem. Det­ta gör din CSS större, men sparar en HTTP-begäran och sparar exekver­ingstid. Ska du använ­da Mod­ern­izr eller @ stöd? Svaret är defin­i­tivt ”det beror”. Som med alla webbpro­jekt, bara du kan avgöra vilket som är det bäs­ta sättet. […]

  14. There is a prob­lem with the examples:
    (col­umn-count: 1) and (back­ground-image: linear-gradient(#f00,#00f)
    should be
    (col­umn-count: 1) and (back­ground-image: linear-gradient(#f00,#00f))

  15. Thanks Philip, I’ve updat­ed the arti­cle to remove those errors.

  16. Hi folks!
    Check out my poly­fill for CSS.supports DOM API

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