Support for @supports in Firefox Nightly

  ·   Yesterday I landed support for the CSS @supports at-rule for Gecko (based in part on some earlier work done by former intern Vitor Menezes), and it should now be in Firefox Nightly builds. @supports is part of CSS Conditional Rules Module Level 3, and allows authors to condition rules based on whether particular property declarations are supported.

For example, let’s say you want to use a WOFF font but only if you are able to turn on its use of tabular numerals through the ‘font-variant-numeric’ property from css3-fonts. You could write that as follows:

@font-face { font-family: MyFontWithTabularNumerals; src: url(some.woff); }

.price { font-family: monospace }

@supports (font-variant-numeric: lining-nums) {
  .price { font-family: MyFontWithTabularNumerals;
           font-variant-numeric: lining-num; }
}

The text between the @supports and the open brace is the supports condition, and the rules within the braces are only applied if the condition evaluates to true. In a user agent that supports @supports but not ‘font-variant-numeric’, elements with class “price” will be rendered with the standard monospace font, but for those that do implement the property, MyFontWithTabularNumerals will be used.

The supports condition can use conjunctions, disjunctions and negations to form an expression:

@supports (width: 75vw) and (height: 50vh) {
  #main { position: absolute; top: 32px; left: 32px;
          width: 75vw; height: 50vh; }
}

@supports not (font-size: calc(1rem + 8px)) {
  body { font-size: 16px }
  body > h1 { font-size: 24px }
}

Note that a supports condition that includes a mix of conjunctions and disjunctions must always use parentheses to explicitly indicate their precedence. For example, instead of

@supports (color: green) and
          (background-color: yellow) or
          (background-color: eggyolk) ...

you must write either:

@supports (color: green) and
          ((background-color: yellow) or
           (background-color: eggyolk)) ...

or:

@supports ((color: green) and
           (background-color: yellow)) or
          (background-color: eggyolk) ...

Support behind a pref

To avoid having to prefix @supports, the implementation lives behind a preference that for the moment is enabled. If by the time Firefox 17 gets to Beta (some time in October) we feel that the specification is not yet stable enough or there aren’t any other implementations, we’ll flip the pref back to turn it off in the Beta channel so that we have some more time to tweak the implementation before the web starts to depend on it.

In the meantime, we encourage authors to experiment with it and provide feedback!

Update: While the changes have landed in the mozilla-central repository, they arrived after today’s Nightly was built! So check back in 24 hours and then you’ll be able to try it out.


Eighteen comments

You can subscribe to the comment feed to follow the responses to this entry.

  1. Daniel Glazman
    3 August 2012, 7:41pm

    Thanks for the heads up. Reminds me of my old http://is.gd/suMAdt :-)
    Is the corresponding OM fully implemented? For instance the setter
    for |CSSSupportsRule.conditionText| ? If yes, I may add support for this
    to next version of BlueGriffon.

  2. Not yet, but I’m working on it in bug 780060.

  3. Florian Rivoal
    3 August 2012, 9:43pm

    I’m working on this in Opera too. Congrats for putting it out there first.

    I peeked at your TCs, and it seems to me that the following TC is invalid:

    https://hg.mozilla.org/mozilla-central/file/dd435393e11e/layout/reftests/w3c-css/submitted/conditional3/css-supports-022.xht

    As far as I can tell, ‘unknown:’ doesn’t match the declaration production in http://www.w3.org/TR/CSS21/syndata.html#tokenization

  4. Great to hear Opera has a forthcoming implementation too. I think you’re right about that test. Will fix, thanks.

  5. i like this model…. here’s to the death of prefixes ~~cheers~~

  6. Every language I know of makes ‘and’ precedence over ‘or’ if parenthesis are omitted. Why would you force parenthesos on a globally accepted convention?

    Btw great work, can’t wait to use this :)

  7. [...] more on the blog of Cameron McCormack, who wrote Firefox’s [...]

  8. [...] Firefox adds supports for @supports in CSS. This most excellent new feature is like Modernizr‘s CSS bits built straight in CSS. Paul Irish even reports that Modernizr will use the proposed JS version of supports CSS. Apply different CSS depending on what the browser supports. [...]

  9. toyotabedzrock
    10 August 2012, 11:26am

    Who leaked the Opera support, they have not said a word about it yet. lol

  10. [...] [00:20:33] Support for @supports in Firefox Nightly [...]

  11. [...] Support for @supports in Firefox Nightly – and coming soon in Opera [...]

  12. [...] Support for @supports in Firefox Nightly • Cameron McCormack’s blog Eldräven är på gång att stöda CSS Conditional Rules Module Level 3. [...]

  13. [...] 17 unterstützt die @supports-Regel, über welche der Browser gefragt werden kann, ob er eine bestimmte CSS-Deklaration versteht, und [...]

  14. [...] 18 unterstützt die @supports-Regel, über welche der Browser gefragt werden kann, ob er eine bestimmte CSS-Deklaration versteht, und [...]

  15. [...] 19 unterstützt die @supports-Regel, über welche der Browser gefragt werden kann, ob er eine bestimmte CSS-Deklaration versteht, und [...]

  16. Can this be used to detect presence/lack of support for a font format? I have tried in vain to use it to test for WOFF; Aurora with the supports flag enabled fails this: http://jsfiddle.net/ecmanaut/32xNH/

  17. Johan, no you cannot use an at-rule like @font-face as the condition; it has to be a property declaration. I don’t think you’ll be able to test for WOFF support using @supports.

  18. [...] standardmäßig aktiviert wurde nun die Unterstützung für CSS @supports und der entsprechenden DOM-API, worüber der Browser gefragt werden kann, ob er eine bestimmte [...]

Leave a comment