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