W3C DOM Compatibility - CSS

Last major update on 19 July 2010.

This page has been translated into Romanian.

You can also view the previous version.

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

Want these Tables updated? Join the donation drive.

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 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
currentStyle
The current style of the element, however this style is set

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

Read out the current color style of element x. All units are converted to pixels first.

style
The inline style of the element

Test page
Almost Yes Yes Yes Yes Yes To be tested
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.

  • Konqueror has 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.
No Yes No No No Yes To be tested
x.style = 'font-size: 150%'

Change the inline styles to only font-size: 150%.

Read only Yes Yes Yes Yes Yes To be tested
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 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

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 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
cssRules[]
An array with all rules in a stylesheet.

Test page
No Yes Yes Yes Yes Yes To be tested
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 To be tested
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 Yes No To be tested
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. This behaviour persists in IE9, although cssRules works correctly.
styleSheets[]
An array with all stylesheets in the document

Test page
Yes Yes Yes Yes Yes To be tested
document.styleSheets[1]

Access the second style sheet (linked or embedded) in the document.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

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 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
addRule()
Add a rule into a stylesheet the Microsoft way

Test page
Yes No Yes Yes No To be tested
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 Yes To be tested
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 Yes To be tested
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 Yes No To be tested
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 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

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 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
cssText
The CSS of a rule as a string.

Test page
Yes Yes Yes Yes Yes To be tested
x.style.cssText

Returns the entire inline style of element x.

Yes No No No No To be tested
document.styleSheets[1].cssText

Returns the entire content of the style sheet.

No Yes Yes Yes Yes Yes To be tested
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 To be tested
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 To be tested
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 Yes To be tested
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 up to 8 allows you to change the href.
selectorText
The selector of a rule as a string

Test page
Yes Incorrect Yes Yes Yes Yes+ To be tested
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 comparisons.

  • Opera allows you to set the selectorText.
  • IE splits all comma selectors into several rules (p#test, li becomes two rules, one for p#test, one for li). This is not counted as a bug in this test; IE shows the correct selectorText according to its own rules.
  • IE9, however, persists in this behaviour even though it support for cssRules is supposed to be standards compliant and thus return p#test, ul. What it returns, however, is p#test. I assume this is a bug in the selectorText implementation, and not in the actual style sheet (i.e. the rule does apply to both p#test and ul.)
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

Miscellaneous

Miscellaneous stuff. Generally not important.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
createStyleSheet()
Create a style sheet

Test page
Yes No No No No To be tested
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 Yes To be tested
document.styleSheets[1].cssRules[1].style.getPropertyPriority('color')

Returns important when the style is marked !important. Returns an empty string otherwise.

(Obviously, IE needs rules instead of cssRules.)

getPropertyValue()
Get the value of a style property

Test page
No Yes Yes Yes Yes Yes To be tested
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 Yes To be tested
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 Yes To be tested
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 Yes Yes Incomplete To be tested
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 To be tested
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 null is required. (Default values, anyone?) You can also use important instead.

Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x