W3C home > Mailing lists > Public > www-style@w3.org > June 2008

Re: WebKit now supports CSS Variables

From: Francois Remy <fremycompany_pub@yahoo.fr>
Date: Tue, 24 Jun 2008 14:25:11 +0200
Message-ID: <57266DE6A19C4212BB5D91AEB5273AAD@FremyCompany1>
To: HåkonWium Lie <howcome@opera.com>, "CSS 3 W3C Group" <www-style@w3.org>

I'm not sure this idea is good.

You're right when you say there's some contradiction in the current draft 
(it what you say is true, I didn't verrify it).
But I think variables must be shared through the whole document.

A variable should also be able to have different values depending on the 
media that's currently applied.
If no media is declared for a variable, it should be available in all 
media's type.

Why ?
So, we can have a "variable definition" style sheet, where we put some 
colors and images we often use.
After, we can use it in all declaration's type (style attribute, other 
stylesheets, ...)

Here a some ideas :


    red.css (disabled) :
        @variables { bgColor: red; borderColor: lightred; }

    green.css (disabled) :
        @variables { bgColor: green; borderColor: yellowgreen; }

    blue.css :
        @variables { bgColor: blue; borderColor: royalblue; }

    main.css :
        selector {
            background-color: var(bgColor);
            border-color: var(borderColor);
            border-width: 3px;
            border-style: outset;

    After that we can enable/disable "ressources" stylesheet to apply some 
new theme to the page.


    normal.css :
        @variables { print-only: none; }
        selector { display: var(print-only); }

    onprint.css (media=print) :
        @variables print {
            print-only: block;

    This need no javascript and is appliable to the whole document easily



From: "HåkonWium Lie" <howcome@opera.com>
Sent: Tuesday, June 24, 2008 1:49 PM
To: "David Hyatt" <hyatt@apple.com>
Cc: "www-style list" <www-style@w3.org>
Subject: Re: WebKit now supports CSS Variables

> Also sprach David Hyatt:
> > http://disruptive-innovations.com/zoo/cssvariables/
> Variables in CSS has often been requested by authors and perhaps it's
> time to add this to the language. There are are concerns, however,
> about the scope of the variables. The current proposal says:
>  The definition of variables crosses @import boundaries.
> If they cross @import boundaries, why should they not cross from one
> linked style sheet to another?
> Still, it may be simpler and better not to allow any such crossing.
> Take for instance this example:
>  style sheet 1: @variable { X: 10px }
>  style sheet 2: @variable { X: none }
>  style sheet 3: div { width: var(X) }
> Style sheet numbering is in document order. If the
> fininshed-loading-order is: 3, 1, 2, the width declaration would first
> be invalid ("The declaration becomes invalid if the variable does not
> exist") then valid with 10px, and then invalid again when X is none.
> I'd prefer to throw away invalid declarations at parse time, and not
> have to keep them around. Therefore, I suggest that we add text
> similar to the @namespace specification:
>  The namespace prefix is declared only within the style sheet in
>  which its @namespace rule appears. It is not declared in any style
>  sheets importing or imported by that style sheet, nor in any other
>  style sheets applying to the document.
>  http://www.w3.org/TR/2008/CR-css3-namespace-20080523/
> Cheers,
> -h&kon
>              Håkon Wium Lie                          CTO °þe®ª
> howcome@opera.com                  http://people.opera.com/howcome
Received on Tuesday, 24 June 2008 12:25:56 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:37 UTC