Re: WebKit now supports CSS Variables

> But the problem of your spec is, that it only allows the @variables-block 
> to appear before any @imports, so an imported corporateVars.css would 
> always override any "locally" defined variables, this might be 
> undesireable. So I suggest that @variables and @imports should be allowed 
> to appear in any order, so that a stylesheet could override some imported 
> variables locally.
>
> Also, what happens when A imports B and C, and C uses a variable thats 
> defined in B?
>

Good point.

The normal way it should be, if we reuse known CSS Priority types :
    Each variable is globally defined and the last variable defined in the 
normal order is used accross all stylesheets.

[Exception] :
    But if a variable is defined localy with the same name, this variable 
overrides the other for the stylesheet and all imports in it.

_________________________

So, let's go for a sample :

    main.css
    <<
        @variables { a: none; c: none; }
        @imports url('sub1.css');
        @imports url('sub2.css');
        s1 { display: var(a); }
        s2 { display: var(b); }
    >>

    sub1.css
    <<
        @variables { a: block; b: block; }
        s3 { display: var(a); }
        s4 { display: var(b); }
    >>

    sub2.css
    <<
        @variables { b: none; }
        s5 { display: var(a); }
        s6 { display: var(c); }
    >>

_________________________

    s1 :
        "a" defined in main.css
            ==> {a:none} is used
    s2 :
        "b" is not defined in main.css
        the stylesheet that come at last in source order is sub2.css
            "b" is defined in sub2.css
            ==> {b:none} is used
    s3 :
        "a" is defined in "sub1.css"
        ==> {a:block} is used
    s4 :
        "b" is defined in "sub1.css"
        ==> {b:block} is used
    s5 :
        "a" is not defined in sub2.css
        this stylesheet that come at last in source order is sub2.css
            "a" is not defined in sub2.css
            sub1.css is the stylesheet before sub2.css in source order
                "a" is defined in sub1.css
                ==> {a:block} is used
    s6 :
        "c" is not defined in sub2.css
        this stylesheet that come at last in source order is sub2.css
            "c" is not defined in sub2.css
            sub1.css is the stylesheet before sub2.css in source order
                "c" is not defined in sub1.css
                main.css is the stylesheet before sub1.css in source order
                    "c" is defined in main.css
                    ==> {c:none} is used

___________________________

The same situation should be if we got :

    <link href="main.css" rel="stylesheet" />
    <link href="sub1.css" rel="stylesheet" />
    <link href="sub2.css" rel="stylesheet" />

___________________________

Note that developers should use strong name for the variables so conflict 
between sheets are not possible.

Fremy

Received on Tuesday, 24 June 2008 15:40:04 UTC