CSS Variables Land in Firefox 31

Firefox 31 was released on July 22, 2014. You probably already have it but, if not, open the About Firefox dialog from the menu or head to Firefox.com to download a fresh copy.

Don’t expect too many surprises. There are a few new locales and developer tool tweaks but only one major addition: CSS variables. Firefox 31 is the first mainstream browser to support native CSS variables without having to enable experimental features.

CSS Variable Syntax

I first wrote about CSS variables in September 2012. We’ve waited a considerable time and you should note that the syntax has changed.

To declare a CSS variable:

element {
  --my-variable: #c00;
}

where:

• element is a selector. The variable value is available to all styles that inherit from this selector. Use :root if you want the variable to be available globally throughout your page’s stylesheets.
• ‐‐my-variable is the variable name. It must start with two hyphens followed by a name of your choice. Naming conventions seem quite loose and you can use most characters except for those required by CSS syntax, i.e. : ; { }. That said, I’d recommend keeping them simple and sticking to alpha-numeric characters.
• Finally, you set the value after the colon. Any type can be defined and used elsewhere, e.g. colors, fonts, dimensions, transition settings etc.

Example:

:root {
  --my-font: arial, helvetica, sans-serif;
  --my-color: #333;
  --my-background: #fff;
  --page-width: 80%;
  --max-page-width: 50em;
}

The variables can now be referenced when necessary using the var functional notation, e.g.

body {
  font-family: var(--my-font);
  color: var(--my-color);
  background-color: var(--my-background);
}

main {
  width: var(--page-width);
  max-width: var(--max-page-width);
}

Browser Support

CSS variables have a W3C Working Draft Specification but support is limited to Firefox 31 and above. The other vendors have not committed either way so, for the moment, you should probably avoid using native CSS variables unless you’re catering for a Firefox-only audience.

Too Little Too Late?

Native CSS variables would have revolutionized our working lives had they been implemented a decade ago. Today, if you want to use variables in your stylesheets, you probably already are. Preprocessors such as Sass, Less, and Stylus provide variable functionality with many other benefits:

1. There are no browser support issues.
2. Variable syntax is simpler, e.g. $my-variable in Sass/SCSS.
3. Variables are pre-processed once rather than every time the page is rendered.
4. Incorrect syntax is reported by the preprocessor.
5. You can take advantage of programming language-like features such as includes, nesting, mixins, functions, conditions, loops and more.

Admittedly, you’ll need to spend a little time installing a preprocessor and learning some syntax options but you’ll be productive within a few hours.

Once we have better browser support, perhaps native CSS variables will be practical for smaller projects, mock-ups, tutorials and demonstrations. Until that day, I suspect they’ll be of little use for most of us.