These compatibility tables detail support for the W3C CSSOM View specification in all modern browsers.
Want these Tables updated? Join the donation drive.
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 |
||||||||||||||||||||||||
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 |
||||||||||||||||||||||||
screenX and screenY
The position of the browser window on the screen
Test page |
No | Yes | Yes | Yes | Yes | Incor |
To be tested | |||||||||||||||||
window.screenX window.screenY
|
||||||||||||||||||||||||
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 |
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 | Incor |
Yes | Yes | Yes | To be tested | |||||||||||||||||
screen.colorDepth
|
||||||||||||||||||||||||
pixelDepth
Usually same as colorDepth
Test page |
No | Yes | Yes | Incor |
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 |
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 | Incor |
Yes | Yes | Incor |
Yes | To be tested | ||||||||||||||||
document.elementFromPoint(100,100) Which coordinates does
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 |
||||||||||||||||||||||||
getBoundingClientRect()
Gets the encompassing rectangle
Test page |
Yes | Almost | Yes | Yes | Yes | To be tested | ||||||||||||||||||
x.getBoundingClientRect() Returns an object that contains the IE handles this correctly, provided you accept its incorrect calculation of the individual rectangles.
|
||||||||||||||||||||||||
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 The trick here is, that an inline element such as an
|
||||||||||||||||||||||||
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 Essentially element
| ||||||||||||||||||||||||
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 |
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 |
||||||||||||||||||||||||
offsetLeft and offsetTop
The left and top position of the element relative to its offsetParent.
Test page |
Incor |
Yes | Yes | Yes | Yes | Yes | To be tested | |||||||||||||||||
x.offsetLeft x.offsetTop
|
||||||||||||||||||||||||
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
The In IE and Opera
elements with |
||||||||||||||||||||||||
offsetWidth and offsetHeight
The width and height of the entire element, including borders
Test page |
||||||||||||||||||||||||
x.offsetWidth x.offsetHeight |
||||||||||||||||||||||||
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 |
Incor |
Yes | Yes | Yes | Yes | Incor |
Almost | To be tested | ||||||||||||||||
x.scrollWidth x.scrollHeight When you scroll the element all the way down, If the element has no scrollbars
|
||||||||||||||||||||||||
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 |