Re: CSS Variables

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 UTC