Skip to content

j-verint/autoprefixer

 
 

Repository files navigation

Autoprefixer Build Status

PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter, and Taobao.

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

:fullscreen a {
    display: flex
}

Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. You try in the interactive demo of Autoprefixer.

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

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 to the latest W3C specs. You don’t need a special language (like Sass) or remember where you must use mixins.

Autoprefixer supports selectors (like :fullscreen and ::selection), unit function (calc()), at‑rules (@support and @keyframes) and properties.

Because Autoprefixer is a postprocessor for CSS, you can also use it with preprocessors such as Sass, Stylus or LESS.

Flexbox, Filters, etc.

Just write normal CSS according to the latest W3C specs and Autoprefixer will produce the code for old browsers.

a {
    display: flex;
}

compiles to:

a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Autoprefixer has 27 special hacks to fix web browser differences.

Only Actual Prefixes

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

It also removes old, unnecessary prefixes from your CSS (like border-radius prefixes, produced by many CSS 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%.

If you don’t provide the browsers option, Browserslist will try to find the browserslist config in parent dirs.

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 by 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 not 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) {
    prefixer.process(cleaned.css).then(function (result) {
        console.log(result.css);
    });
});

FAQ

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:

  • CSS Grace, a PostCSS plugin that handles some IE hacks (opacity, rgba, inline-block, etc) in addition to some non-standard handy shortcuts.
  • cssnext, a tool that allows you to write standard CSS syntax non-implemented yet in browsers (custom properties, custom media, color functions, etc). It includes autoprefixer and can be used as a PostCSS plugin too.

Why doesn’t Autoprefixer add prefixes to border-radius?

Developers are often surprised by how few prefixes are required today. If Autoprefixer doesn’t add prefixes to your CSS, check if they’re 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 W3C’s gradient, Autoprefixer will not add other prefixes.

But PostCSS has a plugins to convert CSS to unprefixed state. Use them before Autoprefixer:

Does Autoprefixer add -epub- prefix?

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

Usage

All options are listed in autoprefixer-core docs.

Gulp

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

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

    return gulp.src('./src/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
        .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-core and other PostCSS plugins.

var autoprefixer = require('autoprefixer-core');

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ]
}

Grunt

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

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

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

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

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

Other Build Tools:

Compass

You should consider using Gulp instead of Compass binary, because it has better Autoprefixer integration and many other awesome plugins.

But if you can’t move from Compass binary right now, there’s a hack to run Autoprefixer after compass compile.

Install autoprefixer-rails gem:

gem install autoprefixer-rails

and add post-compile hook to config.rb:

require 'autoprefixer-rails'

on_stylesheet_saved do |file|
  css = File.read(file)
  map = file + '.map'

  if File.exists? map
    result = AutoprefixerRails.process(css,
      from: file,
      to:   file,
      map:  { prev: File.read(map), inline: false })
    File.open(file, 'w') { |io| io << result.css }
    File.open(map,  'w') { |io| io << result.map }
  else
    File.open(file, 'w') { |io| io << AutoprefixerRails.process(css) }
  end
end

Less

You can use autoprefixer with less by including the less-plugin-autoprefix plugin.

Stylus

If you use Stylus CLI, you can add Autoprefixer by autoprefixer-stylus plugin:

stylus -u autoprefixer-stylus -w file.styl

CodeKit

CodeKit, since the 2.0 version, contains Autoprefixer. In the After Compiling section, there is a checkbox to enable Autoprefixer. Read CodeKit docs for more information.

Prepros

If you need free assets build GUI tool, try Prepros. Just set “Auto Prefix CSS” checkbox in right panel.

CLI

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

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

See postcss -h for help.

JavaScript

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

var autoprefixer = require('autoprefixer-core');
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 can’t move to a build tool, you can use text editor plugins:

Disabling

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.

But if you do not need Autoprefixer in some part of your CSS, you can use control comments to disable Autoprefixer.

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 */
@support (transition: all) {
    /* autoprefixer: on */
    a {
        /* autoprefixer: off */
    }
}

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 100.0%