W3C DOM Compatibility - CSS Object Model View

Last major update on 20 July 2010.

This page has been translated into Romanian.

Mobile table.

These compatibility tables detail support for the W3C CSSOM View specification in all modern browsers.

Want these Tables updated? Join the donation drive.

  1. WindowView properties.
  2. ScreenView properties.
  3. DocumentView and ElementView methods.
  4. ElementView properties.
  5. Mouse position.

WindowView properties

These properties hold the dimensions of the entire browser window.

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
innerWidth and innerHeight
The dimensions of the viewport (interior of the browser window)

Test page 
window.innerWidth window.innerHeight

See more recent test results.
outerWidth and outerHeight
The dimensions of the entire browser window (including taskbars and such)

Test page 		No Yes Yes Yes Yes Yes To be tested 
window.outerWidth window.outerHeight
pageXOffset and pageYOffset
The amount of pixels the entire pages has been scrolled

Test page 
window.pageXOffset window.pageYOffset

See more recent test results.
screenX and screenY
The position of the browser window on the screen

Test page 		No Yes Yes Yes Yes Incorrect To be tested 
window.screenX window.screenY
  • Opera calculates the coordinates of the specific tab window relative to the encompassing browser window. This is understandable given its way of working with windows, but strictly speaking it's a bug. It should give the coordinates of the encompassing browser window relative to the screen.
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

ScreenView properties

These properties hold information about the screen.

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
availWidth and availHeight
The available width and height on the screen (excluding OS taskbars and such)

Test page 		Yes Yes Yes Yes Yes To be tested 
screen.availWidth screen.availHeight
colorDepth
The color depth (in bits) of the screen

Test page 		Yes Yes Incorrect Yes Yes Yes To be tested 
screen.colorDepth
  • Firefox 3.6 return 24, while my system is clearly 32; all other browsers agree on that. This bug has occurred before, in a far earlier version of Firefox. Can’t remember which one.
    There was something about Firefox being “really” right because of an alpha channel or something, but as long as all other browsers on the same computer report 32 I continue to see Firefox as the culprit here.
    Besides, these properties are only ever used in web browser statistics programs, and there people have grown used to the “32” even though they don’t understand what it means. Nobody ever uses it in the wild.
pixelDepth
Usually same as colorDepth

Test page 		No Yes Yes Incorrect Yes Yes Yes To be tested 
screen.pixelDepth

The difference between colorDepth and pixelDepth is only important on (older?) Unix machines, where old X-clients may allow applications to define their own color scheme. If that’s the case, colorDepth matches the color depth of the application and pixelDepth the color depth of the monitor. In all other cases they’re equal.
width and height
The width and height of the screen

Test page 		Yes Yes Yes Yes Yes To be tested 
screen.width screen.height
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

DocumentView and ElementView methods

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
elementFromPoint()
Returns the element located at the given coordinates

Test page 		Yes Yes Incorrect Yes Yes Incorrect Yes To be tested 
document.elementFromPoint(100,100)

Which coordinates does elementFromPoint() need? The standard seems to be clientX/Y.

  • Safari 4 and Opera 10.10 need pageX/Y.

This method is a godsend for drag and drop scripts. When the user drops the dragged element, figure out what element is located at the drop point and go on from there. No more complicated calculations necessary.

