CSS contents and browser compatibility

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

An earlier version of this page has been translated into Brazilian Portuguese.

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

Specification.

CSS 2 selectors
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.51 Konqueror 3.5.7
* 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 Static Yes Static Yes Yes

IE 7, Firefox 2 and Safari don’t correctly update styles after elements have been added dynamically. IE8b2 does, 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
 
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.51 Konqueror 3.5.7
: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 Yes Yes Incomplete Yes Almost
  • IE 5/6 supports both only on links. IE 7/8 supports :hover, but not :active, on all elements.
  • Konqueror removes the :active styles almost immediately.
  • These pseudo-classes are hard to test on the iPhone. Clicking on the test link gives it the hover styles; until you click on another link. (This is consistent with the mouseover/out implementation of the iPhone.) The active styles aren’t supported.
:first-child
An element that is the first child of its parent 		No Static Almost Static Yes Static Yes Static Yes Yes

IE7, Firefox 2 and Safari don’t update the styles when elements are added dynamically. IE8b1 does, but only after you remove the focus from the test link.
:focus
Form fields that receive user focus 		No Yes Yes Yes Buggy Yes Yes
  • Safari iPhone doesn’t allow you to type in text in the last form field. The other two work fine.

CSS 2 declarations
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.51 Konqueror 3.5.7
content
for :before/:after 		No Almost Incomplete Almost Incomplete Almost Almost
 
counters
 No Yes Yes Yes Yes Yes

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

Microsoft values don’t count for overall browser compatibility.

  • An iPhone does not have a cursor.
display
 Incomplete Almost Yes Incomplete Yes Yes Yes Yes

Compatibility depends only on the values block, inline, none, inline-block, and list-item.
List styles
Types, image, position 		Incomplete 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

IE 6 supports min-height on TD’s only.
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.51 Konqueror 3.5.7
outline
A sort of border, but different 		No Yes Yes Yes Yes Yes
overflow
 Incorrect Yes Yes Yes Yes Yes
  • IE 5/6 doesn’t implement overflow: visible correctly.
position
 Incomplete Yes Buggy Yes Yes Incomplete Yes Yes

IE 5/6 and Safari iPhone don’t support position: fixed

  • IE8b2 hides the green layer when you select absolute or fixed.
Table columns
 Incomplete Yes Yes Incomplete Incomplete Incomplete
See page for detailed compatibility.
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 		No Incomplete Yes Incomplete Almost Yes Yes Yes
Selector IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.51 Konqueror 3.5.7

CSS 3

Specifications.

Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7
~ 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
 
:first-line and :first-letter
The first line or first letter of an element 		Yes Yes Almost Yes Almost

Safari and Konqueror have slight problems with the dynamic test.
Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7
:not
Negation of a selector 		No Yes Yes Yes Yes
:root
The root element, or initial containing block. 		No Yes Yes Yes Yes
:target
Element that is a target of a hash (page.html#testHash) 		No 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
Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7
:empty
Empty elements 		No Static Yes Static Yes Incomplete 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 Static Yes Yes

Firefox 2 doesn’t 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

Firefox 2 doesn’t update the styles when elements are added dynamically.
:nth-child() and :nth-of-type()
Select elements according to a formula 		No No No Yes Static Yes

Opera doesn’t update the styles correctly when elements are added dynamically.
::selection
Text selected by the user. 		No -moz- Yes Untestable Yes Yes
Special Mozilla syntax.
Media queries
Allows you to define blocks of styles that only take effect on certain monitor sizes. 		No No Static Yes No

Safari assigns the styles statically on page-load and doesn’t update them.

CSS 3 declarations
Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7
background-attachment
on elements other than body 		Incorrect Incomplete Incomplete Incomplete No Incomplete Incorrect

scroll and fixed are CSS 2 values, but local is a CSS 3 value. It’s vital, so I’m testing CSS 3 compatibility here.

  • Safari iPhone supports only scroll.
Multiple background images
How to define more than one background image on an element 		No No Yes No Yes
 
box-sizing
 No Yes -moz- Yes -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.
Columns
Divide a box into several columns. 		No -moz- -webkit- No No
 
Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b Konqueror 3.5.7
content
on any element, without reference to the :before/:after pseudo-elements. 		No No Incomplete Yes Yes
 
opacity
 filter No Yes Yes Yes No

Standard syntax and Microsoft syntax.
resize
Allow the user to resize an element. 		No No Yes Incomplete No No No

Safari 3.1 doesn’t allow you to resize the element to less than its original width, something that Safari 3.0 does allow.
text-overflow
Breaks off text when it goes outside the box. 		No Yes No No Yes No 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 Yes
 
Value IE 5.5 IE 6 IE 7 IE8b2 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win iPhone 3G Opera 9.5b 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.