Future CSS: variables and calculations

Warning This article was written over six months ago, and may contain outdated information.

The W3C came under a lot of heavy flak last year for being slow, cumbersome, bureaucratic, etc; there were calls for a CSS2.2 (which I seconded) which rounded up all the existing implemented features, and for the CSS Working Group to be disbanded — a lighter, alternative task force, the CSS Eleven, was set up to try and make sense of it all. But as we’ve heard nothing from them in the six months since they were set up, I think the Eleven have found it’s not as easy as it looks.

The CSS WG has a new chair now, including the passionate Daniel Glazman, and it seems to be refocused and refreshed, which is good news; in his latest blog post, he says that the WG is aiming for RECs, RECs, RECs. If that’s the case, maybe we can start to get excited.

One thing that Glazman mentions the CSS WG are looking at is of particular interest to me as I was preparing to write a long post about them: variable constants. In short, assigning CSS values to variables so you can reuse them throughout your style sheets. For example:

@define { key_color: #f00; }

h1 {
color: $key_color;
border-bottom: 1px solid $key_color;

Note: The syntax used above is my own invention; the actual syntax has not been decided upon yet. This would allow you to use the same color for many different elements, but only have to update it once if a change was being made. You could use the same syntax for dimensions, content strings, borders, paddings… I’m sure you can imagine plenty of test cases.

This would also be useful when used in conjunction with the proposed calc() function, which would allow you to perform simple calculations. This would help us with that common problem of mixing percentage widths with fixed padding and margins; for example:

@define { box_padding: 100px; }

div {
padding: $box_padding;
width: calc(100% - $box_padding);

There are some dissenting voices that say that this complicates CSS and pushes it towards a programming language; I see their point, but for me it’s just too useful to disregard, and having done some thinking about this recently I don’t believe it needs to get any more complex than what you see here; plus, of course, you’d still be able to make great websites without using variables, as we do at the moment!

10 comments on
“Future CSS: variables and calculations”

  1. […] Peter Gasston posted an article summing up a recent post from Daniel Glazman talking about possible future extensions to CSS, and […]

  2. […] proposal for the use of constants will be […]

  3. Here is some real ways to make this work:


    Anonymous coward [April 4th, 2008, 11:19]

  4. […] CSS’in geleceği: Değişkenler ve Hesaplamalar. Bağlantı […]

  5. Please let this happen. Constants and something like calc which lets me mix percentage units with other units would answer two of my biggest complaints about CSS. For years I’ve been working on large, complex web apps, and those two features have been sorely lacking. This is great news!

  6. The calc() function might also provide a solution to CSS animation, as recently requested by Apple … imagine being able to do something in CSS like
    div {left: calc(animate-linear(2s) * 100px);}
    which would bring the left of the div from 0px to 100px over two seconds.
    Much neater than Apple’s proposal for full animation!

  7. […] http://www.broken-links.com/2008/04/01/future-css-variables-and-calculations/ You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  8. It is like a style sheet for your style sheet. I love/want it.

  9. […] mentioned CSS Variables previously, and now the proposal has been published and I agree with as authors Daniel Glazman and […]

  10. […] Future CSS: variables and calculations | Broken Links […]