However, you need to temporarily hide the dragged object. By definition it's the topmost element on the requested coordinates, and we need to know what's underneath it. The basic trick is:

 releaseElement: function(e) { // called onmouseup	var evt = e || window.event;	draggedObject.style.display = 'none';	var receiver = document.elementFromPoint(evt.clientX,evt.clientY);	if (receiver.nodeType == 3) { // Opera	receiver = receiver.parentNode;	}	draggedObject.style.display = '';

Now receiver contains the element the user dropped the dragged element on.
getBoundingClientRect()
Gets the encompassing rectangle

Test page 		Yes Almost Yes Yes Yes To be tested 
x.getBoundingClientRect()

Returns an object that contains the top, left, right, and bottom (all relative to the top left of the viewport) of the combined rectangle of element x. Essentially, the browser calculates all rectangles (see below getClientRects()), and getBoundingClientRect() returns the lowest (top, left) or highest (bottom, right) values found.

IE handles this correctly, provided you accept its incorrect calculation of the individual rectangles.

  • Firefox doesn't round the top/bottom coordinates.
getClientRects()
Gets the several rectangles of an element

Test page 		Buggy Yes Almost Yes Yes Yes To be tested 
x.getClientRects()

Returns a list with Rectangle objects that contain the top, left, right, and bottom (all relative to the top left of the viewport) of the rectangles of element x.

The trick here is, that an inline element such as an <em> contains one rectangle for every inline box (line), and that all these rectangles are returned.

  • IE5-7 returns far too many rectangles for the first test paragraphs. The correct number is 5 (for 5 lines), but IE5.5 returns 9 and IE6/7 14. IE8b2 gets this right.
  • Furthermore, IE5-7 also split up a block-level element such as a <p> into one rectangle per line. This is incorrect: a block-level element should be reported as one rectangle.
  • Finally, in IE 5-7 the rectangles are off by about two pixels. According to John Resig this is caused by the (invisible, but nonetheless present) borders of the <html> element.
  • Firefox doesn't round the top/bottom coordinates.
scrollIntoView()

Makes an element scroll into view

(Not part of the specification)



Test page 		Yes Yes Yes Yes Yes To be tested 
x.scrollIntoView()

Element x scrolls into view.

Essentially element x behaves as if it's the target of an #hash: it scrolls to the topmost, leftmost position allowed.

  • Safari iPhone handles the Y-coordinate correctly, but it also scrolls to the left edge of the page, which can make this method hard to use when the user has zoomed in.
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

ElementView properties

These properties give information about the dimensions of an Element node (HTML tag).

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
clientLeft and clientTop
The position of the upper left corner of the content field relative to the upper left corner of the entire element (including borders)

Test page 		Yes Yes Yes Yes Yes To be tested 
x.clientLeft x.clientTop
clientWidth and clientHeight
The width and height of the content field, excluding border and scrollbar, but including padding

Test page 
x.clientWidth x.clientHeight

See more recent test results.
offsetLeft and offsetTop
The left and top position of the element relative to its offsetParent.

Test page 		Incorrect Yes Yes Yes Yes Yes To be tested 
x.offsetLeft x.offsetTop
  • When calculating offsetTop, IE5-7 does not count elements with position: relative as offsetParents, and moves on to the next offsetParent in the chain. offsetLeft is calculated correctly.
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
offsetParent
The ancestor element relative to which the offsetLeft/Top are calculated.

Test page 		Yes Yes Yes Yes Yes To be tested 
x.offsetParent

When calculating the offsetParent of x the browser moves up the DOM tree to x's ancestors until it encounters one of the following elements. That element becomes x's offsetParent.

  • <body>
  • An element with a position other than static.
  • A <table>, <th> or <td>, but only if x has position: static.

The <body> element does not have an offsetParent. Nonetheless the <html> element sometimes enters the offsetParent chain, though never as the offsetParent of the <body>.

In IE and Opera elements with position: fixed do not have an offsetParent.
offsetWidth and offsetHeight
The width and height of the entire element, including borders

Test page 
x.offsetWidth x.offsetHeight

See more recent test results.
scrollLeft and scrollTop
The amount of pixels the element has scrolled. Read/write.

Test page 		Yes Yes Yes Yes Yes To be tested 
x.scrollLeft x.scrollTop x.scrollTop = 20
scrollWidth and scrollHeight
The width and height of the entire content field, including those parts that are currently hidden.
If there's no hidden content it should be equal to clientX/Y.

Test page 		Incorrect Yes Yes Yes Yes Incorrect Almost To be tested 
x.scrollWidth x.scrollHeight

When you scroll the element all the way down, scrollHeight should be equal to scrollTop + clientHeight.

If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.

  • When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.
  • Opera gives odd, incorrect values.
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

Mouse position

See more recent test results.