[css-variables] Initial value of variables

The initial value of a variable is always invalid, regardless of how
you try to use it - you need to explicitly provide a variable property
to get a valid variable.  Thus, you don't actually *need* an initial
value, since it will never be used.  However, operating under the
assumption that I needed to provide *something*, I've defined the
initial value to be the keyword "invalid", except it's also always
invalid.

Divya recently reported that she found this boggling.  I agree it's
not great.  Here's an example from the spec:

<div>
  <p>Sample text</p>
</div>
<style>
p { var-foo: invalid; }
div,p { font-family: $foo; }
</style>

In this example, the "foo" variable is an invalid variable at the time
the DIV element references it, because the ‘var-foo’ property still
has its initial value. This causes the DIV's ‘font-family’ property to
compute to the initial value for ‘font-family’.

On the other hand, the P element defines an explicit value for the
‘var-foo’ property. Its ‘font-family’ property thus references a font
named "invalid".

In a similar vein, it means that assigning a property's value to
itself via JS, which should be a no-op, flips the variable to being
valid with the value "invalid":

el.style.varFoo = el.style.varFoo


Is it acceptable to instead just define that the initial value of a
var property is nothing?  That is, if you ask for it to be serialized,
you'll get "" out of JS.  You can't actually use this value, since the
variable is guaranteed to be invalid, and you can't actually *create*
this value manually either, since the <value> production has a + in
it.  This would avoid the weirdness discussed above.

~TJ

Received on Thursday, 31 May 2012 01:13:00 UTC