W3C DOM Compatibility

W3C DOM Compatibility - CSS

This table was last changed on 20 April 2005. It will eventually be updated; I hope somewhere in the first quarter of 2007.

If you'd like to have some practical examples of what you can do with the W3C DOM, read my book ppk on JavaScript, especially chapter 8.

This compatibility table details support for the W3C DOM CSS Level 2 modules and assorted Microsoft extensions in all modern browsers.

This page contains five tables. The first three are quite important, the last two aren't.

First the ways of accessing styles of individual HTML elements.
How to access whole style sheets.
How to change style sheets.
Some properties of style sheets and style rules.
Finally some less important miscellaneous methods.

See also the key to my compatibility tables.

All Safari 1.2 tests by Mark 'Tarquin' Wilton-Jones.

Element styles

Basic style manipulation starts with accessing styles of individual HTML elements. The important style property gives access to the inline styles of the element. Finding out which non-inline styles apply to an element is more difficult. See the Get styles page for a practical example.

Method or property	Explorer 5 Windows	Explorer 6 Windows	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.3	Opera 8
currentStyle The current style of the element, however this style is set Test page Microsoft	Yes	Yes	Yes	No	No	No
	x.currentStyle Returns the actual style of element `x`, even if this is not an inline style. It thus reports the result of all style declarations that work on element `x`.
getComputedStyle() The current style of the element, however this style is set Test page W3C	No	No	No	Yes	No	Yes
	window.getComputedStyle(x,null).color Read out the current color style of element `x`.
style The inline style of the element Test page	Yes	Yes	Yes	Yes	Yes	Yes
	x.style Accesses the inline styles of element `x`. Styles defined in embedded, linked or imported style sheets are not reported. You can also set it: `x.style.color = '#0000cc'`. This sets the inline style, which of course overrules all other styles.
	Yes	Yes	Yes	Yes	Yes	Untestable
	document.styleSheets[1].cssRules[0].style Accesses the styles in the first rule of the second style sheet. These, too, you can set: `document.styleSheets[1].cssRules[0].style.color = '#0000cc'`

Accessing style sheets

In modern browsers it's also possible to access entire style sheets. See the Change style sheet page for an introduction to these properties and the inevitable browser compatibility problems.

Method or property	Explorer 5 Windows	Explorer 6 Windows	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.3	Opera 8
cssRules[] An array with all rules in a stylesheet. Test page W3C	No	No	Yes	Yes	Yes	Untestable
	document.styleSheets[1].cssRules[1] Access the second rule of the second style sheet in the document.
imports[] An array with all imported style sheets in a style sheet Test page Microsoft (?)	Yes	Yes	Yes	No	No	Untestable
	document.styleSheets[1].imports Access all style sheets that are imported by the second style sheet in the document.
rules[] An array with all rules in a stylesheet. Test page Microsoft	Yes	Yes	Yes	No	Yes	Untestable
	document.styleSheets[1].rules[1] Access the second rule of the second style sheet in the document.
styleSheets[] An array with all stylesheets in the document Test page	Yes	Yes	Yes	Yes	Incomplete	No
	document.styleSheets[1] Access the second style sheet (linked or embedded) in the document. Safari 1.2 cannot access alternate style sheets or disabled style sheets (not retested in 1.3)

Changing style sheets

You can change entire style sheets, which means that the styles you change will apply to the whole HTML page, not just one element. There are some cute old-fashioned browser compatibility problems here. More serious is the fact that you can only perform this sort of manipulation in Explorer Windows and Mozilla. Other browsers are way behind.

Method or property	Explorer 5 Windows	Explorer 6 Windows	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.3	Opera 8
addRule() Insert a rule into a stylesheet Test page Microsoft	Yes	Yes	No	No	No	Untestable
	document.styleSheets[1].addRule('PRE', 'font: 14px verdana') Add the rule `PRE {font: 14px verdana}` to the second style sheet in the document.
deleteRule() Delete a rule from a stylesheet Test page W3C	No	No	No	Yes	No	Untestable
	document.styleSheets[1].deleteRule(1) Delete the second rule of the second style sheet in the document.
insertRule() Insert a rule into a stylesheet Test page W3C	No	No	"Permission denied"	Yes	No	Untestable
	var x = document.styleSheets[1]; x.insertRule('PRE {font: 14px verdana}',x.cssRules.length) Insert the rule `PRE {font: 14px verdana}` into the second style sheet in the document at the last position (`length` of the cssRules array). Unfortunately the second argument is required. It should default to `cssRules.length`.
