Computed vs Cascaded Style
Just as the panel discussed getComputedStyle and how each browser returns something different, Erik Arvidsson blogged about Computed vs Cascaded Style.
Erik discusses the difference between computed, cascaded, and override styles. He shows us why this common function is bad:
-
-
function getStyle(el, prop) {
-
if (document.defaultView && document.defaultView.getComputedStyle) {
-
return document.defaultView.getComputedStyle(el, null)[prop];
-
} else if (el.currentStyle) {
-
return el.currentStyle[prop];
-
} else {
-
return el.style[prop];
-
}
-
}
-
Back to our earlier question. What is wrong with our getStyle function? It
should be pretty obvious now. It will give very different and sometimes
unexpected results depending both on browsers and on the value set by the page
author and even worse, set by user style sheets.So how do we solve this? We stop supporting IE of course… seriously, with
the market share IE has that is not an option. The best solution is to remove
functions like these from shared code and instead add more specific functions.
One can for example, often calculate the computed value based on the cascaded
value and the ancestors. A good example of that is ‘visibility’. Computing that
is pretty easy. If the value is ‘inherit’ check the parents until a non inherit
value is found. For things like left, width etc you will be better of using
offsetLeft, offsetWitdh etc. There are a lot of cases and sometimes it is just
not possible (or requires iterative testing with different absolute sized
elements).
Dean Edwards then commented with the following:
-
-
var PIXEL = /^\d+(px)?$/i;
-
function getPixelValue(element, value) {
-
if (PIXEL.test(value)) return parseInt(value);
-
var style = element.style.left;
-
var runtimeStyle = element.runtimeStyle.left;
-
element.runtimeStyle.left = element.currentStyle.left;
-
element.style.left = value || 0;
-
value = element.style.pixelLeft;
-
element.style.left = style;
-
element.runtimeStyle.left = runtimeStyle;
-
return value;
-
};
-
(Via Ajaxian.)
