CSS3 Vendor Prefixes

-moz-     /* Firefox and other browsers using Mozilla's browser engine */
-webkit-  /* Safari, Chrome and browsers using the Webkit engine */
-o-       /* Opera */
-ms-      /* Internet Explorer (but not always) */ 


These browser prefixes are needed as the browsers experiment and test out their implementations of the newer CSS3 properties. Sometimes all the prefixes are not always needed, but it usually does not hurt to include them, as long as you make sure to put the non-prefixed version last.

-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px; 

There are several reasons why this is important, but I’m not going to get into that here. Just make it a rule to always include the non-prefixed version and put it at the end.

Some properties are so far along in development, that some browsers are dropping the prefix. Border-radius is one property that is pretty well developed at this point. The latest versions of major browsers all seem to support it without the vendor-prefixes. Keeping them in the code, however, allows you to make sure users who don’t update their browsers, will still be served.

Internet Explorer

Internet Explorer 9 supports many (but not all) of the favorite CSS3 properties. You can use border-radius without any vendor-prefix, for example.

For IE versions 6-8 (which includes almost half of all users browsing the web, unfortunately) you need to to make sure your design works OK without the CSS3. For three properties: border-radius, linear-gradient, and box-shadow, you can use CSS3Pie, which I will be discussing in my next post. It is a great little file you can add to your home directory (based on javascript) which makes these properties work in Internet Explorer versions 6-8.

If you install it in your site, you can add this code after your other defintions:
behavior: url(/PIE.htc);

Leave a Reply

Your email address will not be published. Required fields are marked *