[whatwg] New method for obtaining a CSS property

[Brett Zamir]

On 1/28/2011 2:19 AM, Boris Zbarsky wrote:
> On 1/27/11 1:23 AM, Brett Zamir wrote:
>> I'll give a more concrete example, but I did state the problem:
>> separation of concerns, and the data I want, getting a CSS property for
>> a given selector.
>
> "selectors" don't have properties.   Elements have properties, and 
> declarations have properties.  "selectors" are a mechanism for tying 
> rulesets to declarations.

My point is that a selector can be tied to a property through the 
ruleset. I recognize there may be more than one declaration even with 
the same property being associated with the same selector, but I'm 
suggesting to define some rules for selecting the most logical match. 
Even if it cannot match the same behavior for contextual style 
determination (which as Ashley pointed out follows its own cascading 
rules which do not apply here), interpreting it predictably (e.g., 
either the very first or very last exact match if there are other exact 
duplicate selector references) and as literally as possible (e.g., 
".error" would not match ".error.error" nor "div.error") should address 
the use cases I am mentioning.

>> For example, we want the designer guy to be able to freely change the
>> colors in the stylesheet for indicating say a successful transition
>> (green), an error (red), or waiting (yellow) for an Ajax request. The
>> JavaScript girl does not want to have to change her code every time the
>> designer has a new whim about making the error color a darker or lighter
>> red, and the designer is afraid of getting balled out for altering her
>> code improperly. So the JavaScript girl queries the ".error" class for
>> the "background-color" property to get whatever the current error color
>> is and then indicates to an animation script that "darkred" should be
>> the final background color of the button after the transition. The
>> retrieval might look something like:
>>
>> document.getCSSPropertyValue(".error", "background-color"); // 'darkred'
>
> You can do that right now using getComputedStyle, with a bit more 
> code, right?

Yes, or by iterating through document.stylesheets. But as Ashley pointed 
out, it is needlessly complex to create one's own pseudo document for 
this purpose, and I think it should be a simple operation to be able to 
do something as fundamental as following best practices. But the CSS 
Variables Tab suggested would work pretty well to meet this need as 
well, though it would require altering existing CSS to be parameterized.

>> Or, for canvas specifically. You draw an animated "Hello" and want the
>> designer to be able to choose the fill color. You want to be able to
>> query the stylesheet easily to get the styling info.
>
> Or just set a class on your canvas and let styles apply to it as normal?

Maybe you are thinking of SVG here?

One can't do something like this with canvas:
<canvas style="fillStyle:rgb(200,0,0)"></canvas>

..and even if one could, it would not be targeted to the specific shapes 
needing styling.

thanks,
Brett