CSS Variables

CSS Variables can define stylesheet-wide values identified by a token and usable in all CSS declarations. A recurring value, like colors or background-color in a stylesheet, will be way easier to update across the stylesheet if a developer has to modify at just one single place or value instead of modifying all style rules applying the property:value pair.

CSS Variables, once implemented, will allow authors to define variables that are reusable as property values anywhere in a stylesheet and queryable/modifiable through an extension of the CSS Object Model.

Majority of the Web Designers and Developers has been requesting a way of defining CSS Variables since its early release. Nonetheless, some are of the opinion that it is not needed and will complicate matters.

Why variables in CSS?

Many a times, any CSS developer would have felt that s/he is using repeated property values in a CSS stylesheet, for instance to make sure semantically different elements in a web page have a similar rendering and user experience. CSS does offer a way to group styles using groups of selectors, but we tend to neglect it more because of the fact that it’s difficult to maintain, decreases readability and of course semantically distinct elements rarely share all style rules.

CSS Variables Note names David Hyatt of Apple as one of the author, the other is Daniel Glazman of Disruptive Innovations. We might see a early implementation of CSS Variables in a future version of Safari!

The CSS Variables Definition

CSS Variables should be defined in an @variables at-rule. An @variable at-rule is composed of the ‘@’ character followed by the ‘variables’ identifier, optional target media types (separated by commas) and a block of variable definitions. The definition of a variable must precede all style rules contained or imported in the stylesheet.

Each variable definition contained in the block of variables is a declaration composed as CSS style declarations of an identifier, a semi-colon and one value. As in CSS declarations, optional whitespaces and comments are allowed anywhere.

The definition of variables crosses @import boundaries. That means that the definition of a variable contained in a Stylesheet B imported from a Stylesheet A applies to all rules directly contained or imported into Stylesheet A.

Usage Example

Using the value of a variable as the value or one of the values of a property in a CSS declaration should be achieved using the new functional notation var(). This function takes only one argument being the identifier being the name of the variable. The declaration becomes invalid if the variable does not exist.

The above shows that we’ve styled the div#post div.entry with color, background-color, padding and margin which have been defined earlier in @variables for screen medium by default and we can override the same same for “print” medium through the @variables print.

More advanced details of CSS Variables — Grammar, Interfaces like CSSRule, CSSVariablesRule, CSSVariablesDeclaration, CSSValue, CSSVariable, etc — are discussed in details at the CSS Variables Note.

Ok, so what if I want to start using CSS Variables now?

There are many hacked solutions available at the moment, though restricted to PHP environment, to inject variables inside your CSS. Some of them like CSS-PHP Variable and Variables in your CSS via PHP treats CSS like PHP and thus able to inject PHP variables rendering them inside your CSS codes.

The near perfect way in the line of the above CSS Variables initiative is luckily available at Shaun Inman’s website — CSS Server-side Constants.

CSS-SSC

CSS-SSV hijacks the syntax of @rules to isolate variable definitions. Variable names and their values are defined like any other CSS property. The goal was to make this as easy-to-use and native-looking as possible:

This is how variables are embeded in the CSS:

Here is an example from Shaun’s own CSS-SSV:

