CSS3 is still in draft mode at the W3C, and will continue to be for some time to come. Meanwhile, browser developers are hungry to use proposed CSS3 properties like box-shadow. At the same time, they are very aware that the proposed implementation for any property currently in draft could change as the CSS3 specification is hammered out.

The industry's response to this has been to implement draft CSS3 properties with proprietary vendor prefixes unique to each browser. The main prefixes you need to know are:

(Note that there are more vendor prefixes than those I have listed above, but you will find that the others are rare.)

In this way, each browser can create its own interpretation of a CSS3 property without being caught out by changes; when the property enters "final" status, it is a relatively easy alteration to drop the prefix and make any other programming or support changes that may be necessary.

Often the value syntax for CSS3 properties with proprietary prefixes is the same between browsers: border-radius is a good example.

As a general rule, vendor versions of properties are written first in any style declaration, with the final expected CSS3 property at the end:

1. div#mainbox { border: 2px solid black;
2. -moz-border-radius: 5px; -webkit-border-radius: 5px;
3. border-radius: 5px; }

(In this case, other CSS3-compatible browsers support border-radius, and so will follow the property at the end of the declaration).

Vendor prefixes are an imperfect solution to the challenge of moving web standards forward as quickly as possible. Developer ignorance, combined with the rapid adoption of Chrome on the desktop and Safari for mobile devices, has led to many web designers concentrating on the –webkit and –moz prefixes, leaving other browsers that supported the same CSS3 properties with their own prefixes out in the cold.

As they share the same syntax for most CSS3 properties, there has been a broad agreement to create aliases for –webkit prefixes in other browsers: starting with Opera, but with Mozilla expected to follow suit presently. These map –webkit properties to their –o equivalents, meaning that Opera will acknowledge and interoperate with the CSS for a site that only contains –webkit declarations. The aliased properties are:

This does not mean that you should drop or ignore –o prefixes in CSS code: these equivalencies are simply intended to compensate for the ignorance of developers in future versions of Opera. More information can be found at the Opera developer site.