CSS contents and browser compatibility

Last major update on 18 July 2010.

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.

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.

CSS 2.1 selectors

Specification.

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
Selects all elements 		Yes Yes Yes Yes Yes To be tested
 
> selector
Selects an element that is a child of another element 		No Yes Yes Yes Yes Yes To be tested
+ selector
Selects an element that is a next sibling of another element 		No Static Almost Yes Yes Yes Yes Yes To be tested
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 To be tested
 
Multiple classes
Whether an element can support two or more class names 		Buggy Yes Yes Yes Yes Yes To be tested
  • IE6 and lower make a mistake; when confronted with p.test.small they act as if the selector is p.small.
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
:before and :after
To generate content before and after an element 		No Yes Yes Yes Yes Yes To be tested
:hover and :active
An element in a hovered (mouseover) or active (mousedown) state. 		Minimal Incomplete Yes Yes Yes Yes Yes To be tested
  • IE 5/6 supports both only on links. IE 7 supports :hover, but not :active, on all elements.
  • Konqueror removes the :active styles almost immediately.
:first-child
An element that is the first child of its parent 		No Static Almost Yes Yes Yes Yes Yes To be tested
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 To be tested
  • 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 To be tested
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

CSS 2.1 declarations

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
content
for :before/:after 		No Yes Yes Almost Almost Almost To be tested
  • Only IE8, FF3+ and Konqueror support the none value.
  • Konqueror has a counter issue.
counters
 No Yes Yes Yes Yes Yes To be tested

To assign counters to headings or other elements.
cursor
Change cursor style 		Yes Yes Yes Yes Yes To be tested

Microsoft values don’t count for overall browser compatibility.
display
 Incomplete Yes Almost Almost Yes Yes Yes To be tested

Incomplete: lacks 2 or more values; almost: lacks 1 value.
List styles
Types, image, position 		Incomplete Yes Yes Yes Yes Yes To be tested

IE7- doesn’t support a few types.

The test page also contains CSS 3 values.
min/max-width/height
 No Minimal Yes Yes Yes Yes Yes To be tested
  • IE 6 supports min-height on TD’s only.
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
outline
A sort of border, but it doesn’t count for the box model. 		No Yes Yes Yes Yes Yes To be tested
overflow
 Incorrect Yes Yes Yes Yes Yes To be tested
  • IE 5/6 doesn’t implement overflow: visible correctly.
position
 Incomplete Almost Yes Yes Almost Yes Almost Yes To be tested

IE 5/6 don’t support position: fixed

  • IE7 has a strange bug; see page.
  • Safari 4 and Chrome 5 have a minor bug; see page.
Table columns
 Incomplete Yes Yes Almost Almost Almost Yes To be tested

See page for details.
Table declarations
empty-cells, border-collapse, border-spacing, table-layout, caption-side 		Incomplete Yes Yes Yes Yes Yes To be tested

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

See page for detailed compatibility. IE9 has one bug.
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

CSS 3 selectors

Specifications.

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
Selects an element that is a general next sibling of another element 		No Yes Yes Yes Yes Yes To be tested
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 To be tested
 
:empty
Empty elements 		No Yes Yes Yes Yes Yes To be tested
:enabled, :disabled and :checked
For enabled, disabled, or checked form fields. 		No Yes Yes Yes Yes Yes To be tested
:first-of-type
The first element of its type. 		No Yes ? Yes Yes Yes Yes To be tested
:last-child
An element that is the last child of its parent 		No Yes Yes Yes Yes Yes To be tested
:last-of-type
The last element of its type. 		No Yes ? Yes Yes Yes Yes To be tested
:not
Negation of a selector 		No Yes Yes Yes Yes Yes To be tested
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
:nth-child()
Select elements according to a formula 		No Yes No Yes Yes Yes Incorrect To be tested
  • Opera gets totally confused in the dynamic test.
:nth-last-child()
 No Yes ? Yes Yes Yes Yes To be tested
:nth-last-of-type()
 No Yes ? Yes Yes Yes Yes To be tested
:nth-of-type()
Select elements according to a formula 		No Yes No Yes Yes Yes Incorrect To be tested
  • 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 To be tested
:only-of-type
The only element of its type. 		No Yes ? Yes Yes Yes Yes To be tested
:root
The root element, or initial containing block. 		No Yes Yes Yes Yes Yes To be tested
::selection
Text selected by the user. 		No Yes -moz- Yes Yes Yes To be tested
:target
Element that is a target of a hash (page.html#testHash) 		No Yes Yes Yes Yes Incomplete To be tested
  • Opera doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all.
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

CSS 3 declarations

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
background-attachment
States whether the background image scrolls with the document, the element, or not at all. 		Incorrect Incomplete Yes Incomplete Incomplete Yes Yes Incomplete Yes To be tested
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 No Yes -webkit- -webkit- No Buggy Almost To be tested
  • Safari 5 and Chrome 5 support background-clip: padding-box (i.e. without vendor prefix), but require -webkit-background-clip: content-box (i.e. with vendor prefix). I assume this is an oversight, and not a deep statement of intent.
  • Opera has issues with scrolling. Also try laying another window over Opera, and then removing it again. Artifacts remain.
background-origin
States whether the background originates in the border-box, padding-box (default) or content-box. 		No Yes No Yes -webkit- Yes Yes -o- Yes To be tested
background-repeat
States how the background is repeated. Note the new values space and round. 		Incomplete Yes Incomplete Incomplete Incorrect Incorrect Incomplete Yes To be tested
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 No -moz- Yes Incomplete Yes Yes Incomplete Yes To be tested
Incomplete
Browser does not support contain and cover and requires a vendor prefix.
Multiple background images
How to define more than one background image on an element 		No Yes No Yes Yes Yes Yes To be tested
 
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
border-radius
 No Yes ? -moz- -webkit- Yes Yes No Yes To be tested
box-shadow
 No Yes ? -moz- -webkit- -webkit- No Yes To be tested
box-sizing
 No Yes -moz- -webkit- -webkit- Yes To be tested

No browser supports box-sizing in combination with min- or max- width or height.
Columns
To divide one block of text into several columns, newspaper-style. 		No -moz- -webkit- -webkit- No To be tested
gradient
 No filter No No -moz- -webkit- -webkit- No To be tested
opacity
 filter Yes Yes Yes Yes Yes To be tested
resize
Allow the user to resize an element. 		No No Yes Yes No To be tested

The element’s size can only be increased.
text-overflow
Shows ellipsis characters when a text flows outside its box. 		No Yes No Yes Yes -o- Yes To be tested

This property only makes sense when a box has white-space: nowrap and an overflow other than visible.

  • Konqueror doesn’t show the ellipsis characters.
text-shadow
Create a text-shadow. 		No Yes Yes Yes Yes To be tested
 
text-stroke
 No No -webkit- Buggy No To be tested
  • Chrome does weird stuff with the stroked text.
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

Other test pages

These test pages don’t quite fit in the table above, or their browser compatibility is too slight:

  1. Clearing floats without clear: both.
  2. Scrollbar colours (MS extension).
  3. Grids (CSS3 advanced layout); not supported yet.