Vendor-specific Properties

Vendors—browser makers—are free to implement extensions to the CSS specifications that, in most cases, are proprietary to their browser. They may do this for a number of reasons, such as adding new features for users, or for experiments and debugging. Most often, though, the extensions are used to release and test browser features that have been developed in the preparation of W3C drafts that have not yet reached Candidate Recommendation status—the extensions allow these new properties to be widely tested before they become available as standard CSS properties. In order to accommodate the release of vendor-specific extensions, the CSS specifications define a specific format that vendors should follow. The format is quite simple: keywords and property names beginning with – (dash) or _ (underscore) are reserved for vendor-specific extensions. As such, vendors should use the following formats:

'-' + vendor specific identifier + '-' + meaningful name

'_' + vendor specific identifier + '-' + meaningful name

This approach allows any vendor-specific extension to coexist with any future (or current) CSS properties without causing conflicts because, according to the W3C specifications, a CSS property name will never begin with a dash or an underscore: “An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus, typical CSS implementations may not recognize such properties, and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions.” A number of extensions are known to exist. Their prefixes are outlined in Table 1.

Use these Extensions with Care! Even though vendor-specific extensions are guaranteed not to cause conflicts (unless two vendors happen to choose the same identifier, of course), it should be recognized that these extensions may also be subject to change at the vendor’s whim, as they don’t form part of the CSS specifications, even though they often mimic the proposed behavior of existing or forthcoming CSS properties. Although these extensions can be useful at times, it’s still recommended that you avoid using them unless it’s absolutely necessary. It’s also worth noting that, as is usually the case with proprietary code, the extensions will not pass CSS validation.

If you must use extensions, you should use those that are closely related to equivalent CSS properties (be that CSS1, 2, or 3), so that you can switch to the standard property later on, and remove the extension when the browser implements the correct specification. Bearing this in mind, let’s go back a few years and take as an example the opacity property, which is part of CSS3 (Candidate Recommendation May 2003), which few browsers actually supported (opacity was implemented in Firefox 1.0, Opera 9, and Safari 1.2). Therefore, authors resorted to using vendor-specific extensions to cater for the lack of CSS3 opacity support at the time. Gecko-based browsers (like Mozilla) used the –moz-opacity property, and Safari 1.1 used -khtml-opacity. Internet Explorer versions 5.5 and above used the non-standard filter property. Bringing together the above extensions, the following method was (and is still) commonly used to apply opacity to a range of browsers:

.test{
  background: red;
  /* IE filter extension */
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
  width:100%;                /* Required for IE filter */
  -moz-opacity: 0.6;         /* Mozilla extension */
  -khtml-opacity:0.6;        /* Konqueror extension (Safari 1.1)*/
  opacity: 0.6;              /* the correct CSS3 syntax */
}

In the code fragment above, Internet Explorer will use the filter property and ignore the other opacity declarations. Older Gecko browsers that don’t understand the CSS3 opacity property will respect the –moz-opacity property instead, and Safari 1.1 will respect the -khtml-opacity property. Finally, if it’s supported, the CSS3 opacity property will be respected by other browsers and browser versions. Of course, a browser that doesn’t support element opacity will ignore the lot. The Internet Explorer filter property is a proprietary Microsoft extension to CSS that clearly doesn’t follow the correct naming rules for vendor-specific extensions. On the other hand, the Mozilla and Safari (-moz-opacity and –khtml-opacity) properties do follow the rules, and although the code won’t validate, you can be sure these properties will be relatively safe from conflicts. Even though browsers such as Firefox, Opera, and Safari eventually implemented the CSS3 opacity property, the style rules like the one in the example above still continued to work, ensuring a seamless transition between the old and the new. (Note that Konqueror versions up to and including 3.5.4 do not support CSS3 opacity.) As you can see, extensions can be useful, and can provide a measure of longevity; however, it’s not advisable to rely on the availability of extensions. It’s also possible that CSS3 properties may be changed before they become the standard. Therefore, as the W3C states, “Authors should avoid vendor-specific extensions.” Due to the very nature of vendor-specific extensions, they’re not well documented for public use, so it’s difficult to provide full and accurate listings of all the available extensions. The following links may be used as a guide, but we urge you to carry out your own research if you want to use these extensions:

• Internet Explorer CSS Attributes: Index
• CSS Reference: Mozilla Extensions
• CSS3 Columns in Mozilla
• Safari CSS Reference
• Webkit CSS Styles
• Opera 9 CSS Support
• Opera CSS Extensions

As we already mentioned, we don’t recommend that you use these extensions in a real application. It’s fine to use them for testing purposes, and for trying out CSS properties that haven’t been implemented yet. This will prepare and educate you for the time when the correct CSS syntax becomes available for general use. While an explanation of all the properties is beyond the scope of this book, we will look at a few that you might find useful, and investigate a few extensions that you might find in use elsewhere.

Frequently Asked Questions about Vendor-Specific Properties