Hello Hello and welcome to this tutorial about Autoprefixer, the PostCSS plug in that will make your CSS Prefix compatibility a breeze! Before diving into this quick tutorial about Autoprefixer, you should have a basic working knowledge of CSS and know what a CSS Prefix is but if you don’t, continue reading because we are going to define that quick for you.
Also, if you are new to terminal, do not type or copy the $ below… that’s just a placeholder for the terminal prompt.
so if I type run $ git init you just type “git init”
Ok, let’s do it.
Part 1 – CSS Prefixes and Autoprefixer
A lot of the posts you will see here are going to be things that attempt to spare you some coding time and hopefully open you up to different ways of attacking your project because as overwhelming as it can be, there are more often than not many ways to accomplish the end result you want.
This post is all about CSS Prefixes that ensure cross-browser support for your styling. You’ve seen them before if you’ve styled CSS long enough:
Here they are prefixing a transition:
-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;
These are the browsers they address:
-webkit- : Andriod, Chrome, iOS, Safari
-moz- : Firefox
-ms- : Microsoft IE
-o- : Opera
And there are a lot more:
But we only really care about the main 4 browsers when we use experimental CSS.
One method to add the prefixes is to search and manually add prefixing when applicable by checking compatibility on caniuse.com …
…but that can become very tedious (often for me… distracting) and chances are you will forget that a property needs prefixing or possibly that it doesn’t anymore and you’re wasting your time by adding the prefixes. It’s a pain and lucky for us, some really smart people have figured out ways to kill the pain.
Part 2 – Automating the Prefixes
There are lots of better ways to automate the vendor prefixes – one of which is Gulp which I will give a serious tutorial on later because I think everyone should know what Gulp is and use it for anything more complicated than a one-page web project.
You can use Grunt, Ruby on Rails, Jekyll, Less, Scss, Compass all to add prefixes, but I want to show you a simple method that allows you to use the Autoprefixer plugin of PostCSS without integrating a whole build system
So the method I want to show you is using the command line to run PostCSS and its autoprefixer plugin.
Essentially what we are going to do here is take your existing CSS file, where we did not add any vendor prefixes (in the example below, I actually used prefixes when I didn’t have to and you will see them get stripped out in the final file) and we are going to use Javascript to process that file and add the prefixes where needed, remove them where they are not needed and then dump the file into a folder. We are going to do this in one or two lines of terminal commands.
So let’s get started.
PART 3 – INSTALL POSTCSS & AUTOPREFIXER
Installing the package is super easy. We will use Node.js and NPM to get the stuff but first we have to install them.
Installing on an OS X machine:
If you work on a MAC, use Homebrew (to install homebrew see my post on that):
Open Terminal
Run $ brew update
Run $ brew doctor (follow any recommendations)
Run $ brew install node
We just made sure that 1. Homebrew was up to date, 2. Ensured our Homebrew installation is working properly and 3. Installed Node.js which installs the Node Package Manager (NPM) along with it.
You can verify NPM is working and up to date by running
$ node -v
$ npm -v
and you will get something back like this:
and now we have Node.js and the Node Package Manager installed on your mac.
Installing on a Windows Machine:
On Windows, you just need to go to nodejs.org and download the installer for your version of Windows, then run the installer. After the installer is complete you can search for “CMD” and you will find a result titled Node.js command prompt and that is the shell you want to use for the rest of thes steps in this tutorial.
The process will look like so:
[foogallery id=”135″]
After you confirm the node installation by running $ node -v in the Node.js Command Prompt you are good to go.
OK Linux Users, it’s your turn:
Find the command or package for your distribution here and simply run it. LOL.
PART 4 – USE NPM to install PostCSS and Autoprefixer
Honestly, the hard work is all over. We will install PostCSS and the Autoprefixer plugin with a single terminal command globally on your system.
Open terminal and type in (or copy and paste) this text:
$ npm install –global postcss-cli autoprefixer
You will see a result like this:
Let’s process a CSS file.
PART 5 – USE POSTCSS & AutoPREFIXER to batch process your CSS files from the Command line
In Terminal, naviagate to your directory where you would like to process one or more CSS files and simply run this command:
postcss –use autoprefixer *.css -d build/
You will see no result but if you are running git (and you should be) you can check the changes very easily. I ran the command on the file ‘github-profile.css’
Here you can see my git status after the postcss command executed:
Running “$ git status” shows the new directory added and then you see I just do a quick directory list and there is the new CSS file. Note it has the same file name as the processed file. This is good for testing but if you are using Gulp you would have a ‘build/’ or ‘dist/’ directory anyway.
So let’s see what the autoprefixer did. I will put up a more drastic comparison later but we can see the box-shadow prefixes were stripped and the flexbox prefixes were added.
Again, I will post a more drastic change and that ‘git diff’ later but as you can see, from now on I can add or remove the prefixes in all my CSS files anywhere on my system simply by going to that directory in terminal and running the postcss autoprefixer command. Pretty helpful on a multi-file project with lots of CSS.
Here is a more drastic example:
Afterword
There’s much more you can do to make your builds more efficient, compliant and clean with npm packages and you can run them all at once with Gulp or Grunt but we will get into that later.
Feel free to ask any questions or leave feedback. I know this is beginner stuff but I think sometimes these tools are intimidating so I wanted a quick lesson that made us install Node and get into Terminal again.
Also. The CSS file you see is from a training video I watched about javascript that I highly recommend and that is over at Fullstack Industries.
Take care.