Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

If you aren’t aware of the browser extensions, these are CSS styles with a vendor specific prefix. Since CSS3 is not fully supported yet, we must use these extensions. They are as follows:

  • Mozilla/Firefox/Gecko: -moz-
  • Webkit (Safari/Chrome): -webkit- (note: Some webkit prefixes only work in Safari, and not Chrome)

As you might have guessed, one of the downsides of using these extensions is the fact that we must use all of the above prefixes to get the CSS3 style to render in Firefox, Safari, and Chrome. And no surprise to anyone, IE does not support CSS3 or do they have extensions like the other leading browsers. Alright, enough talking, lets dive right in! Note: styles without a prefix are the actual W3 specification proposal.