autoprefixer

Parse CSS and add vendor prefixes to rules by Can I Use

Subscribe to updates I use autoprefixer


Statistics on autoprefixer

Number of watchers on Github 14837
Number of open issues 3
Average time to close an issue 3 days
Main language CoffeeScript
Average time to merge a PR about 19 hours
Open pull requests 6+
Closed pull requests 27+
Last commit 4 months ago
Repo Created over 5 years ago
Repo Last Updated 4 months ago
Size 2.79 MB
Homepage https://twitter.c...
Organization / Authorpostcss
Latest Release8.1.0
Contributors95
Page Updated
Do you use autoprefixer? Leave a review!
View open issues (3)
View autoprefixer activity
View on github
Latest Open Source Launches
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating autoprefixer for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

Autoprefixer Cult Of Martians

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules usingvalues fromCan I Use. Itisrecommended by Google and used in Twitter and Taobao.

Write your CSS rules without vendor prefixes (infact, forget about them entirely):

::placeholder {
  color: gray;
}

Autoprefixer will use the data based on current browser popularity and property support toapply prefixes foryou. Youcantrythe interactive demo of Autoprefixer.

::-webkit-input-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

Twitter account for news and releases: @autoprefixer.

Sponsored by Evil Martians

Features

Write Pure CSS

Working with Autoprefixer is simple: just forget about vendor prefixes and write normal CSS according tothe latestW3Cspecs. You dont need a special language (like Sass) or remember where you must use mixins.

Autoprefixer supports selectors (like :fullscreen and ::selection), unit function (calc()), atrules(@supports and @keyframes) and properties.

Because Autoprefixer isa postprocessor for CSS, youcanalso use it with preprocessors suchasSass, Stylus orLESS.

Only Actual Prefixes

Autoprefixer utilizes the most recent data from Can I Use to add only necessary vendor prefixes.

Italsoremoves old, unnecessary prefixes from your CSS (like border-radius prefixes, produced bymanyCSS libraries).

a {
    -webkit-border-radius: 5px;
            border-radius: 5px;
}

compiles to:

a {
    border-radius: 5px;
}

Browsers

Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project by queries like last 2 versions or > 5%.

The best way to provide browsers is .browserslistrc config or package.json with browserslist key. Put it in your project root.

We recommend to avoid Autoprefixer option and use .browserslistrc config or package.json. In this case browsers will be shared with other tools like babel-preset-env or Stylelint.

See Browserslist docs for queries, browser names, config format, and default value.

Outdated Prefixes

By default, Autoprefixer also removes outdated prefixes.

You can disable this behavior with the remove: false option. If you have no legacy code, this option will make Autoprefixer about 10% faster.

Also, you can set the add: false option. Autoprefixer will only clean outdated prefixes, but will not add any new prefixes.

Autoprefixer adds new prefixes between any unprefixed properties and already written prefixes in your CSS. If it will break the expected prefixes order, you can clean all prefixes from your CSS and then add the necessary prefixes again:

var cleaner  = postcss([ autoprefixer({ add: false, browsers: [] }) ]);
var prefixer = postcss([ autoprefixer ]);

cleaner.process(css).then(function (cleaned) {
    return prefixer.process(cleaned.css);
}).then(function (result) {
    console.log(result.css);
});

FAQ

No prefixes in production

Many other tools contain Autoprefixer. For example, webpack uses Autoprefixer to minify CSS by cleaning unnecessary prefixes.

If you set browsers list to Autoprefixer by browsers option, only first Autoprefixer will know your browsers. Autoprefixer inside webpack will use default browsers list. As result, webpack will remove prefixes, that first Autoprefixer added.

You need to put your browsers to browserslist config in project root as result all tools (Autoprefixer, cssnano, doiuse, cssnext) will use same browsers list.

What is unprefixed version for -webkit-min-device-pixel-ratio?

@media (min-resolution: 2dppx) {
    .image {
        background-image: url(image@2x.png);
    }
}

Will be compiled to:

@media (-webkit-min-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1),
       (min-resolution: 2dppx) {
    .image {
        background-image: url(image@2x.png);
    }
}

Does it add polyfills?

