What are vendor-specific extensions?

There are some CSS properties which are only supported by specific rendering engines, e.g. -webkit-box-shadow, -moz-border-radius, or -o-transition-property. The post CSS references for Mainstream browsers has links which list other vendor specific extensions.

Some people assert these properties exist for testing properties described in draft versions of a future standard, but many of these extensions exist to give special functionality available only on a specific rendering engines (e.g iphone web-apps, android web-apps, etc.) Many people, notoriously Andy Clarke, support using vendor-specific extensions as much as possible without mentioning the caveats.

When should you use vendor-specific extensions?

• If your website is ONLY rendered on a specific browser

  This is not surprising as there are lots of websites that are nothing more than iphone webapps, or those that sell Mac products (or those that support only IE or Opera Mini.) If your website is one of those, use vendor specific extension by all means (while being mindful of the caveat mentioned below.)

• If you have access to your website continuously throughout its existence

  The disadvantage of using vendor-specific extensions is that they can be deprecated or their usage can change significantly on the whim of the vendor (I am using “whim” loosely). So, you need to be able to access the website you are using it on, continuously so that you can update it if that occurs.

• If it creates subtle enhancements in a browser without significant loss of usability/accessibility in other browsers.

  For example, -border-radius is a popular vendor-specific extension, and by not using it, there is not a significant loss to readers of your website. In contrast, -multiple-column-width, when not supported, will render your text in only one column which might hinder usability of the website on browsers that do not support that extension.

• If it is being discussed to be supported in future versions of CSS.

  Use vendor-specific extensions only if the property exists in a W3C Recommendation or a Working Draft as a supported property (though not necessary if your website needs to work on only one browser).

For graceful degradation, you can use Modernizr which outputs a list of supported properties as multiple classes on the body element. You can then use these class selectors and declare vendor-specific extensions for them in your CSS file.

There is a debate on the W3C mailing list on detecting support for a property without using JavaScript detection like Modernizr. But, I think it is a long way away from being included in any W3C Working Draft.