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 prefixes are as follows:
| Prefix | Browser | Example | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
-moz |
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. (Values for border-radius are measured in standard units, such as 5px). In a reducing number of circumstances, they are very different.
As a general rule, vendor versions of properties are written first in any style declaration, with the final expected CSS3 property at the end:
- div#mainbox { border: 2px solid black;
- -moz-border-radius: 5px; -webkit-border-radius: 5px;
- 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).
Obviously supporting the proprietary versions of CSS3 properties for all browsers takes quite a bit of typing, along with the time taken in researching just how each browser expects the associated value to be written. One possible solution is to produce the CSS dynamically, using PHP. Another is to write the basic CSS code and use an online application to generate the appropriate prefixes, copying and pasting the resulting code into your site.