Header logo
Free Consultation

Who Uses Prefixes Anymore?

Machine producing a webpage

CSS prefixes are useful for getting cutting edge, or at least somewhat modern features to work across the major web browsers. Without using these, you would likely see that your website looks very different between browsers and sometimes it could make it look pretty bad. Using prefixes means entering your styling multiple times in some cases and that makes it easier to forget one. Forget one and you might not catch that your styling doesn't work in Safari. Isn't there a better way?

To take a quick step back before we solve this dilemma, let's catch everyone up on what these prefixes are. The browser or vendor prefixes allow you to use features that are up and coming or just not fully supported on browsers that you wouldn't normally be able to. Some of these might look like -webkit, -moz, -ms, and what needs to be prefixed isn't an exact science. I hesitate to list any here, because whichever one I leave here will likely no longer be necessary 6 months from now potentially. When you use a prefixed css property you will have to include the unprefixed version along with any others that are required. How do you figure out which ones to use? That can be difficult to tell sometimes. A good resource for this is caniuse as that is updated pretty regularly.

Prefixes, like prequels, are kind of annoying

Even the uninitiated should be able to tell that this can be a bit of a pain in the butt, you have to repeat yourself two to four times and you have to sort of keep track of when to use them. Thankfully you don't have to do it that way. If you are using sass or less to write your css, the compiler will likely support an autoprefixer plugin of some sort. I prefer sass and gulp so I'll give you an example of how I like to do this. The tools I'm going to talk about all have great docs, so I'm not going to duplicate that too much here.

In order to get to your autoprefixer, you are going to need a few things first. You'll need to install nodejs (npm) and gulpjs. Once you've done that you'll want to create a gulpfile.js in your project. That file will hold all of the instructions to run your autoprefixer and sass compilation. Inside your project you'll want to install gulp-sass and gulp-autoprefixer. These plugins will allow you to compile your sass into css and the autoprefixer will make sure that any required prefixes are included in that css. Check below for an example of what that gulpfile might look like. With code like this in your gulpfile,  you should be able to compile some sass with gulp compile_sass and you'll have better browser compatibility without the hassle.

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('compile_sass', function() {
   return gulp
      .src('/scss/app.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(autoprefixer())
      .pipe(gulp.dest('/css'));
});

MIKE OUT

Free consultation graphic

Author
Mike Goulding

Recent Posts

More Blogs