- From: Mike Sherov <mike.sherov@gmail.com>
- Date: Sun, 27 Jan 2013 16:20:31 -0500
- To: "www-style@w3.org" <www-style@w3.org>
- Message-ID: <CAD1Dv_KaKHweWMf+CCrSjPr1P3f3QZ6s47pSPMPMH8K-95HtXg@mail.gmail.com>
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 already... 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: <style> div { margin: auto; } .inner { width: 50px; } .outer { width: 100px; } </style> <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: http://bugs.jqueryui.com/ticket/7772 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.marginRight); console.log(styles.getPropertyValue("marginRight", "px", "used"); If incompatible valueTypes and units are combined, an error can be thrown. Thoughts? -- Mike Sherov Lead Developer SNAP Interactive, Inc. Ticker: STVI
Received on Sunday, 27 January 2013 21:21:19 UTC