[whatwg] New method for obtaining a CSS property
Brett Zamir
brettz9 at yahoo.com
Thu Jan 27 01:48:49 PST 2011
On 1/27/2011 3:59 PM, Tab Atkins Jr. wrote:
> On Wed, Jan 26, 2011 at 10:23 PM, Brett Zamir<brettz9 at yahoo.com> wrote:
>> 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'
>>
>> While the JavaScript would choose the intermediate RGB steps to get there in
>> the fashion desired by the developer.
>>
>> Yes, there are CSS transitions, or maybe SVG, but this is for cases where
>> you want control tied to JavaScript.
>>
>> 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.
> Given a selector, multiple declaration blocks could match, and within
> a single declaration block, multiple copies of the property can match.
> You could get any number of values back from a call like that, and
> there's no guarantee that the value you get is worth anything, because
> a property from some other declaration block with a different selector
> could be winning instead.
I was thinking of it grabbing the "winning" property for the whole
document, i.e., the one which would be applicable without knowing more
contextual information. So, if the selector specified were ".error", it
wouldn't get "div.error", but it could be defined for example to get the
last ".error" and property (or perhaps giving precedence to !important).
Whatever the rules, it would be the team's responsibility to ensure it
was unique enough to provide the right value (as it is within CSS itself
via cascading).
> It seems that your problem is that you want a way to declare a certain
> value to be reused in both CSS and javascript, so that you can change
> it in either realm without having to care about it in the other.
>
> This can be solved cleanly and easily with CSS Variables. The CSS
> Working Group has tried several times to agree on how such a thing
> should work, so far without success, but Chrome is trying again now.
> Check out my blog post on the subject:
> <http://www.xanthir.com/blog/b49w0>
I was only proposing a read-only system, but CSS Variables as you
describe is indeed an excellent and attractively comprehensive and clean
solution (and also address canvas requirements more smoothly, since
variables could be defined with values which did not even map to a real
CSS property, such as shadow color, as long as variables were made
available to JavaScript whether or not they were actually used in the CSS).
Still, also having the ability to easily get the value which "wins out"
would have the one advantage of working without needing to change
existing code to use variables.
thanks,
Brett
More information about the whatwg
mailing list