Vendor-Specific Properties and Prefixes

Using CSS3 you can easily achieve plenty of cool new effects without having to use lots of JavaScript code and/or external graphics applications such as Photoshop. You can create rounded borders, add shadows to boxes, use an image as a border, and more.

CSS3 contains several new background properties that give you more control over background elements, including multiple background images, while CSS3 gradients let you display smooth transitions between two or more specified colors. New text features include text shadows and word wrap, as well as easy use of web fonts. And CSS3 lets you easily build really cool transitions, transformations, and animations

In this section you’ll get a flavor of what CSS3 can do for your web pages, and you’ll see how to effectively control CSS3’s capabilities using JavaScript.

Vendor-Specific Properties and Prefixes

CSS vendor prefixes are a way for the browser companies to add support for new or experimental CSS features before they become part of the formal CSS3 specification, or to implement features of a specification that hasn’t yet been finalized. In due course, these prefixes usually become unnecessary as the features become fully supported via their standard CSS3 nomenclature. To make sure that your pages render as you want them to in the maximum number of browsers, though, it pays to use prefixes.

The CSS3 browser prefixes you’re likely to need appear below listed

In most cases, where a prefix is necessary you take the CSS3 property as listed in the CSS3 specification and add the relevant prefix from above table for the browser in use. For example, later in this section you’ll read about CSS3 transitions. There you’ll see that, if you want to add a CSS3 transition to your page, you use the transition property with the prefixes added first:

-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
transition: background 0.5s ease;                   
                   

The user’s browser will respond to whichever version of the transition feature it understands, ignoring the rest.

Thankfully, browser manufacturers are working hard at fully implementing all of the CSS3 features, and for most modern browsers the number of properties requiring aprefix is falling quickly.