Re: [CSS Variables] WebKit now supports variable declaration blocks

> From: "L. David Baron" <dbaron@dbaron.org>
>
> On Monday 2008-07-28 17:56 -0500, David Hyatt wrote:
>>
>> In the next WebKit nightly you will be able to try out CSS variables
>> whose values are declarations.  Here is what the syntax looks like:
>>
>> @-webkit-variables {
>>    simpleVariable: 5px;
>>    complexVariable {
>>        width: 5em;
>>        height: 5em;
>>    }
>> }
>>
>> div {
>>     background-color: green;
>>     -webkit-var(complexVariable);
>>     color: white;
>> }
>
> So are these variables intended to be mutable later via script, or
> intended to be constants?  (If the latter, should they really be
> called variables?)

Yes, they are. Because if they are constant, how to support the disabling of 
a stylesheet that define a variable ?
And what about two variable declaration on the same name ? This problem was 
debated and it was shown that a constant is more difficult to implements 
than a normal variable.

But for complex variables, I suggest the use of a "extends" property.

@define {
    bigText {
        font-size: 150%
        font-weight: bolder;
        color: black !important;
    };
}

h1.bigText {
    font-size: 15pt;
    extends: $bigText;
    color: blue;
}

Computed values of a "h1.bigText" with no style : {
    font-size: 15pt; /* the h1.bigText rule have more importance than the 
extended one */
    font-weight: bolder; /* this is the only one rule */
    color: black; /* the rule that have !important have more important than 
the others */
}

I've only one question :
Will that be allowed or not :

@define {
    var1 {
        color: blue;
    };
    var2 {
        extends: $var1;
        color: red;
    };
}

h1 {
    extends: $var2;
}

If it's allowed, what should be the result for H1 ?
I propose 'red' because blue became redefined in var2 as they was if it was 
another style rule.

>
> If they're supposed to be variables, it seems like it's impossible
> to get the following combination to work correctly:
> * cascading order
> * CSS object model, which only allows storing one value per
>   property per declaration block
> * dynamic changes to complex variables.
>
> In particular, if the complex variable can be changed later, I'm not
> sure how to reflect in the CSS object model that there's a
> declaration block a declaration like:
>
> @define {
>  complexVariable {
>    color: blue;
>  }
> }
>
> p { var(complexVariable); color: green; }
> q { color: purple; var(complexVariable); }
>
> such that p elements are green, q elements are blue, but if we
> dynamically change complexVariable to no longer declare the color
> property, q elements would change to purple.  (And consider
> especially dynamic mutation of sheet.cssRules[i].style.color on the
> p and q rules, which is already permitted.)
>
> Are these complex variables intended to be mutable, or are they
> really constants?

I suppose there are varibles. But if we follow the model I proposed before, 
it should works, no ?

>
>> As I stated in a previous post, WebKit also currently supports the
>> double equals syntax and the dollar sign syntax for referencing
>> variables, so =complexVariable= and $complexVariable also work.
>
> This seems a bit dangerous in case this syntax is not chosen for
> variables, but is then used in CSS for something else later on.

I agree with you. But it's for test-only and it's only available in alpha 
builds of WebKit.

>
> -David
>
> -- 
> L. David Baron                                 http://dbaron.org/
> Mozilla Corporation                       http://www.mozilla.com/
>

Received on Friday, 22 August 2008 17:17:19 UTC