Re: [css-variables] CSSVariablesDeclaration interface definition

On Wed, Feb 27, 2013 at 5:51 PM, John Daggett <jdaggett@mozilla.com> wrote:
> 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?

Yes.

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

Thanks for the examples!  I copied them into an example in the spec. ^_^

~TJ

Received on Friday, 1 March 2013 01:46:36 UTC