W3C home > Mailing lists > Public > www-style@w3.org > February 2011

Re: CSS Variables

From: Alan Gresley <alan@css-class.com>
Date: Mon, 07 Feb 2011 03:43:25 +1100
Message-ID: <4D4ECFAD.1000209@css-class.com>
To: Christof Höke <csad7@t-online.de>
CC: "Tab Atkins Jr." <jackalmage@gmail.com>, www-style list <www-style@w3.org>
On 6/02/2011 10:37 PM, Christof Höke wrote:
> On 06.02.2011 01:34, Tab Atkins Jr. wrote:

>>  The syntax isn't complex. What we're going with so far is this:
>>
>>  @var $foo red;
>>  bar {
>>  color: $foo;
>>  }


Agree with glazou regarding the $.


> ignoring the question if variables should be included in browsers, just
> regarding that syntax:
> What is wrong with the syntax proposed at
> http://disruptive-innovations.com/zoo/cssvariables/ you referred to?
>
> @variables {
> foo: red
> }
> bar {
> color: var(foo)
> background: var(foo) url(x.gif) no-repeat;
> }
[snip]
> Chris


Firstly 'foo: red' is the same syntax for <property>: <value(s)>. 
Secondly you could have the following that is more robust.


@variables theme1 {
     color: red;
     background: blue url(y.gif) repeat;
     }
bar {
     color: var(theme1) yellow;
     background: var(theme1) green url(x.gif) no-repeat;
     }


And the syntax is similar or consistent to other @rules like @media, 
@page or @keyframes.


Regarding color: $foo;. How is this be parsed in a comma delimited string?


I haven't tested in Chrome but the following chokes in all browsers that 
I can test.


bar {
     background: $foo, url(z.gif);
     }



But the following also chokes in all browsers that I can test (except 
IE5.5).


bar {
     background: var(theme2), url(z.gif);
     }


Since both are unrecognized and causes the whole comma delimited string 
to be dropped, I do suggest that whatever is decided is decided soon.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
Received on Sunday, 6 February 2011 16:45:03 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:37 GMT