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.

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.

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
  1. document.styleSheets[1].cssText;
    returns
    the content of the entire style sheet
  2. document.styleSheets[1].cssRules[1].cssText;
    returns
    pre {color: #990000; font-weight: 600}
  3. 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
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
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
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
[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
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
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.