Re: [css-variables] CSSVariablesDeclaration interface definition

Tab Atkins wrote:

> > In fact, I don't quite see the point of this interface, the sole
> > purpose seems to be to prepend "var-" on to the property name
> > before calling getProperty/setProperty/removeProperty.  Is that
> > really needed?
> 
> If that was all it did, it would still be convenient - normally,
> properties are exposed on CSSStyleDeclaration as properties, using a
> dashes-to-camelcase conversion.  This obviously doesn't work for
> custom properties, because it would map both "var-foo" and "var-Foo"
> to "style.varFoo".  You'd be forced to only use the
> getProperty/setProperty methods, which *nobody* uses in practice. 
> The CSSVariablesDeclaration interface fixes this - as long as the
> variable name matches JS property rules, you can use it directly,
> without conversion or ambiguity.
> 
> It does more, though - it exposes only the custom properties that
> are actually set.  This is different from CSSStyleDeclaration's
> normal behavior, which is to expose every property.  This makes it
> convenient for things like iterating over all the custom properties,
> which I think will be useful for JS that is using custom properties
> as a data channel for polyfills or the like.

Ah, I think I get it now.  So the following examples below would
be valid/invalid as described:

  div {
    var-foo: 16px;
    var-Bar: red;
    var-foo-bar: 50%;
  }

  el.style.var.foo = "30px";       // valid
  el.style.var.Bar = "blue";       // valid
  el.style.varFoo = "50%";         // invalid - camel-cased var props not supported
  el.style.varfoo = "16pt";        // invalid - as above, irrespective of casing
  el.style.var.foo-bar = "red";    // invalid - not valid JS ident syntax
  el.style.var["foo-bar"] = "red"; // valid

Are these variations correct?

I think it would be really helpful to have a section 4.3 with examples
of this sort to illustrate common usage patterns.

John

Received on Thursday, 28 February 2013 01:52:12 UTC