Re: Better Variables through Custom Properties

On Mon, Oct 24, 2011 at 7:42 PM, Boris Zbarsky <bzbarsky@mit.edu> wrote:
> One important thing to note there there is that we currently do not have
> circular dependencies between properties.  There will be nothing preventing
> that in this new setup; we'll need to specify how the cycle is broken.

The current Variables draft, with the @var syntax, already allows for
circular dependencies and handles them.  All the variable declarations
that are part of the cycle become invalid variables.  They still
define variables, just with guaranteed-invalid values:
<http://dev.w3.org/csswg/css-variables/#using-invalid-variables>.  I
believe I can reuse the same mechanism here.


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 );
}

(I was recently asked about this very use-case, for an example where
you can't rely on stacking margins, because it has the wrong visual
effect.  The only current approach for it is to build up a counter
value of the approximate width you want, deploy it with the counters()
function, and make it invisible.)

You can imagine many other useful effects, like a color lightening or
darkening (or hue-shifting!) as you descend the DOM, or a transform
list being built upon gradually for a stacked scale or multiple
rotations.

This doesn't produce any circularity problems, either, so it's a
fairly easy addition mentally.  (I still want the circularity-causing
ability to refer to variables of the same level, though.)

~TJ

Received on Tuesday, 25 October 2011 06:59:08 UTC