CSS Vendor Properties: The Complete Reference

According to the CSS specification, CSS identifiers may begin with '-' (dash) or '_' (underscore). These identifiers (keywords and property names) are reserved for vendor-specific extensions and have the following format:

Vendor Prefixes

CSS vendor prefixes were introduced for the purposes of testing some new or experimental CSS implementations. They could be used:

• If the property is a vendor-specific extension (not defined in a CSS specification/module)
• If the property is part of a CSS specification or module that hasn't received Candidate Recommendation status from the W3C
• If the property is a partial implementation of a property that is defined in a CSS specification or module

Every web browsing software vendor was assigned its own prefix. At the time of writing, the following prefixes are known to exist:

CSS Vendor Properties Usage

Quite recently you could stumble upon the CSS containing one or more vendor properties (properties with vendor prefixes), for example:

.rounded
 {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px; 
 }

(Note the order, the vendor-prefixed properties should always come before non-vendor-prefixed properties.)

Let's consult the MDN browser compatibility data or caniuse for the border-radius property and explain, that it means.

As we can see:

• -webkit-border-radius is required only by Chrome versions prior to 4.
• -moz-border-radius is required only by Firefox versions prior to 4.
• -ms-border-radius is not needed because it was never implemented.
• -o-border-radius never existed too.
• border-radius is supported by all modern browsers.

So, just to summarize: you need vendor prefixes only if you need to support these old browser versions. If not, the CSS code from above should be rewritten as:

.rounded
 {
  border-radius: 20px; 
 }

Are CSS Vendor Properties Not Needed Anymore?

Basically, for properties, recommended by W3C, they are not needed except the situations when you need to support some outdated or specific mobile browser. Use caniuse.com or MDN to explore browser compatibility of needed properties and decide separately.

For example, a quick search on caniuse for the most popular vendor-prefixed properties shows that at the end of 2019:

• background-clip: no vendor prefix needed
• border-radius: no vendor prefix needed
• box-shadow: no vendor prefix needed
• box-sizing: no vendor prefix needed
• column-count: no vendor prefix needed
• display: flex: -ms-flexbox needed for Internet Explorer (usage: ~1.5%)
• gradient: no vendor prefix needed
• input-placeholder: no vendor prefix needed
• linear-gradient: no vendor prefix needed
• transform: no vendor prefix needed
• transition: no vendor prefix needed
• user-select: -webkit- required by Safari and Chrome for iOS

The Future of Vendor Prefixes

Mozilla's position: "Developers should wait to include the unprefixed property until browser behavior is standardized… Browser vendors are working to stop using vendor prefixes for experimental features. Web developers have been using them on production Web sites, despite their experimental nature. This has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites."

Opinion from WebKit: "Many websites came to depend on prefixed properties. They often used every prefixed variant of a feature, which makes CSS less maintainable and JavaScript programs trickier to write. Sites frequently used just the prefixed version of a feature, which made it hard for browsers to drop support for the prefixed variant when adding support for the unprefixed, standard version… The current consensus among browser implementors is that, on the whole, prefixed properties have hurt more than they’ve helped. So, WebKit’s new policy is to implement experimental features unprefixed, behind a runtime flag. Runtime flags allow us to continue to get experimental features into developers’ hands while avoiding the various problems vendor prefixes had."

Tools

To make your life easier, you may consider using the next tools for CSS processing:

• Autoprefixer, which parses CSS and adds vendor prefixes to CSS rules using values from Can I Use. Recommended by Google and used by Twitter and Taobao.
• -prefix-free, which lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.

Conclusion

Altough browsers that don't recognize some CSS rules just ignore them and move on to the next rule, using redundant CSS properties makes your code clunky and possibly could emit warnings to browser developer console.

We recommend to use only unprefixed properties, having W3C Candidate Recommendation status. Tools mentioned above could help to keep your CSS clean. For special cases consult caniuse.com.