Vendor-specific Properties

Share this article

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.
Table 1. Vendor Extension Prefixes
Prefix Organisation
-ms- Microsoft
mso- Microsoft Office
-moz- Mozilla Foundation (Gecko-based browsers)
-o- Opera Software
-atsc- Advanced Television Standards Committee
-wap- The WAP Forum
-webkit- Safari (and other WebKit-based browsers)
-khtml- Konqueror browser
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:
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

What are vendor-specific properties in CSS?

Vendor-specific properties in CSS are unique properties that are specific to a particular browser or vendor. These properties are typically used to take advantage of exclusive features or functionalities offered by specific browsers. They are usually prefixed with a vendor prefix, which is a short code that identifies the browser or vendor. For example, ‘-moz-‘ for Mozilla Firefox, ‘-webkit-‘ for WebKit browsers like Safari and Chrome, ‘-ms-‘ for Microsoft browsers, and ‘-o-‘ for Opera.

Why are vendor prefixes used in CSS?

Vendor prefixes are used in CSS to ensure that new, experimental, or non-standard CSS properties will not conflict with the existing CSS properties or with the future updates of CSS. They allow browser vendors to add new features before these features are fully standardized across all browsers. This way, developers can experiment with new features and provide feedback to the standards bodies.

How can I use vendor-specific properties in my CSS code?

To use vendor-specific properties in your CSS code, you need to add the vendor prefix before the property name. For example, to use the border-radius property for a WebKit browser, you would write ‘-webkit-border-radius’. Remember that vendor-specific properties should be used as a last resort when standard CSS properties do not provide the functionality you need.

Are vendor-specific properties considered good practice?

While vendor-specific properties can be useful in some cases, they are generally not considered good practice. They can lead to code that is difficult to maintain and that does not work consistently across all browsers. It’s recommended to use standard CSS properties whenever possible and only use vendor-specific properties when absolutely necessary.

What happens if a browser does not recognize a vendor-specific property?

If a browser does not recognize a vendor-specific property, it will simply ignore it. This means that the property will have no effect in that browser. This is why it’s important to always provide a fallback using standard CSS properties.

How can I ensure my CSS code is compatible with all browsers?

To ensure your CSS code is compatible with all browsers, you should always use standard CSS properties whenever possible. When you need to use a vendor-specific property, make sure to include all the vendor prefixes for the browsers you want to support. Additionally, always provide a fallback using standard CSS properties.

Can vendor-specific properties affect the performance of my website?

Yes, overuse of vendor-specific properties can potentially affect the performance of your website. Each vendor-specific property requires the browser to do additional processing, which can slow down your website. Therefore, it’s recommended to use them sparingly and only when necessary.

Are vendor-specific properties still relevant with the advent of CSS3?

With the advent of CSS3, the need for vendor-specific properties has decreased. Many features that previously required vendor prefixes are now standardized in CSS3. However, there may still be cases where vendor-specific properties are necessary, especially when dealing with older browsers.

How can I find out which vendor-specific properties are supported by different browsers?

There are several online resources where you can find out which vendor-specific properties are supported by different browsers. One of the most comprehensive is Can I Use, which provides up-to-date compatibility tables for CSS properties, including vendor-specific ones.

What is the future of vendor-specific properties?

The future of vendor-specific properties is uncertain. With the ongoing standardization of CSS, the need for vendor-specific properties is decreasing. However, they are likely to remain a part of the web development landscape for the foreseeable future, especially for developers who need to support older browsers.

Adam RobertsAdam Roberts
View Author

Adam is SitePoint's head of newsletters, who mainly writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week