www.fgks.org   »   [go: up one dir, main page]

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 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b 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. IE8b1 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
 
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
Multiple classes
Whether an element can support two or more class names 		Buggy Yes Yes Yes Yes Yes
 
:hover and :active
An element in a hovered (mouseover) or active (mousedown) state. 		Minimal Incomplete Yes Yes 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.
:first-child
An element that is the first child of its parent 		No Static Almost Static Yes Static Yes 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 Yes Yes

CSS 2 declarations
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
counters
 No Yes Yes Yes Yes Yes

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

Microsoft values don't count for overall browser compatibility.
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

IE7- doesn't support a few types. IE8b1 supports all types, but has problems with images.

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 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b 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 Yes Yes Yes Yes

IE 5/6 doesn't support position: fixed
Table columns
 Incomplete Yes Incomplete Incomplete Incomplete
See page for detailed compatibility.
Table declarations
empty-cells, border-collapse, border-spacing, table-layout, caption-side 		Incomplete Almost 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 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7

CSS 3

Specifications.

CSS 3 selectors
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win 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 No Yes Almost Almost Almost

Safari, Opera, and Konqueror have slight problems with the dynamic test.
:before and :after
To generate content before and after an element 		No Incomplete Yes Yes Yes Yes
IE8b1 doesn't accept images as content.
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win 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 Yes Yes
:enabled, :disabled and :checked
For enabled, disabled, or checked form fields. 		No Yes Yes Yes Yes
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
:empty
Empty elements 		No Static Yes Static Yes Static Static

Static: The browser does not update the styles when content is added to an initially empty <div>.
::selection
Text selected by the user. 		No -moz- Yes No Yes
Special Mozilla syntax.
:last-child
An element that is the last child of its parent 		No Static Yes No Yes Static Yes

Firefox 2 and Opera don'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 Static Yes

Firefox 2 and Opera don'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.
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
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win Opera 9.5b Konqueror 3.5.7
background-attachment
on elements other than body 		Incorrect Incomplete Incomplete Incomplete 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.
Multiple background images
How to define more than one background image on an element 		No No Yes No Yes
 
box-sizing
 No -ms- -moz- Yes -webkit- Yes Yes

Mozilla requires -moz-box-sizing and supports an additional value.

IE8 requires -ms-box-sizing.

No browser supports box-sizing in combination with min- or max- width or height.
Columns
Divide a box into several columns. 		No -moz- -webkit- No No
 
content
for :before/:after 		No Incomplete Almost Incomplete Almost Almost
 
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

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
 
Selector IE 5.5 IE 6 IE 7 IE8b1 FF 2 FF 3b4 Saf 3.0 Win Saf 3.1 Win 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.