- From: Rafał Pietrak <rafal@ztk-rp.eu>
- Date: Wed, 04 Jun 2014 13:44:08 +0200
- To: www-style@w3.org
- Message-ID: <538F0688.6060704@ztk-rp.eu>
Hi,
I've just run onto a draft spec of css variables extention, and I'd like
to make a small commment on that subject.
1. although the need for such feature as css-variable is very real.
2. I don't think that the proposed syntax/semantics is the best.
In general, css syntax is build around "tuplets": <selectors>
<open-brace>+<features/attributes defined>+<closing-brace>, e.g: "h1
{color:red}"
In additional to that, extremaly succesfull and popular jQuery library
does capitalize on such "pairing", e.g:
selectors/...do-something-on-all-selected-nodes.
I think, that it would be in the spirit of css, it variables were
defined just along those lines ... like by pondering a phrase:
"select-a-variable".
So I would rather propose, that:
1. one special character would be reserved to indicate "a variable
entity", that charachter could be a "$" sign, to remind /bin/sh or perl;
or something else.
2. "selector" defining a variable would be: "$name-of-variable {
some-definition }"
3. the use of such variable would be: "some-selector { some-feature:
$name-of-a-variable}" or "some-selector { $name-of-a-variable }".
4. semantics of such variables would be: change "some-feature" (above)
on the selected nodes, according to "content" of a variable.
Example:
$my-style, h1, $my-other-style { color: green; font-size: 120%}
strong, $my-style { font-weight: bold}
table tfoot a {font: $my-style}
div.help { $my-style; border:1pt }
--end-of-example
that way, font-size of an "anchor" in the table footer would be 120%
larger then normal, *and* its font-weight would be bold, *similarly* to
"h1" *and* "strong" in other parts of the document.
Meaning: a "$variable" *gathers* all the definitions it "selects".
In the last line of the example abore, provision is given to "dump the
entire content" of a variable, to style some document part acordingly
it... plus optional extras, in this case border style.
IMHO, such css-variables are simpler to "define and comprehend", then
the proposed "--*" / "var()", and do not open gates to "programming",
e.g. conditional behavior other then "cascading". The original proposal
does allow for "if (x > 5) this.width = 10", which I think is simply wrong.
Regards,
-R
Received on Wednesday, 4 June 2014 11:44:55 UTC