If you wish to try out Shaun’s method, it is available through his CSS-SSV Page. Otherwise, let’s hope that CSS Variables are implemented quick enough so we can reap the benefit, optimize and save our time writing Stylesheets.

  • I have been after vars in CSS for some time for use with Flex.

    It would make it so much easier to create a palette of colors (or even a seperate stylesheet for the color palette) that are then re-used throughout the stylesheet and applied to component styles, instead of having to change the color value throughout the stylesheet.

  • I have been after vars in CSS for some time for use with Flex.

    It would make it so much easier to create a palette of colors (or even a seperate stylesheet for the color palette) that are then re-used throughout the stylesheet and applied to component styles, instead of having to change the color value throughout the stylesheet.

  • Chloe Baby

    Really cool stuff.
    I never knew you could use variables in CSS.
    I don't know because i haven't tested, but why am i inclined to think that IE (All versions) as no support for this, oh, and maybe IE 8 has some support, but only if you include a specific IE 8 stylesheet with endless tweaking 😉

    I hate IE.

  • Chloe Baby

    Really cool stuff.
    I never knew you could use variables in CSS.
    I don't know because i haven't tested, but why am i inclined to think that IE (All versions) as no support for this, oh, and maybe IE 8 has some support, but only if you include a specific IE 8 stylesheet with endless tweaking 😉

    I hate IE.

  • why can't microsoft make their bloody IE compatible with the latest css standards. Need to use so many hacks just to make one page cross browser compliant ! solving simple problems like these can help developers a long way in easing their workload... man... IE really sucks !

  • why can't microsoft make their bloody IE compatible with the latest css standards. Need to use so many hacks just to make one page cross browser compliant ! solving simple problems like these can help developers a long way in easing their workload... man... IE really sucks !

  • I have read several arguments for and against variables now and I understand why some are hesitant introduce another layer of abstraction. CSS is supposed to be for designers and HTML, PHP, etc. for the programmer.

    One case that I think is very strongly in favor of variables is with colors. You cannot even assign a color once for all elements doing it the ugly way because sometimes you are defining background, font, border, etc.

    I would support variables for colors only, and I think that would be much more widely accepted.

  • I have read several arguments for and against variables now and I understand why some are hesitant introduce another layer of abstraction. CSS is supposed to be for designers and HTML, PHP, etc. for the programmer.

    One case that I think is very strongly in favor of variables is with colors. You cannot even assign a color once for all elements doing it the ugly way because sometimes you are defining background, font, border, etc.

    I would support variables for colors only, and I think that would be much more widely accepted.

  • Venkateshwar

    I tried using css variables on IE 6.0 and firefox 2.0 (Mozilla/5.0) but I could get them affected.

    My code is:

    @varialbles
    {
    BackColor: gray;
    }

    .TestClass
    {
    border:1px solid red;
    background-color: var(BackColor);
    color: var(ForeColor); /* ForeColor is defined in test.css */
    }

    Test Css Variables

    test.css
    --------

    @variables
    {
    ForeColor: blue;
    }

    Only border property is applying but no other.

    Please suggest me how to get them work
    Thank You

  • Venkateshwar

    I tried using css variables on IE 6.0 and firefox 2.0 (Mozilla/5.0) but I could get them affected.

    My code is:

    @varialbles
    {
    BackColor: gray;
    }

    .TestClass
    {
    border:1px solid red;
    background-color: var(BackColor);
    color: var(ForeColor); /* ForeColor is defined in test.css */
    }

    Test Css Variables

    test.css
    --------

    @variables
    {
    ForeColor: blue;
    }

    Only border property is applying but no other.

    Please suggest me how to get them work
    Thank You

  • Pingback: Variablen in CSS: Werkzeuge und Lösungsansätze | Dr. Web Magazin()

  • Cheryl

    I Wish! That would improve the Web World so much! Great ideas!

  • Cheryl

    I Wish! That would improve the Web World so much! Great ideas!

  • Pingback: CSS Wishlist: New Ideas, Debates and Solutions | CSS | Smashing Magazine()

  • Pingback: CSS Wishlist: New Ideas, Debates and Solutions « Tech7.Net()

  • I wish there was more support for this from older Browsers.

  • I wish there was more support for this from older Browsers.

  • Pingback: AMB Album » CSS Wishlist: New Ideas, Debates and Solutions()

  • Pingback: CSS Wishlist: New Ideas, Debates and Solutions · Variedades e Bookmarks()

  • Pingback: CSS Wishlist: New Ideas, Debates and Solutions | Search Engine Optimisation()

  • Pingback: CSS Wishlist: New Ideas, Debates and Solutions | WEBDESIGN FAN()

  • Hyunjungsoh

    Yay! This has been really helpful! 🙂

  • CSS Variables are a must have.

  • Hittudeep

    hi.. this is not working...
     

    • Hmmm, this is from 2008. By now, I'd suggest using something else totally. Why not look at the likes of - Sass, Less or Stylus.