No. Autoprefixer only adds prefixes.

Most new CSS features will require client side JavaScript to handle a new behavior correctly.

Depending on what you consider to be a polyfill, you can take a look at some other tools and libraries. If you are just looking for syntax sugar, you might take a look at:

Why doesnt Autoprefixer add prefixes to border-radius?

Developers are often surprised by how few prefixes are required today. If Autoprefixer doesnt add prefixes toyour CSS, check if theyre still required on Can I Use.

There is a list with all supported properties, values, and selectors.

Why Autoprefixer uses unprefixed properties in @-webkit-keyframes?

Browser teams can remove some prefixes before others. So we try to use all combinations of prefixed/unprefixed values.

How to work with legacy -webkit- only code?

Autoprefixer needs unprefixed property to add prefixes. So if you only wrote -webkit-gradient without W3Cs gradient, Autoprefixer will not add other prefixes.

But PostCSS has a plugins to convert CSS to unprefixed state. Use postcss-unprefix before Autoprefixer.

Does Autoprefixer add -epub- prefix?

No, Autoprefixer works only with browsers prefixes from Can I Use. But you can use postcss-epub forprefixing ePub3 properties.

Why doesnt Autoprefixer transform generic font-family system-ui?

system-ui is technically not a prefix and the transformation is not future-proof. But you can use postcss-font-family-system-ui to transform system-ui to a practical font-family list.

Usage

Gulp

In Gulp you can use gulp-postcss with autoprefixer npm package.

gulp.task('autoprefixer', function () {
    var postcss      = require('gulp-postcss');
    var sourcemaps   = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer');

    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dest'));
});

With gulp-postcss you also can combine Autoprefixer with other PostCSS plugins.

Webpack

In webpack you can use postcss-loader with autoprefixer and other PostCSS plugins.

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader", "postcss-loader"]
            }
        ]
    }
}

And create a postcss.config.js with:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Grunt

In Grunt you can use grunt-postcss with autoprefixer npm package.

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-postcss');

    grunt.initConfig({
        postcss: {
            options: {
                map: true,
                processors: [
                    require('autoprefixer')
                ]
            },
            dist: {
                src: 'css/*.css'
            }
        }
    });

    grunt.registerTask('default', ['postcss:dist']);
};

With grunt-postcss you also can combine Autoprefixer with other PostCSS plugins.

Other Build Tools:

Preprocessors

CSS-in-JS

There is postcss-js to use Autoprefixer in React Inline Styles, Free Style, Radium and other CSS-in-JS solutions.

let prefixer = postcssJs.sync([ autoprefixer ]);
let style = prefixer({
    display: 'flex'
});

GUI Tools

CLI

You can use the postcss-cli to run Autoprefixer from CLI:

npm install postcss-cli autoprefixer
npx postcss *.css --use autoprefixer -d build/

See postcss -h for help.

JavaScript

You can use Autoprefixer with PostCSS in your Node.js application or if you want to develop an Autoprefixer plugin for new environment.

var autoprefixer = require('autoprefixer');
var postcss      = require('postcss');

