W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css-variables] How to spec the OM for vars?

From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
Date: Fri, 24 Aug 2012 17:16:41 +0400
To: Tab Atkins Jr. <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
Message-Id: <15761345814201@web23f.yandex.ru>
24.08.2012, 04:46, "Tab Atkins Jr." <jackalmage@gmail.com>:
> One of the remaining issues for Variables is what to expose in the OM, and how.
> Ideally, custom properties would just be exposed alongside all the
> other properties, so you could do "el.style.varFoo = 'bar';" or "x =
> getComputedStyle(el).varFoo;".
> This seems somewhat incompatible with how WebIDL works. Right now,
> all the CSS properties are just exposed on CSSStyleDeclaration as a
> bunch of properties. (If we were doing things properly, we'd do this
> by having every spec define a partial interface on it and add their
> properties.)
> However, there are an infinite number of custom properties. I think
> we want to expose only the custom properties that are valid (set to a
> non-initial value).
> How can we do this in WebIDL?
> ~TJ

FWIW: Maybe a best solution would be just introduce common `getStyle()` (and `setStyle()` if needed) method proposed by me back in 2011-09-19 [1] to access any CSS properties -- both supported and unsupported by browser.

`getStyle()` methods returns CSS-property value as untouched string -- exactly as specified by author:

        #example {
            some-property: some value;
            var-lorem: ipsum;

        var elem = document.getElementById('example');

        var a = elem.getStyle('some-property');
        // The `a` JS-variable now contains string "some value".

        var ae = elem.getStyle('var-lorem');
        // The `b` JS-variable now contain string "ipsum".

As for CSS variables specifically, we could have dedicated `getVar(varName)`/ `setVar(varName, varValue)` methods.

As for exposing only valid custom properties, I'm not sure whether it makes sense. If property value corresponds to core CSS-syntax and technically _can_ be accessed by property name, why should it be inaccessible via JS?

[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=14203
Received on Friday, 24 August 2012 13:17:16 UTC

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