I’ve been working on a couple projects lately that “require” the use of CSS3. I put the word in quotes as there are ways to accomplish certain techniques without the use of CSS3, but they are outdated and, quite frankly, CSS is just plain easier (read: faster) to use. Unfortunately, and here’s the really fun part, not all browsers support all properties the same. Whoo hoo for web standards (insert sarcastic tone here)! Each browser has it’s own prefix that must be used and even then, not all properties are supported by the latest browser versions (curse you IE!!!).
The prefixes are:
- Firefox: -moz-
- Chrome/Safari: -webkit-
- Internet Explorer: no prefix for IE9+
- Opera: -o-
I was going to put together a fancy table showing which properties are supported by each browser, but frankly there’s plenty of that out there already. Instead, here’s some links to great CSS3 information and browser compatibility:
- CSS3 Info: General Information and Function Preview
- CSS3 Maker: Select CSS3 settings and it spits out the code with prefixes attached!
- Border Radius Maker: Create live border-radius code.
- CSS3 Please: Set several CSS3 functions at the same time with live viewer.
- CSS3 Generator: Live edits to CSS3 properties.
- CSS3 Gradient Generator: Set background gradients.
- CSS-Tricks: Chris Coyier is one of the best CSS gurus around!
There are a ton more out there, but these are some of the best I’ve seen. As I find more, I’ll link them here. What sites have you found to help you with your CSS3 needs? List your favorites in the comments!