Stylin’ with CSS

The Blog and Books of Charles Wyke-Smith

Vendor Specific Prefixes

by Charles Wyke-Smith

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: skewX(-45deg);

However, 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.

-moz-transform: skewX(-50deg);
-webkit-transform: skewX(-50deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
transform: skewX(-45deg);

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:

  • -webkit- | Safari
  • -webkit- | Chrome
  • -moz- | Firefox
  • -o- | Opera
  • -ms- | Microsoft

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:

  • border-radius
  • text-shadow
  • box-shadow
  • opacity
  • hsla(color values)
  • rgba(color values)
  • @font-face

These are some commonly used properties that require VSPs:

  • border-image
  • linear-gradient
  • radial-gradient
  • transform
  • transform-origin
  • translate
  • transition
  • background*
  • background-image*
  • * for multiple background images

See Peter Beverloo’s complete list of CSS 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.

Additional Information

There are various JavaScript helpers that will automatically add the VSPs needed for the users browser when the page loads. Then you don't have to add VSPs to your CSS, but simply use the W3C-approved version (e.g. transition:...) and the helper will add the appropriate VSP. Here are two that work well—simply add the file to the head of your pages. (Note that you can also use a CSS preprocessor such as Sass or Less to add VSPs and I will look at working with CSS pre-processors in a future article.)

JavaScript VSP helpers

Articles explaining the issues around VSPs

Tags

Leave a comment

More posts