Create Browser List for Autoprefixer | SASS, GLUP, CSS, GRUNT

In CSS you should not write browser prefixes yourself these days. Think the basic task grunt-postcss and the plugin autoprefixer can automate this task. In this short article I will show you how to configure the desired browser compatibility.

Install autoprefixer

First we install the basic task grunt-postcss:

npm install --save-dev grunt-postcss

Then we install the PostCSS plugin autoprefixer:

npm install --save-dev autoprefixer

Configure basic task

In the next step we specify the CSS file in the task configuration which the autoprefixer should examine. If you have your CSS files generated from SASS or SCSS sources, the autoprefixer should always be applied to them immediately after compiling the CSS.

JavaScript

postcss: {
  options: {
    processors: [
      require('autoprefixer')({
        browsers: ['last 2 versions']
      })
    ]
  },
  dist: {
    src: 'dest/css/autoprefix.css'
  }
}

Specify browser

For me it was now a bit of a bigger puzzle how to specify the browsers and their versions so that I only get the prefixes I need in my project.

The documentation of Browserlist is for me not very clear in how I have to fill the browser array. Let’s assume I have created a browser matrix for a project based on existing visitor statistics, which now needs to be supported. What is the best way to enter this? As an example, old Android smartphones should display the website as well as possible.

The browsers list: [‘last 2 versions’, ‘Android’] is confirmed with an error:

Fatal error: Unknown browser query `Android`

Maybe I don’t understand the documentation correctly, but it seems that you always have to give a version number, e.g. Android >= 2.3 and can’t just want to support all Androids.

So you have to know exactly for which minimal browser version you want to have support. A tracking tool with insight into exact browser versions is therefore an advantage.

The beauty of Autoprefixer

Autoprefixer is a great tool and a must have in every web project. The big advantage is the automatic adjustment of the CSS with changing browser requirements. This is made possible by the data of caniuse. Great is also the possibility to make the browser versions dependent on user shares.

Set and forget

During a test I just realized how valuable the tool is. You will set it up once and then adjust the list when you review the browser support for a project from time to time. An example to illustrate this:

CSS

.gradient {
    background-image: linear-gradient(to right, #000 0, #fff 100%);
}

I have prefixed this CSS snippet with the following browser list.

CSS

browsers: [
    'last 2 versions',
    'ie >= 9',
    'Android >= 2.3',
    'ChromeAndroid > 20',
    'FirefoxAndroid > 20',
    'iOS >= 8'
]

At first I was surprised by the result:

CSS

.gradient {
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000), to(#fff));
    background-image: -webkit-linear-gradient(left, #000 0, #fff 100%);
    background-image: linear-gradient(to right, #000 0, #fff 100%);
}

Had I created this myself, I would have surfed to the Ultimate CSS Gradient Generator, adjusted my gradient, tried copy + paste and been done with it.

CSS

background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%);
background: linear-gradient(to right, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(left, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(left, #000000 0%,#ffffff 100%);

That blind copy & paste is not so good here can be seen by looking at the browser compatibility of the adopted syntax. Opera, Firefox and IE 10 do not need to be prefixed at all. Oops! Thanks Autoprefixer!