removeRule() Delete a rule from a stylesheet Test page Microsoft	Yes	Yes	No	No	No	Untestable
	document.styleSheets[1].removeRule(1) Remove the second rule from the second style sheet in the document.

Style sheet properties

Style sheets and their rules have several properties. They aren't very interesting, and browser incompatibilities make sure that they won't be used much.

Method or property	Explorer 5 Windows	Explorer 6 Windows	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.3	Opera 8
cssText The CSS of a rule as a string. Test page Use 3 only	1 and 3	1 and 3	Yes	2 and 3	3	Untestable
	document.styleSheets[1].cssText; returns the content of the entire style sheet document.styleSheets[1].cssRules[1].cssText; returns `pre {color: #990000; font-weight: 600}` document.styleSheets[1].cssRules[1].style.cssText; returns `color: #990000; font-weight: 600` Only Explorer 5 Mac supports all three ways. Only the third way is cross-browser compatible. You can write to `style.cssText`: `[rule].style.cssText = 'color: #cc0000';` Note that Explorer Mac adds the new style to the CSS, instead of replacing all old styles by the new style, as Explorer Windows, Mozilla and Safari do.
disabled Whether the stylesheet is disabled Test page	Yes	Yes	Yes	Yes	Minimal	Untestable
disabled Whether the stylesheet is disabled Test page	document.styleSheets[1].disabled = true Disable the second style sheet of the document. (Setting it to `false` enables the style sheet again). The property exists in Safari 1.3, but setting it doesn't change anything.
href The href of a stylesheet Test page	Yes	Yes	Read only	Read only	Read only	Untestable
href The href of a stylesheet Test page	document.styleSheet[0].href Get the HREF of the style sheet. This is a complete URL in Netscape and Safari, a relative path in Explorer. The specs explicitly say that this is a read only property, but I don't see why it should be.
selectorText The selector of a rule as a string Test page	Yes	Yes	Yes	Yes	Yes	Untestable
selectorText The selector of a rule as a string Test page	document.styleSheets[1].cssRules[1].selectorText Get the selector text of the second rule in the second style sheet in the document. Note that some browsers return UPPER CASE selector texts even when the style sheet contains lower case selectors. Use `selectorText.toLowerCase()` for all your comparisions.

Miscellaneous

Miscellaneous stuff. Generally not important.

Method or property	Explorer 5 Windows	Explorer 6 Windows	Explorer 5.2 Mac	Mozilla 1.75	Safari 1.3	Opera 8
createStyleSheet() Create a style sheet Test page	Yes	Yes	Yes	No	No	No
createStyleSheet() Create a style sheet Test page	[document.createStyleSheet("javascript:'div{margin:0px;}'");] ? document.createStyleSheet('extrastyle.css') I did not test the first line, but I heard it works. The second line creates an extra style (sheet) and append it to the styleSheets[] array.
getPropertyPriority() Get the property priority (`!important` or not) Test page	No	No	Almost	Yes	Yes	Untestable
	document.styleSheets[1].{cssrules}[1].style.getPropertyPriority('color') Returns a value when the style is marked `!important`. Mozilla and Safari return `important` Explorer 5 Mac returns `!important`
getPropertyValue() Get the value of a style property Test page	No	No	Yes	Yes	Yes	Yes
	document.getElementById('test').style.getPropertyValue('color') document.styleSheets[1].cssRules[1].style.getPropertyValue('color') Get the color declaration of the style object. This works on all style objects.
ownerNode The owner of a style sheet Test page	No	No	No	Yes	Yes	Untestable
ownerNode The owner of a style sheet Test page	document.styleSheets[1].ownerNode Accesses the owner node of the style sheet, usually a `<LINK>` or a `<STYLE>` tag.
parentStyleSheet The stylesheet a declaration is part of Test page	No	No	Yes	Yes	Yes	Untestable
	cssRules[1].parentStyleSheet Accesses the parent style sheet of the rule, which is once again `document.styleSheets[1]`
removeProperty() Remove a style declaration entirely Test page	No	No	No	Yes	Yes	Yes
	document.styleSheets[1].cssRules[1].style.removeProperty('color') document.getElementById('test').style.removeProperty('color') Remove the color declaration from the second rule of the second style sheet on the page or the element with ID="test".
setProperty() Set a style property Test page	No	No	Yes	Yes	Yes	Yes
setProperty() Set a style property Test page	x.style.setProperty('color','#00cc00',null) document.styleSheets[1].cssRules[1].style.setProperty('color','#00cc00',null) Set the color of `x` or the second rule in the second style sheet to green.