CSS3 Now – Properties That Won’t Break Your Site in Older Browsers

Whilst researching the subject, I have found myself putting together an overview of all the CSS3 properties that are safe to use today. By ‘safe’ I mean properties that can be used for progressive enhancement that fallback without difficulty for those browsers that do not offer support.

Link: CSS3 Now

Notes

You will notice that not all CSS3 properties are included. The rationale behind which to include/exclude was based on simplicity of fallback. Spending large amounts of time creating workarounds for something that only 35% of visitors will see seems like a false economy to me. Multiple-columns is a case in point; the effort to create a fallback for these outweighs any benefits they may present, in my opinion. All the included properties rely on adding just a few extra lines of code to your stylesheet.

The percentages were calculated by taking the stats provided by Net Market Share for supported browsers and adding them together. This gives a much lower, and arguably more realistic figure than the Find Me By IP grid which gives each browser equal weighting.

The illustrations of the properties are styled live rather than being represented with static images, so you will only be able to view them properly in a browser that offers full support. At the time of writing this means a WebKit browser (Chrome, Safari, Mobile Safari or the Android browser), although Firefox 4 is nearly upon us and that will work too.

I haven’t included the use of CSS3 selectors for certain visual effects, since fallbacks for these tend to be fiddly, although :nth-child for zebra striping almost made it through…

If anyone thinks I’ve missed a property, let me know in the comments, and if it fits in with the rest, I’ll add it in!