W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: Better Variables through Custom Properties

From: Roland Steiner <rolandsteiner@google.com>
Date: Tue, 25 Oct 2011 09:45:49 -0700
Message-ID: <CACFPSpgPFWVErCcskROvy1F1S2VkYd7aeV=f1qOkYtJFqimtUA@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Boris Zbarsky <bzbarsky@mit.edu>, www-style@w3.org
On Mon, Oct 24, 2011 at 23:30, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> Another thought occurs to me.  Since I already want to allow variables
> referring to other variables, for use in various functions and
> whatnot, it seems like it would be incredibly useful to also allow you
> to invoke the *inherited* value of a variable.  This would allow for
> some *really* useful effects, such as building up an increasing value
> as you descend the DOM:
>
> :root {
>  data-indent: 10px;
> }
> ul {
>  data-indent: calc( parent-data(indent) + 10px );
> }
>

This is actually the default I envisioned and described for apply(). IMHO
it's more general than using the current value: it avoids circular
dependencies, allows for easy swapping of values without "helper
properties", etc.

The downside that one couldn't use the current value inside the same rule
block isn't a big drawback IMHO. Rather than

:root {
    data-foo: red;
    data-bar: linear-gradient(transparent, data(foo));
}


you'd have to duplicate 'red' in both lines, or use another,
previously-defined variable. OTOH, by using the inherited variable, one can
do:

div {
    data-foo: data(data-bar);
    data-bar: data(data-foo);
}


or even allow this to be used with non-'data' properties without causing
dependency or problems with layout:

[inverted] {
    background-color: data(color);
    color: data(background-color);
}



- Roland
Received on Tuesday, 25 October 2011 16:46:35 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT