CSS contents and browser compatibility

Last major update on 23 February 2012.

Mobile table.

See the CSS Selector Test for tests of and information about CSS3 selectors.

Earlier versions of this page has been translated into Brazilian Portuguese and Romanian.

The contents of my CSS pages and browser compatibility.

Want these Tables updated? Join the donation drive.

Table of Contents

Quirks and Strict mode How to trigger them, what the differences are. Contains compatibility table.
CSS Hacks Be very, very careful.
Conditional comments A generally reliable method for separating IE from all other browsers.
Clearing floats without clear: both.

CSS 2.1 selectors

Specification.

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
* selector
Selects all elements 		Yes Yes Yes Yes Yes
 
> selector
Selects an element that is a child of another element 		No Yes Yes Yes Yes Yes
+ selector
Selects an element that is a next sibling of another element 		No Static Almost Yes Yes Yes Yes Yes
Static
The browser doesn’t correctly update the styles of the original element when another element is placed before it.
  • IE8 updates correctly, but only after you remove the focus from the test link.
[attr] selector
Selects an element with a certain attribute 		No Yes Yes Yes Yes Yes
 
Multiple classes
Whether an element can support two or more class names 		Buggy Yes Yes Yes Yes Yes
  • IE6 and lower make a mistake; when confronted with p.test.small they act as if the selector is p.small.
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
:before and :after
To generate content before and after an element 		No Yes Yes Yes Yes Yes
:hover and :active
An element in a hovered (mouseover) or active (mousedown) state. 		Minimal Incomplete Almost Yes Yes Yes Yes
  • IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements.
  • IE 8-10 (and maybe older ones, too) have a slight bug: clicking the mouse down on a nested element does not trigger :active. Try it in the test page by depressing the mouse button on one of the code examples. The :active styles do not kick in.
:first-child
An element that is the first child of its parent 		No Static Almost Yes Yes Yes Yes Yes
Static
Browser doesn’t update the styles when elements are added dynamically.
  • IE8 does the right thing only after you remove the focus from the test link.
:first-line and :first-letter
The first line or first letter of an element 		Yes Yes Almost Almost Almost
  • Safari, Chrome and Konqueror add an extra 'T' when you do the dynamic test.
  • Opera leaves out the 'T' of the second and subsequent sentences when you do the dynamic test.
:focus
Form fields that receive user focus 		No Yes Yes Yes Yes Yes
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac

CSS 2.1 declarations

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
content
for :before/:after 		No Yes Yes Yes Yes Yes
counters
 No Yes Yes Yes Yes Yes

To assign counters to headings or other elements.
cursor
Change cursor style 		Incomplete Almost Yes Almost Yes Yes Almost Incomplete
  • IE5.5 and Opera Mac lack some values.
  • Safari Windows crashes on no-drop.
  • IE and Opera do not support .gif files as custom cursors. IE supports only .cur files; Opera not even that.
display
 Incomplete Yes Almost Yes Yes Yes

Incomplete: lacks 2 or more values; almost: lacks 1 value.
List styles
Types, image, position 		Minimal Incomplete Incomplete Yes Yes Incomplete
Yes
Lacks at most one type
Almost
Lacks two to five types
Incomplete
Lacks six to twelve types
Minimal
Lacks thirteen or more types
min/max-width/height
 No Minimal Yes Yes Yes Yes Yes
  • IE 6 supports min-height on TD’s only.
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
outline
A sort of border, but it doesn’t count for the box model. 		No Yes Yes Yes Yes Yes
overflow
 Incorrect Yes Yes Yes Yes Yes
  • IE 5/6 doesn’t implement overflow: visible correctly.
position
 Incomplete Almost Yes Yes Almost Almost Yes

IE 5/6 don’t support position: fixed

  • IE7 has a strange bug; see page.
  • Safari and Chrome have a minor bug; see page.
Table columns
 Incomplete Yes Yes Almost Almost Yes
Almost
Browser doesn’t support visibility: collapse.
Table declarations
empty-cells, border-collapse, border-spacing, table-layout, caption-side 		Incomplete Yes Yes Yes Yes Yes

See page for detailed compatibility.
white-space
To remove text wrapping or to make an element behave like a pre 		Incomplete Yes Yes Yes Yes Yes

See page for detailed compatibility. IE9 has one bug.
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac

CSS 3 selectors

Specifications.

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
~ selector
Selects an element that is a general next sibling of another element 		No Yes Yes Yes Yes Yes
Advanced [attr] selectors
Selects an element with an attribute whose value starts with, ends with, or contains a certain string. 		No Yes Yes Yes Yes Yes
 
:empty
Empty elements 		No Yes Yes Yes Yes Yes
:enabled, :disabled and :checked
For enabled, disabled, or checked form fields. 		No Yes Yes Yes Yes Yes
:first-of-type
The first element of its type. 		No Yes Yes Yes Yes Yes
:last-child
An element that is the last child of its parent 		No Yes Yes Yes Yes Yes
:last-of-type
The last element of its type. 		No Yes Yes Yes Yes Yes
:not
Negation of a selector 		No Yes Yes Yes Yes Yes
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
:nth-child()
Select elements according to a formula 		No Yes Yes Yes Yes Incorrect
  • Opera gets totally confused in the dynamic test.
:nth-last-child()
 No Yes Yes Yes Yes Yes
:nth-last-of-type()
 No Yes Yes Yes Yes Yes
:nth-of-type()
Select elements according to a formula 		No Yes Yes Yes Yes Incorrect
  • Opera gets totally confused in the dynamic test.
:only-child
An element that is the only child of its parent 		No Yes Yes Yes Yes Yes
:only-of-type
The only element of its type. 		No Yes Yes Yes Yes Yes
:root
The root element, or initial containing block. 		No Yes Yes Yes Yes Yes
::selection
Text selected by the user. 		No Yes -moz- Yes Yes Yes
:target
Element that is a target of a hash (page.html#testHash) 		No Incomplete Yes Yes Yes Yes
  • IE doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all. This used to be an Opera problem, while IE used to get it right.
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac

CSS 3 declarations

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
Animations
Prefixed 		No Yes Yes Yes No
background-attachment
States whether the background image scrolls with the document, the element, or not at all. 		Incorrect Incomplete Yes Incomplete Yes Yes Yes
Incomplete
browser does not support local.
Incorrect
scroll means local.
background-clip
States whether the background covers the border-box (default), padding-box or content-box. 		No Yes Yes Yes Yes Yes
background-origin
States whether the background originates in the border-box, padding-box (default) or content-box. 		No Yes Yes Yes Yes Yes
background-repeat
States how the background is repeated. Note the new values space and round. 		Incomplete Yes Incomplete Incorrect Incorrect Yes
Incomplete
Browser does not support space and round.
Incorrect
Browser treats space and round as no-repeat.
background-size
States the size of the background image, in pixels, percents, or with two special values. 		No Yes Yes Yes Yes Yes
Multiple background images
How to define more than one background image on an element 		No Yes Yes Yes Yes Yes
 
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
border-radius
 No Yes Yes Yes Yes Yes
box-shadow
 No Yes Yes Yes Yes Yes
box-sizing
 No Yes -moz- Yes Yes Yes
Columns
To divide one block of text into several columns, newspaper-style. 		No Yes -moz- -webkit- -webkit- Yes
Grids
How to define a layout Prefixed 		No Yes XUL No No No

-moz-grid is an old XUL property. As far as I can determine Mozilla is going to implement the spec eventually. See the table on this page.
opacity
 filter Yes Yes Yes Yes Yes
resize
Allow the user to resize an element. 		No Yes Yes Yes No

Firefox allows you to decrease the size of the element. In Chrome and Safari the element’s size can only be increased.
text-overflow
Shows ellipsis characters when a text flows outside its box. 		No Yes Yes Yes Yes Yes

This property only makes sense when a box has white-space: nowrap and an overflow other than visible.
text-shadow
Create a text-shadow. 		No Yes Yes Yes Yes
 
Transitions
Prefixed 		No Almost Almost Almost Almost
  • Firefox doesn’t transition left and letter-spacing.
  • Safari and Chrome also apply all transitions when the user zooms. This should not happen.
  • Safari doesn’t transition text-shadow quite correctly.
  • Opera doesn’t transition background-position and has bugs in font-size and line-height.
Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac

CSS3 Units and Values

There are some pretty interesting units and values being proposed.

Selector or declaration IE 5.5 IE 6 IE 7 IE8 IE9 IE10 pr2 FF 11.0 Win FF 10.0.2 Mac Saf 5.1 Win Saf 5.1.2 Mac Chrome 18 Win Chrome 17 Mac Opera 11.61 Win Opera 11.61 Mac
calc()
To perform calculations in CSS Prefixed 		No Yes Yes No No No
viewport
vw, vh, and vm units; they mean hundreths of the viewport width and height 		No Yes No No No No

I wrote test cases for the following values and units, but they’re not supported by any browser yet.