What is Autoprefixer and Why Should You Use It?

Few months ago I was in the middle of my bootcamp. I was building one of my projects and as I went to test it in different browsers the CSS code wasn't responding the same way. Turns out that the code is rendered differently by each browser and that's when I stumbled upon cross-browser compatibility, vendor prefixes and the Autoprefixer CSS online.

What is Cross-Browser Compatibility?

We have different browsers available to us (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari and Opera) and they have their unique rendering engines, which means that the same code can behave differently on each one of them. Making sure to add cross-browser compatibility is essential because it makes your project look and function consistently across browsers which are key to making a positive user experience.

One helpful resource that can help with this behaviour variance is to make use of vendor prefixes. Just in case you are not familiar, vendor prefix is a technique that enables browsers to add support for new CSS features before those features are fully supported in all browsers. You can also use it as a backwards compatibility to manage old browser versions.

Let's take as an example the CSS Animation that is widely supported as of today (07/2023), but it's not in older versions of some browsers.

/* Code */
@-webkit-keyframes MyAnimation {
    0% { left: 0; }	
   50% { left: 200px; }	
  100% { left: 20px; }	
}
@keyframes MyAnimation {
    0% { left: 0; }	
   50% { left: 200px; }	
  100% { left: 20px; }	
}

/* Vendor Prefix */
.example.is-animating {
  ...
  -webkit-animation: MyAnimation 2s; /* Chr, Saf */
          animation: MyAnimation 2s; /* IE >9, Fx >15, Op >12.0 */
}

Is important to say that once the new feature is supported by the browsers, you need to update your code erasing the vendor prefixes and using the appropriate syntax. Vendor prefixes are helpful, but it's not a long-term solution.

So, What is Autoprefixer?

Autoprefixer, as defined by its creator Andrey Sitnik, is a PostCSS plugin designed to parse CSS and automatically apply vendor prefixes to CSS rules using data from Can I Use. In other words, Autoprefixer is a tool that will take your code and adds or removes the necessary vendor prefixes.

Every now and then new features pop up following the technology advancements, so it can be kind of hard to keep track of when and where to use these prefixes. Using autoprefixer it takes your code and automatically detects the latest supported version of CSS features and appropriately applies the required prefixes.

Autoprefixer is an open source and is constantly updated to keep up with the evolving web standards and browser support. It's used and supported by big companies like Twitter, Alibaba, Facebook, and Google. Why wouldn't you? Add Autoprefixer to your toolkit and take your CSS to the next level!

Last week I talked about 5 Tools for Beginners, feel free to check it out here!