You can now use Autoprefixer in your Pens to handle CSS prefixing for you. Autoprefixer is a CSS processor that handles vendor prefixing of your properties and values for you, as needed.

This new option sits alongside the option for using -prefix-free that we've had for a long time.

The CSS settings panel in the editor.

Using Autoprefixer

The choice to use Autoprefixer is on each individual Pen, as that setting you see in the screenshot above. Make sure that choice is selected, and the CSS you write in the editor will be run through Autoprefixer before it is used in the preview.

For example, you write this in the CSS editor:

body {
  background: linear-gradient(
    #444, #111
  );
}

And the processed CSS that the preview will use is:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
  background: -webkit-linear-gradient(#444, #111);
  background: linear-gradient(#444, #111);
}
/* Actually, a compressed version of that */

Wait — where are the other prefixes needed?! You might ask. You might be surprised what you do and don't need these days. Autoprefixer decides in an interesting (and very good) way...

How does Autoprefixer work?

Autoprefixer decides which properties and values to prefix by checking data from Can I Use, a website that tracks what web browsers support what. A soon as support is good enough, Autoprefixer stops prefixing that thing. It's more complicated than that, because sometimes newer syntaxes need to be converted into older syntaxes to work, and Autoprefixer does that too.

The main point: you author as if prefixes didn't exist and Autoprefixer takes care of getting you the back support you need. Some day in the theoretical future, Autoprefixer will do nothing, as vendor prefixes are on the way out.

Setting Autoprefixer as the default

From your Settings, you have the ability to turn on Autoprefixer for all new Pens you make.

Personally, I quite like Autoprefixer so I'll be turning that on.

When does it run?

Autoprefixer is the very last thing that runs when processing your CSS. So if you use Sass, LESS, or Stylus, that will process first, then Autoprefixer. You are still free to use a preprocessor add-on (e.g. Compass, LESSHat, etc) in which to use for prefixing if you'd like, but I'd argue that Autoprefixer does a better job, is easier, and you don't need both.

If you link up another Pen (or Pens) as a resource, Autoprefixer will run on that (those) too, ignoring what that original Pen had for a setting. That way all the CSS your demo uses is prefixed. The one exception to this is an external resource from a third-party (like your own server).

Seeing the Output

You can see the processed output of the CSS you write by clicking the View Compiled (eyeball) button in the CSS editor header. That icon shows up whenever you are using Autoprefixer or any of the CSS preprocessors. That is a change from before, when you had to click the title itself to see compiled output.

It looks like this:

Customizing Browser Support

If you use Autoprefixer on your projects, you might know that you can customize the browsers you want to support in your prefixing. We've decided to not allow this for the time being, for various reasons. If this is very important to you, write in to let us know.

We're using the default setting of Autoprefixer, which is this string representing a very reasonable set of support:

> 1%, last 2 versions, Firefox ESR, Opera 12.1

What is the difference between Autoprefixer and -prefix-free?

-prefix-free is a client side JavaScript library. It is included on your page as additional request. It runs, finds all the CSS it can find, figures out what prefixes may be needed, and injects that new CSS onto the page after the CSS it finds.

  • Downsides: extra request, flash-of-un-prefixed-styles, not cached, a few styles it can't do (e.g. filter).
  • Upsides: smaller CSS, only injects prefixes current browser needs

Autoprefixer processes your CSS server side. At least, that's how we're doing it because that seems to be the canonical source for the project.

  • Downsides: larger CSS (but not as big as "just prefixing everything")
  • Upsides: prefixes perfectly to what you support, final CSS is cacheable, handles tricky fallbacks (e.g. flexbox).

Feel free to use either.