W3C DOM Compatibility - CSS

Last major update on 21 March 2008.

You can also view the previous version.

Cover of my book

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.

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

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.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
currentStyle
The current style of the element, however this style is set

Test page Microsoft 		Yes No No Yes 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 Yes Yes Yes Yes 
window.getComputedStyle(x,null).color

Read out the current color style of element x.
style
The inline style of the element

Test page 		Almost Yes Yes Almost Yes Almost 
x.style

Access 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.

  • Safari and Konqueror have trouble with reading out the border style that I use in my test. However, in general style works correctly in both browsers.
  • IE5.5 and 6 have problems with setting the new border rule, but I suspect that's caused by my template and not by the actual test. In general they support style changes well.
Yes Read only Yes Yes Yes Yes 
document.styleSheets[1].cssRules[0].style

Access the styles in the first rule of the second style sheet. These, too, can be set:
document.styleSheets[1].cssRules[0].style.color = '#0000cc'

(IE uses rules instead of cssRules, obviously.)
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

Accessing style sheets

You can access and change entire style sheets. See the Change style sheet page for an introduction to these properties and the inevitable browser compatibility problems.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
cssRules[]
An array with all rules in a stylesheet.

Test page 		No Yes Yes Yes Yes 
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 		Yes No No No No 
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 		Incorrect No Yes No Yes 
document.styleSheets[1].rules[1]

Access the second rule of the second style sheet in the document.

rules does not contain @import declarations, while cssRules does.

  • IE doesn't count @imports as rules, but splits up selectors like p#test, ul into two rules.
styleSheets[]
An array with all stylesheets in the document

Test page 		Yes Yes Yes Yes Yes 
document.styleSheets[1]

Access the second style sheet (linked or embedded) in the document.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

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.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
addRule()
Add a rule into a stylesheet the Microsoft way

Test page 		Yes No Yes No Yes 
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 the W3C way

Test page 		No Yes Yes Yes Yes 
document.styleSheets[1].deleteRule(1)

Delete the second rule of the second style sheet in the document.
insertRule()
Insert a rule into a stylesheet the W3C way

Test page 		No Yes Yes Yes Yes 
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()
Remove a rule from a stylesheet the Microsoft way

Test page 		Yes No Yes No Yes 
document.styleSheets[1].removeRule(1)

Remove the second rule from the second style sheet in the document.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

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.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
cssText
The CSS of a rule as a string.

Test page 		Yes Yes Yes Yes Yes 
x.style.cssText

Returns the entire inline style of element x.
Yes No No No No 
document.styleSheets[1].cssText

Returns the entire content of the style sheet.
No Yes Yes Yes No 
document.styleSheets[1].cssRules[1].cssText

Returns the entire text of the rule (for instance pre {font: 14px verdana;}).

(Obviously, IE needs rules instead of cssRules.)
Yes Yes Yes Yes Yes 
document.styleSheets[1].cssRules[1].style.cssText

Returns all declarations of the rule (for instance font: 14px verdana;).

(Obviously, IE needs rules instead of cssRules.)
disabled
Whether the stylesheet is disabled

Test page 		Yes Yes Yes Yes Yes 
document.styleSheets[1].disabled = true

Disable the second style sheet of the document. (Setting it to false enables the style sheet again).
href
The href of a stylesheet

Test page 		Yes+ Yes Yes Yes Yes 
document.styleSheet[0].href

Get the href of the style sheet. This is a relative path in IE; a complete URL in all other browsers.

  • IE allows you to change the href.
selectorText
The selector of a rule as a string

Test page 		Yes Yes Yes Yes+ Yes 
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.

  • Opera allows you to set the selectorText.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

Miscellaneous

Miscellaneous stuff. Generally not important.

Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
createStyleSheet()
Create a style sheet

Test page 		Yes No No No No 
document.createStyleSheet('extrastyle.css')

Create an extra style (sheet) and append it to the styleSheets[] array.
getPropertyPriority()
Get the property priority (!important or not)

Test page 		No Yes Yes Yes Yes 
document.styleSheets[1].cssRules[1].style.getPropertyPriority('color')

Returns important when the style is marked !important.

(Obviously, IE needs rules instead of cssRules.)
getPropertyValue()
Get the value of a style property

Test page 		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. Of course, reading out style.color is much easier.
ownerNode
The owner of a style sheet

Test page 		No Yes Yes Yes Yes 
document.styleSheets[1].ownerNode

Access 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 Yes Yes Yes Yes 
document.styleSheets[1].cssRules[1].parentStyleSheet

Access the parent style sheet of the rule, which is once again document.styleSheets[1].
removeProperty()
Remove a style declaration entirely

Test page 		No Yes Yes Incomplete 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".

  • Opera refuses to remove the last remaining property of a rule.
setProperty()
Set a style property

Test page 		No Yes Yes Yes Yes 
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.

As usual, the pointless null is required. (Default values, anyone?)
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7