CSS Vendor Prefixes

When dealing with CSS, we undoubtedly come across vendor prefixes. Even though they are so widely used, there is still some unclarity regarding when they should be used and even why they should be used at all. In this post, I answer -

• What exactly are CSS vendor prefixes?
• Why do we need to use them?
• How do we properly use them?
• Which properties do we need to use them for?

What are CSS Vendor Prefixes? #

CSS vendor prefixes are are a string of characters relating to specific browser engines that we place before a CSS property name. They can have either of the following formats -

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

Here are some popular browsers and their corresponding identifiers -

Prefix	Browser(s)
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

So, for exmaple, a Firefox prefix for the transform property will be written as -

.example {
  -moz-transform: value;
}

Although they are typically used before the property name, they can also be used to prefix specifc parts of the property value, as is shown in the exmaple below.

Why do we use them? #

Before new properties are formally added to CSS, browsers have the ability to test them out using their own methods of implementation.

For example, when gradient backgrounds were first introduced, different browsers required different syntax to implement the same effect. To create a simple black to white gradient effect, we had to write -

.example {
  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #000 0%, #fff 100%);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #000 0%, #fff 100%);

  /* IE 6 - 9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );

  /* IE 10+ */
  background: -ms-linear-gradient(top, #000 0%, #fff 100%);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #000 0%, #fff 100%);
}

In order to allow this differing implementation between browsers during the testing phase, the vendor-prefixing policy was introduced in CSS2.1. Each browser engine has it's own prefix, which, combined with the property name, essentially acts as its own property. Each browser only recognises properties with its own prefix and ignores the others.

This avoids any clashes if and when the property becomes official. At this stage, when we write the unprefixed property name alone, it should be implemented in the same way across browsers.

.example {
  background: linear-gradient(top, #000 0%, #fff 100%);
}

Although it may be a bit of a hassle to deal with them, vendor prefixes allow us to test out new features earlier than we would be able to if we had to wait for standardisation.

How do we use them? #

The proper way to use vendor-prefixed properties is to place them before the unprefixed property.

.example {
  -webkit-animation-name: slidein;
  -o-animation-name: slidein;
  -ms-animation-name: slidein;
  -moz-animation-name: slidein;
  animation-name: slidein;
}

We do this to take advantage of the cascading nature of CSS. Browsers will use the last declared version of a property they can understand. By putting the unprefixed version last, we ensure that, when browsers eventually support the official property, that is what they will use.

Which properties need a prefix? #

The list of properties we need to use vendor prefixes for is always changing. One place to start is looking at the official property index. If a property is not on there, it may be because it is still in the testing phase and it might be a good idea to use the vendor prefixes.

However, this is not the case for all properties, and not all browsers use a prefixed version of a property. An example of this is the border-radius property. Even though it is not on the official property index, the unprefixed version is supported by all modern major browsers. Only a small percentage of Webkit and Mozilla browsers ever needed the prefixed versions, and Opera and IE never used a prefixed version.

Therefore, for a more current idea of which properties need a prefix, caniuse.com is the best place. Using their data, I created a site, "Which Vendor Prefix?", that displays all the properties that need (or ever needed) a vendor prefix. It tells you which versions of the browser needs a prefixed version of the property to work, and you can decide whether to use a prefix or not base that. For example -

Keep calm and autoprefix #

Keeping track of which properties need to be prefixed can be confusing and taxing on your time. Luckily, there are ways to get around having to manually write each vendor prefix.

• CSS Preprocessor Mixins, e.g. Bourbon, Compass
• Prefixr.com: paste in your css and it adds the prefixes for you
• Autoprefixr for Gulp
• Autoprefixer for Sublime Text

I'm sure there are many more ways to get around writing everything by hand. I'd love to know what you do, so leave a comment below!