Adding CSS Vendor Prefix Automatically with Sublime Text

There are many CSS3 properties that are still experimental. An experimental CSS property uses vendor prefix, and as we already know, each browser has their own prefix; Firefox uses -moz-, Internet Explorer uses -ms-, Chrome and Safari use -webkit-, and Opera uses -o- (which has been switched to -webkit- as well).

The problem is, unless you are utilizing Compass, including vendor prefix is tedious. The requirement is also varied for each browser, and whether we should include the prefix (or not) becomes a question worthy of consideration.

If you are using Sublime Text though, here is an easier way.

Recommended Reading: How to Refresh Changes On Browser with Sublime

Installing Node.js

First, we need Node.js installed in our system. The installation package is available for Windows, OSX, and Linux, which you can download here. If you are unsure if you have it or not, run the following command in the Terminal.

  node -v
  

If it is already installed, it should return the version, as shown below.

Installing AutoPrefixer

The Autoprefixer is developed by Andrey Sitnik. It is then ported to Sublime Text package by Sindre Sorhus.

I recommend that you install Package Control for easier package installation. You can go to Wbond for the official instructions. After that, you can hit the Command + Shift + P keys and select "Install Package". Then search for Autoprefixer.

Hit enter to install.

Using AutoPrefixer

AutoPrefixer comes with a default setting, as follows

  {
  	"browsers": ["last 2 versions"]
  }
  

But, we can personalize this to meet our own requirement.

Autoprefixer uses the CanIUse.com database for adding the prefixes. CanIUse.com lists CSS3 as well as HTML5, JS and SVG support statistics in the browsers including the use of vendor prefixes. And as we can see from the default setting, Autoprefixer adds prefixes for the last 2 versions as well.

If we take CSS3 Transition as an example, it will add the prefixes for the Webkit and Opera browsers.

And if we set it for 7 versions back, like so.

  {
  	"browsers": ["last 7 versions"]
  }
  

It will also include the -moz- for Firefox

To include the prefix you can hit Command + Shift + P and select Autoprefix CSS, like so.

Now, you can simply write the standard CSS3 syntax, and this plugin will include the prefix for you in a snap.