CSS3 offers up some interesting new features that many web designers can’t wait to use. Things like nth-child, text shadow and other effects that were previously only possible using imagery. The problem that web designers are faced with at the moment is that not all browsers support all css3 selectors and declarations. So their fancy new effects may cause issues with older or non-compatible browsers. What I have aimed to do is give a clear idea of the current state of affairs in CSS3, a list of what browsers support each feature. Hopefully this will help web designers avoid any possible pitfalls with incompatibility. As a web designer I know how we all want to push the boundaries a bit and use the shiny new toys that are being made available to us. But sometimes it can  be more beneficial to hold back a bit and wait until certain features have a more widespread support.

So, without further ado, here are my findings…

Note: I am excluding IE 6 from the results as the only CSS3 declaration that is supports is text-overflow.

The list of tested Selectors:

~ selector Selects an element that is a general next sibling of another element
Advanced [attr] selectors Selects an element with an attribute whose value starts with, ends with, or contains a certain string.
:empty Empty elements
:enabled, :disabled and :checked For enabled, disabled, or checked form fields.
:first-of-type The first element of its type.
:last-child An element that is the last child of its parent
:last-of-type The last element of its type.
:not Negation of a selector
:nth-child() Select elements according to a formula
:nth-last-child() Select elements according to a formula
:nth-last-of-type() Select elements according to a formula
:nth-of-type() Select elements according to a formula
:only-child An element that is the only child of its parent
:only-of-type The only element of its type.
:root The root element, or initial containing block.
::selection Text selected by the user.
:target Element that is a target of a hash

 

The list of tested Declarations:

background-attachment States whether the background image scrolls with the document, the element, or not at all.
background-clip States whether the background covers the border-box (default), padding-box or content-box.
background-origin States whether the background originates in the border-box, padding-box (default) or content-box.
background-repeat States how the background is repeated. Note the new values space and round.
background-size States the size of the background image, in pixels, percent, or with two special values.
multiple background images How to define more than one background image on an element
border-radius Size of rounded corners
box-shadow Drop shadow
box-sizing Tweak the box model
columns To divide one block of text into several columns, newspaper-style.
gradient Fade from one colour to another
opacity Transparency
resize Allow the user to resize an element.
text-overflow Shows ellipsis characters when a text flows outside its box.
text-shadow Create a text-shadow.
text-stroke Outline text

 

The Results

Internet Explorer 7

(The equivalent of the kid that always gets picked last in PE)

Supported:

~ selector
Advanced [attr] selectors
text-overflow

Partially Supported:

background-repeat

 

Internet Explorer 8

(A step in the wrong direction)

Supported:

~ selector
Advanced [attr] selectors
box-sizing
gradient (Using filter)
opacity (Using filter)
text-overflow

Partially Supported:

background-attachment
background-repeat

 

Internet Explorer 9

(Can you really polish a turd? They have certainly thrown a lot of polish at it)

Supported:

IE 9 supports all CSS3 selectors

background-attachment
background-clip
background-origin
background-repeat
background-size
multiple background images
border-radius
box-shadow
box-sizing
opacity
text-overflow

 

Firefox 3.5

Supported:

Firefox 3.5 supports all CSS3 selectors (Supports ::selection using ::-moz-selection)

border-radius (Supports border-radius using –moz-border-radius)
box-shadow (Supports box-shadow using –moz-box-shadow)
box-sizing (Supports box-sizing using –moz-box-sizing)
columns (Supports columns using –moz-columns)
opacity
text-shadow

Partially Supported:

background-attachment
background-repeat

 

Firefox 3.6

Supported:

Firefox 3.6 supports all CSS3 selectors (Supports ::selection using ::-moz-selection)

background-size (Supports background-size using –moz-background-size)
multiple background images
border-radius (Supports border-radius using –moz-border-radius)
box-shadow (Supports box-shadow using –moz-box-shadow)
box-sizing (Supports box-sizing using –moz-box-sizing)
columns (Supports columns using –moz-columns)
gradient (Supports gradient using –moz-gradient)
opacity
text-shadow

Partially Supported:

background-attachment
background-repeat

 

