CSS Variables in Firefox Nightly

As reported by Cameron McCormack, Firefox Nightly (version 29) now supports CSS variables. You can get a quick overview in this short screencast:

You can define variables in a context with a var- prefix and then implement them using the var() instruction. For example:

:root {
  var-companyblue: #369; 
  var-lighterblue: powderblue;
}
 
h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}
<h1>Header on page</h1>
<h2>Subheader on page</h2>

This defines the two variables companyblue and lighterblue for the root element of the document which results in (you can try it here using Firefox Nightly):

Variables are scoped, which means you can overwrite them:

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #cfc;
}
 
h1 {
  color: var(companyblue);
}
h2 {
  color: var(lighterblue);
}
<h1>Header on page</h1>
<h2>Subheader on page</h2>
 
<div class="partnerbadge">
  <h1>Header on page</h1>
  <h2>Subheader on page</h2>
</div>

Using these settings, headings inside an element with a class of partnerbadge will now get the other blue settings:

Variables can be any value you want to define and you can use them like any other value, for example inside a calc() calculation. You can also reset them to other values, for example inside a media query. This example shows many of these possibilities.

:root {
  var-companyblue: #369;
  var-lighterblue: powderblue;
  var-largemargin: 20px;  
  var-smallmargin: calc(var(largemargin) / 2);
  var-borderstyle: 5px solid #000;
  var-headersize: 24px;
}
.partnerbadge {
  var-companyblue: #036;
  var-lighterblue: #369;
  var-headersize: calc(var(headersize)/2);
  transition: 0.5s;
}
 
@media (max-width: 400px) {
  .partnerbadge {
     var-borderstyle: none;  
     background: #eee;
  }
}
 
/* Applying the variables */
body {font-family: 'open sans', sans-serif;}
 
h1 {
  color: var(companyblue);
  margin: var(largemargin) 0;
  font-size: var(headersize);
}
h2 {
  color: var(lighterblue);
  margin: var(smallmargin) 0;
  font-size: calc(var(headersize) - 5px);
}
 
.partnerbadge {
  padding: var(smallmargin) 10px;
  border: var(borderstyle);
}

Try resizing the window to less than 400 pixels to see the mediaQuery change in action.

An initial implementation of CSS Variables has just landed in Firefox Nightly, which is currently at version 29 and after the February 3 merge, in Firefox Aurora. There are still a few parts of the specification which still need to be supported before the can go into the release cycle of Firefox Beta and Firefox. Cameron has the details on that:

The only part of the specification that has not yet been implemented is the CSSVariableMap part, which provides an object that behaves like an ECMAScript Map, with get, set and other methods, to get the values of variables on a CSSStyleDeclaration. Note however that you can still get at them in the DOM by using the getPropertyValue and setProperty methods, as long as you use the full property names such as "var-theme-colour-1".

The work for this feature was done in bug 773296, and my thanks to David Baron for doing the reviews there and to Emmanuele Bassi who did some initial work on the implementation. If you encounter any problems using the feature, please file a bug!

For now, have fun playing with CSS variables in Nightly and tell us about issues you find.

View full post on Mozilla Hacks – the Web developer blog

Tagged on: , ,

Leave a Reply