What Are CSS Vendor or Browser Prefixes and Which Should You Use?

When looking at CSS code in the wild, have you ever wondered why some CSS code has numerous repetitive properties, with labels attached such as -webkit-, -webkit-, -moz-, -o- and -ms-?

These are called vendor prefixes, or more expressively, browser prefixes.

A browser prefix job is to make the newest CSS features work in browsers that don’t fully support them yet.

A common example is the transition property, which used to require a whooping 4 browser prefixes to work:

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 4s ease;
transition: all 1s ease;

A list of CSS prefixes for each browser:

• Chrome, Android, Safari, iOS:

  -webkit-

• Firefox:

  -moz-

• Internet Explorer:

  -ms-

• Opera:

  -o-

Which browser prefixes does your website need?

In 2020, the transition property pretty much works fully in Chrome, Firefox, Edge, Opera without requiring a prefix, however:

• There are many other new or experimental CSS property features that you might need to support with prefixes.
• Some properties, like transition and transform have multiple methods (features) and perhaps the exact method you’re using doesn’t work fully in all browsers — so you need to use a prefix.

Prefixing is a rapidly declining problem, but it still exists.

To check if your code needs prefixes for the browsers you need to support, go to Autoprefixer’s website. Then go to Browserlist and here you can specify how many versions of backward compatibility you need.

Browsers evolve and change constantly. Just look at the big difference between choosing compatibility for the last 4 versions vs. the latest (1) versions.

Autoprefixer also has a library that you can install in your projects, to automatically add prefixes to browsers. TechStacker uses it.

Caniuse.com is also a great website to look up CSS browser compatibility.