December 28, 2012
This article is an extract from the introduction of my eBook, Visual Stylin' with CSS3.
CSS3's development has very much been driven by the need of designers to achieve certain visual effects. Workarounds and hacks for these effects had become standard within the Web community. For example, before CSS3, tremendous effort was put into using graphics and code to create rounded corners; the Box Border recommendations from the W3C didn't include rounded corners, so no browser vendor was implementing them. It was up to designers to find ways to create effects like this within the constraints of the browser capabilities that were currently available.
In order to improve CSS3's design capabilities, the W3C began developing recommendations for how these features (now known collectively as CSS3) should be implemented natively in the browsers. In order to encourage browser vendors to adopt these developing recommendations quickly, the concept of vendor specific prefixes came into being.
These prefixes, prepended to CSS property names, allow vendors to experiment with W3C working drafts of new CSS properties. The browser vendors can quickly add new properties to the browser while indicating that they are interim, partial, or experimental implementations of the recommendation. In short, the idea of a VSP is that if the final recommendation is different from the vendor's experimental implementation of the working draft, the VSP will ensure old sites that used the latter version don't break.
For example, the W3C-recommended syntax for the CSS3
transform property is simply:
transform is a CSS3 feature that is still in development, and to ensure it works with the largest number of browsers and their experimental implementations, you would also add all the different VSPs for the browsers you want to support.
As you can see, VSPs always start with a hyphen, followed by the prefix name and another hyphen; then comes the actual W3C property name. Note also that, as illustrated above, the non-VSP version of the property should always be included after any VSPs, so that it will set the property at a time in the future when the property is implemented in a final, non-prefixed version. Here is a list of the prefixes and the related browsers:
As you can see, the
-webkit- prefix is used by both Safari and Chrome, because both are powered by the Webkit rendering engine.
Many CSS3 properties and features are now mature enough that browsers support the W3C non-prefixed version, and the prefixes are no longer needed. Here are the CSS3 properties used in this eBook that do or don't require VSPs.
These CSS3 properties work with W3C syntax in the latest versions of IE, Firefox, Chrome and Opera, and do not require VSPs:
These are some commonly used properties that require VSPs:
Obviously, as browsers evolve, the need for VSPs changes. For example, even as I am writing this paragraph (May 2012), a little tweet tells me that the W3C today announced that the CSS Image Values and Replaced Content Module, which includes linear and radial backgrounds, has moved to Candidate Recommendation. This puts it a step closer to finalization, so now browser vendors can start to move to the recommended implementation and drop the related VSPs. So hopefully, radial and linear gradients, and multiple backgrounds will soon no longer require VSPs. Check Can I Use for the latest information on CSS3 and VSPs.