Make CSS 3 Work in More Web Browsers

If you want to use HTML5 and CSS 3 in the design of your website, you should know that both HTML5 and CSS 3 are still under development. The CSS specification has not yet been approved by the W3C, but many browser developers have already implemented parts of the working drafts of CSS 3.

When browser companies implement parts of a working draft they call it experimental CSS and they usually include the browser name in the style rule.

For Safari and Chrome, you need to add the –webkit prefix to each style rule. For Firefox, add –moz. For the Opera web browser, add –o. If you want to follow the W3C recommendations (even though they aren’t yet approved), don’t add anything to the beginning. Here’s an example of a transition and a transformation for each of these four options:

The code for the Safari web browser looks like this:

-webkit-transition-timing-function: linear;
-webkit-transform: scale(1.5, 2);

For Firefox, here’s what you would use to create the same transformation:

-moz-transition-timing-function: linear;
-moz-transform: scale(1.5, 2);

In the Opera web browser, here’s what you would use:

-o-transition-timing-function: linear;
-o-transform: scale(1.5, 2);

The current W3C recommendation is simply this:

transition-timing-function: linear;
transform: scale(1.5, 2);

Not all browsers implement experimental rules in exactly the same way. For instance, here are two rules for a linear gradient:

-webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999));
background-image: linear-gradient(top, #444444, #999999);

dummies

Source:http://www.dummies.com/how-to/content/make-css-3-work-in-more-web-browsers.html