CSS3 support charts

While it might seem a little premature to be delving into CSS3 support in current browsers, when CSS2 support is far from perfect in some of them, both Safari and Mozilla, particularly Safari, have been adding support for some of the highest visual impact features of CSS 3. What's good to see about the support that is out there is that it inherently supports the idea of "progressive enhancement". By using text-shadow, border-radius, box-shadow and the like, where a browser supports these, the viewer sees the design in all its CSS3 glory. Where the feature is not supported, they simply don't know the difference.

I've put together some tests for the most commonly implemented properties of CSS3, and a chart of which browsers (Safari 2/3/iPhone, Mozilla, Opera 9, IE7) support them.

The test and charts are here.

All of the features can be used without much concern for their impact on usability and accessibility.

One case in which you need to be mindful is in the use of multiple backgrounds. In CSS 3 you can have several background images layered on top of one another for the same element. You do this by using comma separated values for the background property like this

background: url('backimages/green.png') no-repeat, url('backimages/orange.png') no-repeat, url('backimages/purple.png') no-repeat, url('backimages/aqua.png') no-repeat top left;

Unfortunately, Mozilla and Opera (but not IE 7) display no background image at all in this case. IE 7 displays the first image, as you might expect, but the first image is the front most one you want to display, which may not be the one you want to display if only one is to be displayed.

Adding a background image in the same statement doesn't work in Opera or Mozilla either.

As a workaround, create a statement with the same selector before this one in the CSS, then give it the background image you want to display if only one will be displayed. Because the specificity of this statement is lower than one with the same selector which follows, where the multiple background is supported the browser will use that property.

This still leaves the issue of what to do about IE, when the first background image is not the one you want displayed. If nothing else, make sure you have a background color, so that your text is legible.

On a related note, I recently wrote an article on just what screen real estate is available on the iPhone for pages in Safari, and about Safari's scaling behavior, and ways to work with it.

You might also find these sites useful if looking for more information about CSS 3 support in various browsers

CSS3.info "Everything you need to know about CSS 3" (and were too afraid to ask?)
Mozilla's documentation of their extensions to CSS
Qooxdoo's Webkit style documentation
Make the most of the iPhone SDK (we know now that the assumption that iPhone Safari has the same webkit as Safari 3 is not true right now. Surely some time soon via software upgrades?)
iPhoneWebDev. A mailing list, bog, examples and resources.

Any other good resources out there you know of? Leave a comment.

thanks

j