postcss([ autoprefixer ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

There is also standalone build for the browser or as a non-Node.js runtime.

You can use html-autoprefixer to process HTML with inlined CSS.

Text Editors and IDE

Autoprefixer should be used in assets build tools. Text editor plugins are not a good solution, because prefixes decrease code readability and you will need to change value in all prefixed properties.

I recommend you to learn how to use build tools like Gulp. They work much better and will open you a whole new world of useful plugins and automatization.

But, if you cant move to a build tool, you can use text editor plugins:

Warnings

Autoprefixer uses the PostCSS warning API to warn about really important problems in your CSS:

  • Old direction syntax in gradients.
  • Old unprefixed display: box instead of display: flex by latest specification version.

You can get warnings from result.warnings():

result.warnings().forEach(function (warn) {
    console.warn(warn.toString());
});

Every Autoprefixer runner should display this warnings.

Disabling

Prefixes

Autoprefixer was designed to have no interface it just works. If you need some browser specific hack just write a prefixed property after the unprefixed one.

a {
    transform: scale(0.5);
    -moz-transform: scale(0.6);
}

If some prefixes were generated in a wrong way, please create an issue on GitHub.

Features

You can use these plugin options to disable some of the Autoprefixer's features.

  • supports: false will disable @supports parameters prefixing.
  • flexbox: false will disable flexbox properties prefixing. Or flexbox: "no-2009" will add prefixes only for final and IE versions of specification.
  • remove: false will disable cleaning outdated prefixes.

You shoud set them to the plugin:

autoprefixer({ grid: true });

Control Comments

If you do not need Autoprefixer in some part of your CSS, you can use control comments todisableAutoprefixer.

a {
    transition: 1s; /* it will be prefixed */
}

b {
    /* autoprefixer: off */
    transition: 1s; /* it will not be prefixed */
}

Control comments disable Autoprefixer within the whole rule in which you place it. In the above example, Autoprefixer will be disabled in the entire b rule scope, not only after the comment.

You can also use comments recursively:

/* autoprefixer: off */
@supports (transition: all) {
    /* autoprefixer: on */
    a {
        /* autoprefixer: off */
    }
}

In Sass/SCSS you can use all the disable options above, add an exclamation mark in the start of comment: /*! autoprefixer: off */.

Options

Function autoprefixer(options) returns new PostCSS plugin. See PostCSS API for plugin usage documentation.

autoprefixer({ cascade: false })

Available options are:

  • browsers (array): list of browsers query (like last 2 versions), which are supported in your project. We recommend to use browserslist config or browserslist key in package.json, rather than this option to share browsers with other tools. SeeBrowserslist docs for available queries and default value.
  • env (string): environment for Browserslist.
  • cascade (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default: true
  • add (boolean): should Autoprefixer add prefixes. Default is true.
  • remove (boolean): should Autoprefixer [remove outdated] prefixes. Default is true.
  • supports (boolean): should Autoprefixer add prefixes for @supports parameters. Default is true.
  • flexbox (boolean|string): should Autoprefixer add prefixes for flexbox properties. With "no-2009" value Autoprefixer will add prefixes only for final and IE versions of specification. Default is true.
  • grid (boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is false.
  • stats (object): custom usage statistics for > 10% in my stats browsers query.

Plugin object has info() method for debugging purpose.

You can use PostCSS processor to process several CSS files to increase performance.

Debug

Run npx autoprefixer --info in your project directory to check which browsers are selected andwhich properties will be prefixed:

$ npx autoprefixer --info
Browsers:
  Edge: 16

These browsers account for 0.04% of all users globally

At-Rules:
  @viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  user-select: ms
  hyphens: ms
  appearance: webkit
  scroll-snap-type: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  flow-into: ms
  flow-from: ms
  region-fragment: ms
  text-spacing: ms

JS API is also available:

var info = autoprefixer().info();
console.log(info);
autoprefixer open pull requests (View All Pulls)
  • Create index.css
  • Repair unit conversion.
  • Hack for unitless 0 basis in IE10/IE11 shorthand flex
  • Adding hyphenate prefixes
  • Fix: add min/max-content test case for grid
  • docs(README): add install part
autoprefixer questions on Stackoverflow (View All Questions)
  • grunt-postcss autoprefixer not adding prefixes but creates new files
  • grunt-postcss autoprefixer not adding prefixes
  • Autoprefixer error on Sublime Text 2
  • Grunt autoprefixer is not working
  • How to include autoprefixer for Jekyll
  • Cannot make grunt-postcss and autoprefixer work
  • Using grunt-postcss - how do we run autoprefixer without the other plugins?
  • grunt-autoprefixer to grunt-postcss
  • understanding relation between post-css grunt plugin and autoprefixer
  • Bootstrap will require a Sass compiler and Autoprefixer for a setup that matches our official compiled versions
  • How do I implement a Punch Autoprefixer Pre-Processor?
  • Laravel elixir and autoprefixer
  • gulp autoprefixer compiling to .scss not .css
  • How can I use sourcemaps with gulp-sass + gulp-minify-css + autoprefixer + rename?
  • Gulp autoprefixer not working with gulp compass
  • Use Autoprefixer in npm without Gulp
  • How to configure maven autoprefixer plugin
  • Autoprefixer won't add or remove prefixes
  • autoprefixer watch task configuration
  • Gulp-autoprefixer throwing ReferenceError: Promise is not defined
  • grunt-postcss autoprefixer not adding -webkit-linear-gradient for background
  • Looping grunt-watch with new version of autoprefixer
  • Autoprefixer command not found
  • Trying to integrate gulp SASS with gulp Autoprefixer-postcss, failing miserably
  • gulp autoprefixer giving me a promise error
  • Bundler cant read autoprefixer-rails-6.0.3.gem
  • How to make Autoprefixer ignore unknown characters
  • Using autoprefixer with Volt
  • Bootstrap SASS and Autoprefixer in Netbeans
  • How do I use bootstrap-sass's autoprefixer?
autoprefixer list of languages used
autoprefixer latest release notes
8.1.0 8.1 β€œRex, Familia et Ultio”

Kingdom Come: Deliverance logo

Autoprefixer 8.1 brings overscroll-behavior and better Grid support.

Overscroll Behavior

@Malvoz suggested the great idea to polyfill overscroll-behavior forIE11andEdge by -ms-scroll-chaining.

.none {
    -ms-scroll-chaining: none;
        overscroll-behavior: none;
}
.contain {
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
}
.auto {
    -ms-scroll-chaining: chained;
        overscroll-behavior: auto;
}

Note, that overscroll-behavior-x and overscroll-behavior-y are not supported since -ms- property doesnt have this freedom.

Better Grid Layout

@evgeny-petukhov continues his amazing work and now Autoprefixer polyfills Grid Layout for IE inmore cases.

He added grid-template shortcut support and improve support of grid-column-end and grid-row-end.

Grid properties were fixed in @supports. We recommend:

  • To select modern Grid browsers and IE 11: @supports (display: grid).
  • To select only Grid browsers without IE 11: @supports (grid-gap: 0).

Note, that you need grid: true option to Autoprefixer to add -ms- prefixes for Grid Layout.

8.0.0 8.0 β€œExcelsior”

Great Seal of the State of New York

Autoprefixer 8.0 uses Browserslist 3.0, has autoprefixer CLI tool instead of autoprefixer-info.

Browserslist 3.0

The main feature of Autoprefixer 8.0 is Browserslist 3.0. In the new version, it brings new default browsers. It will affect you only ifyoudontchange browsers by .browserslistrc or browserslist key in package.json (wedontrecommendtousebrowsersoption).

In one hand, Browserslist 3.0 usage statistics limit for default browsers was reduced from >1% to>0.5%. In another hand, we remove dead browsers from default browsers. The dead browser isabrowser with < than 1% in the global market and who dont have security updates. RightnowIE10andBlackBerry browser are dead browsers.

Read other notable changes in Browserslist 3.0 changelog. We recommend subscribing for@Browserslist twitter account.

CLI Tool

CLI tool to show target browsers and used prefixes was renamed to autoprefixer:

$ npx autoprefixer --info
Browsers:
  Edge: 16

These browsers account for 0.04% of all users globally

At-Rules:
  @viewport: ms

Selectors:
  ::placeholder: ms

Properties:
  user-select: ms
  hyphens: ms
  appearance: webkit
  scroll-snap-type: ms
  scroll-snap-coordinate: ms
  scroll-snap-destination: ms
  scroll-snap-points-x: ms
  scroll-snap-points-y: ms
  flow-into: ms
  flow-from: ms
  region-fragment: ms
  text-spacing: ms

With the new name, npx will install Autoprefixer automatically if it is missed in the current project.

Page Breaks for Firefox

Previous Autoprefixer versions replace break-* properties to page-break-* for Firefox.

But this feature didnt add any vendor prefix. Autoprefixer goal is to take care only about prefixes, notpolyfills. Forbetter consistency, we removed this feature from Autoprefixer.

Dont afraid, the PostCSS ecosystem has many plugins for CSS polyfills. We recommend to take look atpostcss-preset-env to write future CSS today.

7.2.6 7.2.6
  • Fix -ms- prefix for grid cells with same grid-area (by @evgeny-petukhov).
Other projects in CoffeeScript