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

Reply via email to