CSS Variables proposal is released

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

I mentioned CSS Variables previously, and now the proposal has been published and I agree with authors Daniel Glazman and David Hyatt when they say:

We expect CSS Variables to receive a very positive feedback from both the Web authors’ community and browser vendors.

The syntax will be to declare the variables using the @variables at-rule, then calling them with the var() function:

@variables { keyColor: #f00; }
h1 { color: var(keyColor); }

That’s it. Beautifully simple, and I really, really look forward to seeing it implemented.

7 comments on
“CSS Variables proposal is released”

  1. […] first heard the news from Peter’s blog over at Broken Links and thought it would be of great interested to most of the readers […]

  2. It is nice, but not required for most websites. Most of the times a simple Find/Replace action in the texteditor is enough.

    I would enjoy it when browsers start to support the “CSS3 calc function”:http://www.w3.org/TR/css3-values/#calc .

    (By the way, your preview function breaks when I use an ampersand.)

  3. Ah, and Textile seems to break when I use a hash in the URL of a link…

  4. I would have preferred something simpler/easier like $var_name – but then again, something is better than nothing.

  5. @ Arjan: It’s true that a search and replace would be useful in most cases, but not all; I think this is a very simple solution to cover all eventualities. And thanks for the info about the previews & Textile; I’ll look into it.

    @ Binny: Using a $ would be the better solution for anyone used to using programming languages, but the use of enclosing brackets is more consistent when using functions in CSS (src(), calc(), etc).

  6. I’m trying this in the latest Safari and Firefox browsers, but it seems to not work. Anyone out there who is already using CSS variables? Has it been implemented on those browsers yet?

    headhighguy [August 23rd, 2009, 23:55]

  7. This was only a proposal, and doesn’t seem to have been met with widespread approval yet. I wouldn’t expect to see it implemented anywhere in the near future.