By
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);
}
Header on page
Subheader on page
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);
}
Header on page
Subheader on page
Header on page
Subheader on page
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
CSSVariableMappart, which provides an object that behaves like an ECMAScriptMap, withget,setand other methods, to get the values of variables on aCSSStyleDeclaration. Note however that you can still get at them in the DOM by using thegetPropertyValueandsetPropertymethods, 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.
About Chris Heilmann
Evangelist for HTML5 and open web. Let's fix this!
46 comments