CSS contents and browser compatibility

Last major update on 28 March 2009.

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 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
* selector
Selects all elements 		Yes Yes Yes Yes Yes Yes
 
> selector
Selects an element that is a child of another element 		No Yes Yes Yes Yes Yes Yes
+ selector
Selects an element that is a next sibling of another element 		No Static Almost Static Yes Static Yes Static Yes Yes Yes

Static: the browser doesn’t correctly update the styles of the original element when another element is placed before it.

IE8 as 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 Yes
 
Multiple classes
Whether an element can support two or more class names 		Buggy Yes Yes Yes Yes Yes Yes
 
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
:before and :after
To generate content before and after an element 		No Yes Yes Yes Yes Yes Yes
:hover and :active
An element in a hovered (mouseover) or active (mousedown) state. 		Minimal Incomplete Yes Yes Yes Yes Yes Almost
  • 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 Static Yes Static Yes Yes Yes Yes

IE7, Firefox 2 and Safari don’t update the styles when elements are added dynamically. IE8b2 does, but 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 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 Yes
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

CSS 2.1 declarations

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
content
for :before/:after 		No Yes Almost Yes Almost Almost Almost Almost
  • Only IE8, FF3+ and Konqueror support the none value.
  • Konqueror has a counter issue.
counters
 No Yes Yes Yes Yes Yes Yes

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

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

The compact value is ignored. Incomplete: lacks 2 or more values; almost: lacks 1 value.
List styles
Types, image, position 		Incomplete Yes Yes Yes Yes Yes Yes

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 Yes

IE 6 supports min-height on TD’s only.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
outline
A sort of border, but different 		No Yes Yes Yes Yes Yes Yes
overflow
 Incorrect Yes Yes Yes Yes Yes Yes
  • IE 5/6 doesn’t implement overflow: visible correctly.
position
 Incomplete Almost Yes Yes Almost Almost Yes 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 Almost Almost

See page for details.
Table declarations
empty-cells, border-collapse, border-spacing, table-layout, caption-side 		Incomplete Yes 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 Incomplete Yes Yes Yes Yes Yes

See page for detailed compatibility.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

CSS 3 selectors

Specifications.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
~ selector
Selects an element that is a general next sibling of another element 		No Yes 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 Yes
 
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
:not
Negation of a selector 		No Yes Yes Yes Yes Yes
:root
The root element, or initial containing block. 		No Yes Yes Yes Yes Yes
:target
Element that is a target of a hash (page.html#testHash) 		No Yes Yes Yes Incomplete Yes
  • Opera doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all.
:enabled, :disabled and :checked
For enabled, disabled, or checked form fields. 		No Yes Yes Yes Yes Yes
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
:empty
Empty elements 		No Static Yes Static Yes Yes Yes Static

Static: The browser does not update the styles when content is added to an initially empty <div>.

  • Safari iPhone correctly removes the :empty styles when content is added but does not re-apply them when the content is removed.
:last-child
An element that is the last child of its parent 		No Static Yes No Yes Yes Yes Yes

Static: The browser does not update the styles when elements are added dynamically.
:only-child
An element that is the only child of its parent 		No Static Yes No Yes Yes Yes Yes

Firefox 2 doesn’t update the styles when elements are added dynamically.
:nth-child()
Select elements according to a formula 		No No Yes No Incorrect Incorrect Incorrect Yes
  • Incorrect: browser gets totally confused in the dynamic test.
:nth-of-type()
Select elements according to a formula 		No No Yes No Yes Yes Incorrect Yes
  • Incorrect: browser gets totally confused in the dynamic test.
::selection
Text selected by the user. 		No -moz- Yes Yes Yes Yes
Special Mozilla syntax.
Media queries
Allows you to define blocks of styles that only take effect on certain monitor sizes. 		No No Yes Static Yes Static Yes Yes No

Safari assigns the styles statically on page-load and doesn’t update them.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

CSS 3 declarations

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
background-attachment
on elements other than body 		Incorrect Incomplete Incomplete Incomplete Incomplete Incomplete Incorrect

scroll and fixed are CSS 2 values, but local is a CSS 3 value.

  • Incomplete: browser does not support local.
  • Incorrect: scroll means local.
Multiple background images
How to define more than one background image on an element 		No No Yes Yes No Yes
 
box-sizing
 No Yes -moz- Yes -webkit- -webkit- Yes Yes

Mozilla requires -moz-box-sizing and supports an additional value. Safari 3.1+ -webkit-box-sizing.

No browser supports box-sizing in combination with min- or max- width or height.

  • Safari iPhone gives the border-box a smaller font size. This is a bug.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
content
on any element, without reference to the :before/:after pseudo-elements. 		No No Incomplete Incomplete Yes Yes
  • Safari and Chrome support content for images, but not for text.
opacity
 filter Yes Yes Yes Yes No

Standard syntax; Microsoft syntax.
resize
Allow the user to resize an element. 		No No Yes Incomplete Incomplete No No
  • Safari 3.1 and Chrome don’t allow you to resize the element to less than its original width, something that Safari 3.0 does allow.
text-overflow
Shows ellipsis characters when a text flows outside its box. 		No Yes No Yes Yes -o- Buggy

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 No Yes Yes No Yes Yes Yes
 
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

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. Backgrounds; a complete test of the CSS3 spec (nothing’s supported yet, except background-size with -webkit- and -o-).
  4. Grids (CSS3 advanced layout); not supported yet.

These compatibility tables are sponsored by

Google