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

IE8b2 updates correctly, but only after you remove the focus from the test link.

• 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.

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.

• Safari iPhone doesn’t put the focus on the field. Once you’ve clicked on the field (and it has gotten the correct :focus styles) you have to click it again, or your typed text won’t appear. This is caused by the width change.

• Only IE8, FF3+ and Konqueror support the none value.
• Konqueror has a counter issue.

To assign counters to headings or other elements.

Microsoft values don’t count for overall browser compatibility.

• An iPhone does not have a cursor.

Compatibility depends only on the values block, inline, none, inline-block, and list-item.

IE7- doesn’t support a few types.

The test page also contains CSS 3 values.

IE 6 supports min-height on TD’s only.

• IE 5/6 doesn’t implement overflow: visible correctly.

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

• IE7 has a strange bug; see page.
• IE8b2 hides the green layer when you select absolute or fixed.

See page for detailed compatibility.

See page for detailed compatibility.

See page for detailed compatibility.

• 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.

• Opera doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all.

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.

Static: The browser does not update the styles when elements are added dynamically.

Firefox 2 doesn’t update the styles when elements are added dynamically.

• Opera always adds the correct styles to newly generated elements, but it doesn’t remove the styles when necessary. In practice, that means that once an element gets an nth-child style it never loses it.

• Chrome and Safari 3.1 have a bug in the dynamic test, but it’s not as clear-cut as the Opera one. Basically they seem to get confused by the (admittedly non-standard) paragraphs in the list.

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

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.

• In IE7 and lower and Konqueror scroll means local.
• Safari iPhone supports only scroll.
• No browser supports local.

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.

• Safari and Chrome support content for images, but not for text.

Standard syntax; Microsoft syntax for IE5-7, and Microsoft syntax for IE8. See page for details.

• 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.

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.