The getComputedStyle() method can read any CSS property,
but in Firefox, IE-11 and Edge not in shorthand
Intro
This test page was triggered by Louis Lazaris' article An Introduction and Guide to the CSS Object Model (CSSOM) in CSS-tricks.com
While the Codepen examples over there (like this one) didn't work in my Firefox and IE-11, maybe the
Codepen <iframe> embedding was the culprit?
So I made this stand-alone testpage, and the result is: nothing due to Codepen, it must be Firefox, IE-11 & Edge itself.
The body's background color is set to "papayawhip" in the CSS (which is "rgb(255, 239, 213)" in rgb-notation), and the body's padding is set to "0 20px".
I can read the shorthand values (background computed to rgb() notation) with JavaScript using window.getComputedStyle(element);
In this case, I'm grabbing the background property and the padding property, which return all of these property's shorthand
values, even though only one was explicitly defined in the CSS.
1. In Chrome and Opera on desktop: yes.
- But not in Firefox (updated FF Quantum vs.64.0 under Win7Professional/64bit),
not in IE-11 (updated vs. 11.0.51) and not in Edge (Windows-10)!
The value for the body background property is:
The value for the body padding property is:
2. The longhand values are fine in all browsers:
The value for the body backgroundColor property is:
The value for the body paddingLeft property is:
3. Then I tried "null" as second parameter:
window.getComputedStyle(element, null);
Still nothing in Firefox, IE-11 and Edge; Chrome and Opera OK:
The value for the body background property is:
The value for the body padding property is:
4. Then I tried:
window.getComputedStyle(element).getPropertyValue("...");
Still nothing in Firefox, IE-11 and Edge; Chrome and Opera OK:
The value for the body background property is:
The value for the body padding property is:
5. Then I tried:
window.getComputedStyle(element)['property'];
Still nothing in Firefox, IE-11 and Edge; Chrome and Opera OK:
The value for the body background property is:
The value for the body padding property is:
6. Then I tried the same as 1., now with a javascript function instead of immediate execution:
function goCompute(){...}
Still nothing in Firefox, IE-11 and Edge; Chrome and Opera OK:
The value for the body background property is:
The value for the body padding property is:
7. Then I tried the same as 1., now with inline styles on a p element:
<p id="box" style="background: PaleGreen url(images/smiley.gif) no-repeat 50% 90%; padding: 3px 10px 50px 5px; color: blue">
I am the #box</p>
Still nothing in Firefox, IE-11 and Edge; Chrome and Opera OK:
I am the #box
The value for the #box background property is:
The value for the #box padding property is:
Evaluation
I wonder why Firefox and Edge have this behaviour; IE-11 is old, so not too much surprise.
- The w3c html-validator doesn't complain.
- The Firefox console doesn't report an error somewhere (nor do the consoles of the other 3).
- Firefox, IE-11 and Edge as well are labelled with full support and no "known issues" in caniuse.com (I've informed caniuse about my findings).
- The Mozilla MDN-page about getComputedStyle()
has only a longhand example, and says
- "It is safest to query values with only longhand names like font-size.
Shorthand names like font will not work with most browsers."
- "It is safest to query values with only longhand names like font-size.
Conclusion
If it's your developing preference, you can use Chrome; but don't forget to test in Firefox, IE-11 and Edge.
Anyway for production goals: just query all longhand properties separately, if you need them all.
Francky Kleyneman
original: 25 dec.2018
update: 12 jan.2019 (added: results Edge)