Support for @supports in Firefox Nightly

3 August 2012   ·   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.