Getting CSS Variables today

As far as I know, right now (i.e. August 2012), the only browsers with CSS3 Variables are Safari and Chrome. Until recently the feature was hidden behind a compile time flag, but recently it's turned up in Chrome's flags. To turn it on, grab a dev version of Chrome (or Chrome Canary), and go to chrome://flags, enable it (and some other cool things like Shadow DOM, CSS Regions, PeerConnection to play with later!) and restart the browser.

Once you've done that, then the box below should be blue...

Right, then what now?

First you should know that this spec is still a Working Draft, and has already changed since it's first release. This means that what works now, might not work in a few months, so this is for fun and education, rather than for building your hot new site on.

In short, this spec allows you to define variables to use in your CSS. A quick example is probably the best.

Mark up

HTML

  :root {
    -webkit-var-beautifulColor: rgba(255,40,100, 0.8);
    -moz-var-beautifulColor: rgba(255,40,100, 0.8);
    -ms-var-beautifulColor: rgba(255,40,100, 0.8);
    -o-var-beautifulColor: rgba(255,40,100, 0.8);
    var-beautifulColor: rgba(255,40,100, 0.8);
  }
  .example1 h1 {
    color: -webkit-var(beautifulColor);
    color: -moz-var(beautifulColor);
    color: -ms-var(beautifulColor);
    color: -o-var(beautifulColor);
    color: var(beautifulColor);
  }

<div class='example1'>
  <h1>This is is styled with a color defined as a variable.</h1>
</div>

This should be pretty clear. The :root rule set is used if you want globally available variables, this is just because CSS doesn't support 'loose' properties, so this ensures things don't break in parsers that aren't aware of variables.

Right now, the code is pretty horrible, as the vendor prefixes make the code pretty huge. Of course, by the time you have gzipped things, that's not really an issue. In this case, that code weighs in at 402 bytes, which gzips to 124 bytes, a 30% reduction. As a comparison, the same code without the prefixes starts at 94 bytes, and gzips to 83, so while there is an increase in size, it's not as big as you'd imagine. In a much larger file, that would be an even smaller difference.

Right now, it's not supported, but sooner or later the plan is that you will be able to use variables like color: $beautifulColor, which will be more in line with what you are used to seeing.

Scope

Variable scope works pretty much as you'd imagine, though this lets you do some clever things. Here's an example straight from the spec:

/* Prefixes omitted for clarity */
:root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: $color; }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
  While I got red set directly on me!
  <p>I'm red too, because of inheritance!</p>
</div>

Here the variables are all defined up front, then applied using the * selector. Pretty nifty.

Other awesomeness

Variables can be used with calc to do some pretty awesome things. At the time of writing, this doesn't work, but hopefully it will soon (edit - works now!):

Mark up

CSS

/* Prefixes omitted for clarity */
#calcTest {
  var-width: 100px;
}
#calcTest div p {
  padding-top: 10px;
}
#calcTest div {
  outline:1px black solid;
  height:40px;
  text-align: center;
  width: calc(var(width) * 1);
}
#calcTest div:nth-child(2) {
  width: calc(var(width) * 2);
}
#calcTest div:nth-child(3) {
  width: calc(var(width) * 3);
}

It's easy to see how this functionality could be useful when allowing users to customise colors on a profile, or changing colors on different parts of a large site without having to duplicate large sections of CSS. This could also be used to define different grid sizes that are selected using media queries.

If you are impatient and want to use something like this today, you might want to try SASS. I wrote about how to get started with that a while back: SASS is awesome!. If you'd like something that is awesome and works today, then the main part of this site is a tutorial on CSS transitions, transforms and animation, so feel free to check that out too.

As with all the code on this site, I've put the style elements right next to the code, so view the source and copy and paste to get the working demos!

Comments/Questions?

Please add any questions/corrections/extra info below. Please be courteous to other users.

blog comments powered by Disqus