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.

How to Refresh Changes on Browser with Sublime Text

How to Refresh Changes on Browser with Sublime Text

As web designers, we often do this: tweak the codes in the code editor, save the file, head... Read more

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.

nodejs version

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.

install package

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 database for adding the prefixes. 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.

transition prefix

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

 "browsers": ["last 7 versions"]

It will also include the -moz- for Firefox

transition prefix

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

add prefix

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