W3C home > Mailing lists > Public > www-style@w3.org > February 2013

Re: [css-variables] CSSVariablesDeclaration interface definition

From: John Daggett <jdaggett@mozilla.com>
Date: Wed, 27 Feb 2013 17:51:45 -0800 (PST)
To: www-style list <www-style@w3.org>
Message-ID: <171155107.5616342.1362016305399.JavaMail.root@mozilla.com>
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.

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

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:26 UTC