What are CSS prefixes and when should you use them?

I was recently teaching a beginner developer the basics of web designing with CSS. I can say she wasn't overwhelmed until I dropped the word "prefixes." She got really frustrated with the number of things she had to grasp in the initial stages. Finally, we had to take a break, and I promised her that I would be writing an easy to understand, beginner friendly tutorial on CSS prefixes on Hashnode.

What are CSS prefixes?

CSS prefixes, otherwise known as Vendor prefixes, are a set of browser-specific keywords you need to append to non-standard or experimental CSS properties for cross-browser compatibility of your styles.

For major browsers, the CSS prefixes are:

-webkit-: For Chromium browsers like Google Chrome, Safari, Opera, Brave, etc.
-moz-: For Mozilla Firefox
-o-: For the Older version of Opera Browser (You can safely ignore this prefix, as the number of users using this browser are very less).
-ms-: For Microsoft Internet Explorer and Microsoft Edge browsers

When to use CSS prefixes?

You have to use Vendor specific CSS prefixes when you are trying to use non-standard or experimental CSS properties. Such as:

display: flex;

The prefixes to use with this are:
```
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
```
PS: Flexbox support is present in almost all the modern browsers today. CanIUse says, 93.99% users have browsers that support Flexbox unprefixed globally.

transform: scale(1.2);

Prefixes to use:

 -webkit-transform: scale(1.2);
       transform: scale(1.2);

animation: blink .3s ease-in-out;

Prefixes:

 -webkit-animation: blink .3s ease-in-out;
 animation: blink .3s ease-in-out;

In case you aren't sure if the CSS property you want to use is experimental or standard, verify it from caniuse.com.

Tools to automate Vendor CSS prefixes

The good part about learning to code in 2019 is that there are many tools to help you with tedious tasks such as appending vendor prefixes.

postcss/autoprefixer

Add autoprefixer to your project and parse your project CSS through it. It will find and add vendor-specific CSS prefixes automatically.
pleeease.io/play

This is an online tool to write or paste your CSS file on one side and get results on the other side. I have been using it for a long time now.
sindresorhus/gulp-autoprefixer
nDmitry/grunt-autoprefixer

The last two tools are for advanced developers. In case you are familiar with gulp and grunt built tools, you can setup autoprefixer and run your CSS files through them.

What are CSS prefixes and when should you use them?