W3C home > Mailing lists > Public > www-style@w3.org > April 2014

[css-variables] feedback

From: Reg Charney <reg.charney@entrebahn.com>
Date: Sat, 29 Mar 2014 22:11:19 +0000
Message-ID: <CAHV_UbhD1MkuviOo6cFuEyfgVtxfWVw_wvue1v7eNRaaPbG_bg@mail.gmail.com> (sfid-20140329_221125_578848_2773A736)
To: www-style@w3.org
It may be too late to comment on this proposal, but I believe that the
syntax for the proposal is more complicated than needed. Below, I propose a
simpler and more consistent approach.

1) The current proposal is confusing because of the "name change"
requirement. The following simple example shows:

    :root { var-h1color: #06c; var-h2color: #006; }
    h1 { color: var(h1color); }
    h2 { color: var(h2color); }

1a) Why is there a necessity to change a name from its declaration to its
1b) Why refer to :root? Is it a "magic" pseudo-class/element or does this
imply the variables have global scope?

2) An alternative syntax using the proposed :var pseudo variable eliminates
both issues 1a and 1b

    :var { h1color: #06c; h2color: #006; }
    h1 { color: h1color; }
    h2 { color: h2color; }

I believe that this new syntax makes things simpler and clearer in all

3) Evaluating a variable using the var() function is also unnecessary. The
default value can be defined using the declaration notation. In the example
below, if h1Color is not defined, then the default value "blue" is used:

    h1 { color: h1Color | blue; }

Note that this is consistent with allowing expressions in value fields.

4) Any time a property does not conform to the standard list of properties
for a CSS element, the unknown name is looked up in the stack of variable
names. If found, the value is substituted; else the value is treated as
null and processing continues as it does now, including ignoring the issue
or reporting an error.

5) It is not clear from the current proposal if CSS variables have scope. I
suggest they can have scope using the :var pseudo class/element. Thus,

    #foo:var { h1color: #06c; h2color: #006; }
    h1 { color: h1color | blue; }
    h2 { color: h2color | red; }

defines the variables h1color and h2color only in the range defined by the
element with id=foo. If the elements h1 and h2 are used outside the range
of #foo, then the default values, blue and red respectively, are used.

If no scope is defined, the scope is assumed to be global. So, in point 2),
the variables h1Color and h2Color are global in scope.

If there is any interest in my comments, I would be pleased to create a
formal proposal. Thank you,

Reg Charney
E: reg.charney@entrebahn.com
Received on Thursday, 24 April 2014 15:47:32 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:42 UTC