[cssom] Proposal for obtaining robust style information via Javascript - getStyle()

Forgive my ignorance on the subject, and please correct me where I'm wrong
or missing information or where something exists that does these things

The web development community at large currently seems to be beholden to
getComputedStyle() as the only source of information of what styles are
applied to an element. The resulting CSSStyleDeclaration seems to represent
a significant loss of information by presenting only the "resolved values"
of the styles.

For example, consider the following html:
div { margin: auto; }
.inner { width: 50px; }
.outer { width: 100px; }
<div class="outer"><div class="inner"> hi </div></div>

In this example, using getComputedStyle() on the inner element will yield
marginLeft = 25 and marginRight = 25. That's good in some cases. In fact,
I've argued for this exact behavior before, because it's usually preferable
to know the used value. However there are use cases where being able to
detect that the specified value is "auto" is a win.

For example, consider this jQuery UI bug:
In this case, I would want to know that "right" was specified, and that
"left" was not, so that when I want to drag the element and change it's
apparent position, I can modify "right" instead of "left". But if percents
were specified, I'd want to know pixels so I can set the exact pixel value
upon drag instead of having to do the math myself.... so I'd want used
value, but only if the specified value exists!

In general, it seems as if this one view, getComputedStyle(), can't tell me
enough information to accomodate everything I want to know. Now, I'm no
spec writer, but in a perfect world I'd want:

window.getStyle(valueType, element[, psuedoElement]);

and separately a new parameter on CSSStyleDeclaration.getPropertyValue:

CSSStyleDeclaration.getPropertyValue( propertyName[, unit, valueType]);

This would allow me to query any of the values I'd like:
"default","initial","specified","computed","used","actual", and "resolved".
getComputedStyle(elem) would be equivalent to  getStyle("resolved", elem). I'd
also now be able to convert units or value type if I wanted, simply by
specifiying it as the second and third parameter to getPropertyValue!

For my above example, to get back marginRIght:auto, and then see the used
value is 25px, I can do this:

var styles = window.getStyle("specified", elem);
console.log(styles.getPropertyValue("marginRight", "px", "used");

If incompatible valueTypes and units are combined, an error can be thrown.


Mike Sherov
Lead Developer
SNAP Interactive, Inc.
Ticker: STVI

Received on Sunday, 27 January 2013 21:21:19 UTC