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, cum­ber­some, bureau­crat­ic, etc; there were calls for a CSS2.2 (which I sec­ond­ed) which round­ed up all the exist­ing imple­ment­ed fea­tures, and for the CSS Work­ing Group to be dis­band­ed — a lighter, alter­na­tive task force, the CSS Eleven, was set up to try and make sense of it all. But as we’ve heard noth­ing 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, includ­ing the pas­sion­ate Daniel Glaz­man, and it seems to be refo­cused and refreshed, which is good news; in his lat­est blog post, he says that the WG is aim­ing for RECs, RECs, RECs. If that’s the case, maybe we can start to get excited.

One thing that Glaz­man men­tions the CSS WG are look­ing at is of par­tic­u­lar inter­est to me as I was prepar­ing to write a long post about them: vari­able con­stants. In short, assign­ing CSS val­ues to vari­ables so you can reuse them through­out your style sheets. For example:

@define { key_color: #f00; }

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

Note: The syn­tax used above is my own inven­tion; the actu­al syn­tax has not been decid­ed upon yet. This would allow you to use the same col­or for many dif­fer­ent ele­ments, but only have to update it once if a change was being made. You could use the same syn­tax for dimen­sions, con­tent strings, bor­ders, paddings… I’m sure you can imag­ine plen­ty of test cases.

This would also be use­ful when used in con­junc­tion with the pro­posed calc() func­tion, which would allow you to per­form sim­ple cal­cu­la­tions. This would help us with that com­mon prob­lem of mix­ing per­cent­age widths with fixed padding and mar­gins; for example:

@define { box_padding: 100px; }

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

There are some dis­sent­ing voic­es that say that this com­pli­cates CSS and push­es it towards a pro­gram­ming lan­guage; I see their point, but for me it’s just too use­ful to dis­re­gard, and hav­ing done some think­ing about this recent­ly I don’t believe it needs to get any more com­plex than what you see here; plus, of course, you’d still be able to make great web­sites with­out using vari­ables, as we do at the moment!

10 comments on
“Future CSS: variables and calculations”

  1. […] Peter Gasston post­ed an arti­cle sum­ming up a recent post from Daniel Glaz­man talk­ing about pos­si­ble future exten­sions to CSS, and […]

  2. […] pro­pos­al for the use of con­stants will be […]

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

    http://icant.co.uk/articles/cssconstants/

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

  4. […] CSS’in gele­ceği: Değişken­ler ve Hesapla­malar. Bağlantı […]

  5. Please let this hap­pen. Con­stants and some­thing like calc which lets me mix per­cent­age units with oth­er units would answer two of my biggest com­plaints about CSS. For years I’ve been work­ing on large, com­plex web apps, and those two fea­tures have been sore­ly lack­ing. This is great news!

  6. The calc() func­tion might also pro­vide a solu­tion to CSS ani­ma­tion, as recent­ly request­ed by Apple … imag­ine being able to do some­thing 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 pro­pos­al for full animation!

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

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

  9. […] men­tioned CSS Vari­ables pre­vi­ous­ly, and now the pro­pos­al has been pub­lished and I agree with as authors Daniel Glaz­man and […]

  10. […] Future CSS: vari­ables and cal­cu­la­tions | Bro­ken Links […]