Firefox 4

Supported:

Firefox 4 supports all CSS3 selectors (Supports ::selection using ::-moz-selection)

background-clip
background-origin
background-size
multiple background images
border-radius (Supports border-radius using –moz-border-radius)
box-shadow (Supports box-shadow using –moz-box-shadow)
box-sizing (Supports box-sizing using –moz-box-sizing)
columns (Supports columns using –moz-columns)
gradient (Supports gradient using –moz-gradient)
opacity
text-shadow

Partially Supported:

background-attachment
background-repeat

 

Safari 4 (Windows)

Supported:

Safari 4 supports all CSS3 selectors

background-clip (Supports background-clip using –webkit-background-clip)
background-origin (Supports background-origin using –webkit-background-origin)
multiple background images
border-radius (Supports border-radius using –webkit-border-radius)
box-shadow (Supports box-shadow using –webkit-box-shadow)
box-sizing (Supports box-sizing using –webkit-box-sizing)
columns (Supports columns using –webkit-columns)
gradient (Supports gradient using –webkit-gradient)
opacity
resize
text-overflow
text-shadow
text-stroke (Supports text-stroke using –webkit-text-stroke)

Partially Supported:

background-attachment
background-repeat
background-size

 

Safari 5 (Windows)

Supported:

Safari 5 supports all CSS3 selectors

background-attachment
background-clip (Supports background-clip using –webkit-background-clip)
background-origin
background-size
multiple background images
border-radius
box-shadow (Supports box-shadow using –webkit-box-shadow)
box-sizing (Supports box-sizing using –webkit-box-sizing)
columns (Supports columns using –webkit-columns)
gradient (Supports gradient using –webkit-gradient)
opacity
resize
text-overflow
text-shadow
text-stroke (Supports text-stroke using –webkit-text-stroke)

Partially Supported:

background-repeat

 

Chrome 4 and Chrome 5 (Both browsers react the same way)

Supported:

Chrome 4 and 5 support all CSS3 selectors

background-attachment
background-clip (Supports background-clip using –webkit-background-clip)
background-origin
background-size
multiple background images
border-radius
box-shadow (Supports box-shadow using –webkit-box-shadow)
box-sizing (Supports box-sizing using –webkit-box-sizing)
columns (Supports columns using –webkit-columns)
gradient (Supports gradient using –webkit-gradient)
opacity
resize
text-overflow
text-shadow

Partially Supported:

background-repeat
text-stroke (Supports text-stroke using –webkit-text-stroke, very buggy)

 

Opera 10.10

Supported:

Opera 10.10 supports most CSS3 selectors. It reacts strangely to :nth-child(), :nth-of-type() and :target

background-origin (Supports background-origin using –o-background-origin)
multiple background images
box-sizing
opacity
text-overflow (Supports text-overflow using –o-text-overflow)
text-shadow

Partially Supported:

background-attachment
background-repeat
background-size

 

Opera 10.53 and Opera 10.60

(The only difference between the 10.53 and 10.60 is the use of text-overflow)

Supported:

Opera 10.53 and Opera 10.60 support most CSS3 selectors. They react strangely to :nth-child() and :nth-of-type().

background-attachment
background-origin
background-repeat
background-size
multiple background images
border-radius
box-shadow
box-sizing
opacity
text-overflow (Opera 10.53 supports text-overflow using –o-text-overflow)
text-shadow

Partially Supported:

:target
background-clip

 

Conclusion

Chrome and Safari are your best offerings for CSS3 support. Both support all Selectors and most Declarations, though declaration support is often through –webkit- specification.

The CSS3 declarations that I would advise people to start introducing into their designs are text-shadow, opacity and box-shadow. Text-shadow is supported in all but IE and degrades gracefully in IE without causing issues. The same goes to box shadow though you will need to implement –moz- and –webkit- to cater for Firefox Safari and Chrome. Opacity can be used by all browsers using the filter technique for IE.

I would also advise switching your browser of choice to Chrome if you haven’t done so already. In a previous post I benchmarked the speed of modern browsers and Chrome lead the field by quite a margin. With its wide support of css3 it is definitely the best browser on offer today.