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

How to trigger them, what the differences are. Contains compatibility table.
Be very, very careful.
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
Selects all elements Yes Yes Yes Yes Yes To be tested
 
Selects an element that is a child of another element No Yes Yes Yes Yes Yes To be tested
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.
Selects an element with a certain attribute No Yes Yes Yes Yes Yes To be tested
 
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
To generate content before and after an element No Yes Yes Yes Yes Yes To be tested
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.
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.
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.
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
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.
No Yes Yes Yes Yes Yes To be tested

To assign counters to headings or other elements.

Change cursor style Yes Yes Yes Yes Yes To be tested

Microsoft values don’t count for overall browser compatibility.

Incomplete Yes Almost Almost Yes Yes Yes To be tested

Incomplete: lacks 2 or more values; almost: lacks 1 value.

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.

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
A sort of border, but it doesn’t count for the box model. No Yes Yes Yes Yes Yes To be tested
Incorrect Yes Yes Yes Yes Yes To be tested
  • IE 5/6 doesn’t implement overflow: visible correctly.
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.
Incomplete Yes Yes Almost Almost Almost Yes To be tested

See page for details.

empty-cells, border-collapse, border-spacing, table-layout, caption-side Incomplete Yes Yes Yes Yes Yes To be tested

See page for detailed compatibility.

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
Selects an element that is a general next sibling of another element No Yes Yes Yes Yes Yes To be tested
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 elements No Yes Yes Yes Yes Yes To be tested
For enabled, disabled, or checked form fields. No Yes Yes Yes Yes Yes To be tested
The first element of its type. No Yes ? Yes Yes Yes Yes To be tested
An element that is the last child of its parent No Yes Yes Yes Yes Yes To be tested
The last element of its type. No Yes ? Yes Yes Yes Yes To be tested
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
Select elements according to a formula No Yes No Yes Yes Yes Incorrect To be tested
  • Opera gets totally confused in the dynamic test.
No Yes ? Yes Yes Yes Yes To be tested
No Yes ? Yes Yes Yes Yes To be tested
Select elements according to a formula No Yes No Yes Yes Yes Incorrect To be tested
  • Opera gets totally confused in the dynamic test.
An element that is the only child of its parent No Yes Yes Yes Yes Yes To be tested
The only element of its type. No Yes ? Yes Yes Yes Yes To be tested
The root element, or initial containing block. No Yes Yes Yes Yes Yes To be tested
Text selected by the user. No Yes -moz- Yes Yes Yes To be tested
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
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.
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.
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
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.
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.
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
No Yes ? -moz- -webkit- Yes Yes No Yes To be tested
No Yes ? -moz- -webkit- -webkit- No Yes To be tested
No Yes -moz- -webkit- -webkit- Yes To be tested

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

To divide one block of text into several columns, newspaper-style. No -moz- -webkit- -webkit- No To be tested
No filter No No -moz- -webkit- -webkit- No To be tested
filter Yes Yes Yes Yes Yes To be tested
Allow the user to resize an element. No No Yes Yes No To be tested

The element’s size can only be increased.

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.
Create a text-shadow. No Yes Yes Yes Yes To be tested
 
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.