A Style All Their Own

Posted in css by outaTiME on June 13, 2008

Modifying a DOM element’s style during user interaction is one of the
pillars of creating DHTML interfaces that transition from state to state in a
smooth, and (hopefully) intuitive way. Every HTMLElement in the DOM
contains style, a collection of properties corresponding to the
CSS properties understood by the browser. For JavaScript and CSS enabled browsers, the following two paragraphs would contain red text:

<-- Paragraph 1 -->
<p style="color: #f00">This paragraph is red</p>

<-- Paragraph 2 -->
<p id="x">This paragraph's color will be red after the JavaScript runs</p>
<script type="text/javascript">
(function () {
    var el = document.getElementById('x');

    el.style.color = ‘#f00′;

})();
</script>

Even CSS properties that aren’t applicable to a given element will have representation in that element’s style collection. For example, even the <br> element will have the el.style.letterSpacing property.

Names have been changed to protect the innocent

The style property names in JavaScript are camel cased versions of their CSS
counterparts, so font-family in CSS becomes
el.style.fontFamily in the style collection. "float" is a reserved word in
JavaScript, so the CSS float property is given a different name. In Internet
Explorer, styleFloat is used, where Firefox, Safari, and Opera all
use cssFloat (Opera also supports styleFloat, actually). Additionally, each browser has a host of proprietary CSS properties that also show up in the style collection (e.g. -moz-border-radius, which becomes el.style.MozBorderRadius in Firefox). Other than styleFloat/cssFloat, the browser vendors largely agree on non-proprietary property names.

The madness and the method

I set out to document which properties were present in each A Grade browser’s style collection (making no claims about their functional support for specific values).

For each browser, I used a simple for (var prop in el.style) method to iterate the style collection, and cross checked in a development tool if available. Specifically, I used the following:

Browser	Method
Internet Explorer 6	`for ( in )` and Visual Web Developer 2008 Express Edition
Internet Explorer 7	`for ( in )` and Visual Web Developer 2008 Express Edition
Firefox 2.0.0.14	`for ( in )` and FireBug 1.1
Firefox 3 (Release Candidate 2)	`for ( in )` and FireBug 1.1
Safari 3.1.1 (WebKit build 4525.18)	Dom Inspector*
Opera 9.27	`for ( in )`
Opera 9.5 (beta – build 4808)	`for ( in )` and Opera Dragonfly

* – Safari does not enumerate unassigned style properties, so for ( in ) doesn’t show anything useful.

All tests were done on a Macbook Pro running OSX 10.4. The IEs and FF2 were tested on Parallels instances running Windows XP. I only documented properties that weren’t prefixed with a vendor identifier (e.g. -moz), and omitted methods and meta fields such as setProperty and length. The only exception to this being cssText, which I’ll talk more about later. So without further ado…