How to add css vendor prefixes automatically

Usage

gulp.task('autoprefixer',function(){var postcss      =require('gulp-postcss');var sourcemaps   =require('gulp-sourcemaps');var autoprefixer =require('autoprefixer-core');returngulp.src('./src/*.css').pipe(sourcemaps.init()).pipe(postcss(autoprefixer({ browsers'last 2 version'}))).pipe(sourcemaps.write('.')).pipe(gulp.dest('./dest'));});
var autoprefixer =require('autoprefixer-core');module.exports={    module{        loaders{                test\.css$,                loader"style-loader!css-loader!postcss-loader"}},    postcssautoprefixer({ browsers'last 2 version'})}
  • Mincer: add npm package and enable it:

  • Jekyll: add and to

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 .

Install  gem:


and add post-compile hook to :

require'autoprefixer-rails'on_stylesheet_saved do |file|  css =File.read(file)  map = file +'.map'ifFile.exists? map    result =AutoprefixerRails.process(css,from file,to   file,map{prevFile.read(map),inlinefalse})File.open(file,'w'){|io| io << result.css }File.open(map,'w'){|io| io << result.map }elseFile.open(file,'w'){|io| io <<AutoprefixerRails.process(css)}endend
npm install --global postcss-cli autoprefixerpostcss --use autoprefixer *.css -d build/

See for help.

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);});

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.

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{transformscale(0.5);-moz-transformscale(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{transition1s;}b{transition1s;}

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

You can also use comments recursively:

@support (transition: all) {a {}}

Disabling

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

a{transformscale(0.5);-moz-transformscale(0.6);}

If some prefixes were generated in wrong way, please create 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{transition1s;}b{transition1s;}

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

You can also use comments recursively:

@support (transition: all) {a {}}

Usage

gulp.task('autoprefixer',function(){var postcss      =require('gulp-postcss');var sourcemaps   =require('gulp-sourcemaps');var autoprefixer =require('autoprefixer');returngulp.src('./src/*.css').pipe(sourcemaps.init()).pipe(postcss(autoprefixer({ browsers'last 2 versions'}))).pipe(sourcemaps.write('.')).pipe(gulp.dest('./dest'));});
var autoprefixer =require('autoprefixer');module.exports={    module{        loaders{                test\.css$,                loader"style-loader!css-loader!postcss-loader"}},    postcssautoprefixer({ browsers'last 2 versions'})}
module.exports=function(grunt){grunt.loadNpmTasks('grunt-postcss');grunt.initConfig({        postcss{            options{                maptrue,                processorsrequire('autoprefixer')({                        browsers'last 2 versions'})},            dist{                src'css/*.css'}}});grunt.registerTask('default','postcss:dist');};
  • Mincer: add npm package and enable it:

  • Jekyll: add and to
npm install --global postcss-cli autoprefixerpostcss --use autoprefixer *.css -d build/

See for help.

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);});

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.

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{transformscale(0.5);-moz-transformscale(0.6);}

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

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

  • will disable parameters prefixing.
  • will disable flexbox properties prefixing. Or will add prefixes only for final and IE versions of specification.
  • will disable cleaning outdated prefixes.

You should set them to the plugin:

autoprefixer({ gridtrue});

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

.a{transition1s;}.b{transition1s;}.c{transition1s;maskurl(image.png);}

There are two types of control comments:

  • disable the whole block before and after comment.
  • disable only next property or next rule selector or at-rule parameters (but not rule/at‑rule body).

You can also use comments recursively:

@supports (transition: all) {a {}}

Outdated Prefixes

By default, Autoprefixer also removes outdated prefixes.

You can disable this behavior by option. If you have no legacy code, this options will make Autoprefixer about 10% faster.

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

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

var cleaner  =postcss(autoprefixer({ addfalse, browsers}));var prefixer =postcss( autoprefixer );cleaner.process(css).then(function(cleaned){prefixer.process(cleaned.css,function(result){console.log(result.css);});});

Features

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 and ), unit function (), at‑rules ( and ) and properties.

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

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

a{displayflex;}

compiles to:

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

It also removes old, unnecessary prefixes from your CSS (like prefixes, produced by many CSS libraries).

a{-webkit-border-radius5px;border-radius5px;}

compiles to:

a{border-radius5px;}

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{transformscale(0.5);-moz-transformscale(0.6);}

You can use these plugin options to control some of Autoprefixer’s features.

  • will disable parameters prefixing.
  • will disable flexbox properties prefixing. Or will add prefixes only for final and IE versions of specification.
  • will disable cleaning outdated prefixes.

You should set them inside the plugin like so:

autoprefixer({ grid'autoplace'})

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

.a{transition1s;}.b{transition1s;}.c{transition1s;maskurl(image.png);}

There are three types of control comments:

  • : enable/disable all Autoprefixer translations for the whole block both before and after the comment.
  • : disable Autoprefixer only for the next property or next rule selector or at-rule parameters (but not rule/at‑rule body).
  • : control how Autoprefixer handles grid translations for the whole block:
    • : enable grid translations with autoplacement support.
    • : enable grid translations with autoplacement support disabled (alias for deprecated value ).
    • : disable all grid translations.

You can also use comments recursively:

@supports (transition: all) {a {}}

Note that comments that disable the whole block should not be featured in the same block twice:

.do-not-do-this{transition1s;transformrotate(20deg);}

Options

autoprefixer({ cascadefalse})

Available options are:

  • (string): environment for Browserslist.
  • (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default:
  • (boolean): should Autoprefixer add prefixes. Default is .
  • (boolean): should Autoprefixer prefixes. Default is .
  • (boolean): should Autoprefixer add prefixes for parameters. Default is .
  • (boolean|string): should Autoprefixer add prefixes for flexbox properties. With value Autoprefixer will add prefixes only for final and IE 10 versions of specification. Default is .
  • (false||): should Autoprefixer add IE 10-11 prefixes for Grid Layout properties?
    • (default): prevent Autoprefixer from outputting CSS Grid translations.
    • : enable Autoprefixer grid translations and include autoplacement support. You can also use in your CSS.
    • : enable Autoprefixer grid translations but exclude autoplacement support. You can also use in your CSS. (alias for the deprecated value)
  • (boolean): do not raise error on unknown browser version in Browserslist config. Default is .

Plugin object has method for debugging purpose.

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

Features

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 and ), unit function (), at‑rules ( and ) and properties.

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

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

a{displayflex;}

compiles to:

a{display-webkit-box;display-webkit-flex;display-moz-box;display-ms-flexbox;displayflex}

It also removes old, unnecessary prefixes from your CSS (like prefixes, produced by many CSS libraries).

a{-webkit-border-radius5px;border-radius5px;}

compiles to:

a{border-radius5px;}

Features

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 and ), unit function (), at‑rules ( and ) and properties.

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

It also removes old, unnecessary prefixes from your CSS (like prefixes, produced by many CSS libraries).

a{-webkit-border-radius5px;border-radius5px;}

compiles to:

a{border-radius5px;}

Options

autoprefixer({ cascadefalse})

Available options are:

  • (string): environment for Browserslist.
  • (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default:
  • (boolean): should Autoprefixer add prefixes. Default is .
  • (boolean): should Autoprefixer prefixes. Default is .
  • (boolean): should Autoprefixer add prefixes for parameters. Default is .
  • (boolean|string): should Autoprefixer add prefixes for flexbox properties. With value Autoprefixer will add prefixes only for final and IE versions of specification. Default is .
  • (boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is .

Plugin object has method for debugging purpose.

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

FAQ

Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.

First, you need to enable Grid prefixes by using either the option or the control comment. Also you can use environment variable to enable Grid: .

Second, you need to test every fix with Grid in IE. It is not an enable and forget feature, but it is still very useful. Financial Times and Yandex use it in production.

Fourth, if you are not using the autoplacement feature, the best way to use Autoprefixer is by using or .

.page{displaygrid;grid-gap33px;grid-template"head head  head"1fr"nav  main  main" minmax(100px, 1fr)"nav  foot  foot"2fr1fr100px1fr;}.page__head{grid-areahead;}.page__nav{grid-areanav;}.page__main{grid-areamain;}.page__footer{grid-areafoot;}

See also:

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:

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

Autoprefixer needs unprefixed property to add prefixes. So if you only wrote without W3C’s , Autoprefixer will not add other prefixes.

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{transformscale(0.5);-moz-transformscale(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{transition1s;}b{transition1s;}

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

You can also use comments recursively:

@support (transition: all) {a {}}

By default, Autoprefixer also removes outdated prefixes. You can disable this behavior by option. If you have no legacy code, this options will make Autoprefixer about 10% faster.

Options

autoprefixer({ cascadefalse})

Available options are:

  • (string): environment for Browserslist.
  • (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default:
  • (boolean): should Autoprefixer add prefixes. Default is .
  • (boolean): should Autoprefixer prefixes. Default is .
  • (boolean): should Autoprefixer add prefixes for parameters. Default is .
  • (boolean|string): should Autoprefixer add prefixes for flexbox properties. With value Autoprefixer will add prefixes only for final and IE versions of specification. Default is .
  • (boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is .
  • (boolean): do not raise error on unknown browser version in Browserslist config or option. Default is .

Plugin object has method for debugging purpose.

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

Options

autoprefixer({ cascadefalse})

Available options are:

  • (string): environment for Browserslist.
  • (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default:
  • (boolean): should Autoprefixer add prefixes. Default is .
  • (boolean): should Autoprefixer prefixes. Default is .
  • (boolean): should Autoprefixer add prefixes for parameters. Default is .
  • (boolean|string): should Autoprefixer add prefixes for flexbox properties. With value Autoprefixer will add prefixes only for final and IE versions of specification. Default is .
  • (boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is .
  • (boolean): do not raise error on unknown browser version in Browserslist config or option. Default is .

Plugin object has method for debugging purpose.

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

Features

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 and ), unit function (), at‑rules ( and ) and properties.

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

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

a{displayflex;}

compiles to:

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

It also removes old, unnecessary prefixes from your CSS (like prefixes, produced by many CSS libraries).

a{-webkit-border-radius5px;border-radius5px;}

compiles to:

a{border-radius5px;}

FAQ

No. Autoprefixer only adds prefixes.

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

Depending on what you consider being a “polyfill”, you can take a look to some other tools and libraries. If you just look for syntax sugar, you might take a look to:

a{backgroundlinear-gradient(to bottom, white, black)}

Unfortunately, unprefixed gradients use a different direction syntax and most examples you find use an old gradient syntax, so be careful and use always the latest W3C specs with Autoprefixer.

There were 3 specification versions for Flexbox. For example, 2009 draft suggested to write , 2012 draft , but final versions .

Unlike , the property is not a part of any specification. So there will not be any support in near future.

Sometime in the future when all browsers work without prefixes you can remove Autoprefixer and your CSS just works.

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

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{transformscale(0.5);-moz-transformscale(0.6);}

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

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

  • will disable parameters prefixing.
  • will disable flexbox properties prefixing. Or will add prefixes only for final and IE versions of specification.
  • will disable cleaning outdated prefixes.

You should set them to the plugin:

autoprefixer({ gridtrue});

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

.a{transition1s;}.b{transition1s;}.c{transition1s;maskurl(image.png);}

There are two types of control comments:

  • disable the whole block before and after comment.
  • disable only next property or next rule selector or at-rule parameters (but not rule/at‑rule body).

You can also use comments recursively:

@supports (transition: all) {a {}}

Features

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 and ), unit function (), at‑rules ( and ) and properties.

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

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

a{displayflex;}

compiles to:

a{display-webkit-box;display-webkit-flex;display-moz-box;display-ms-flexbox;displayflex}

It also removes old, unnecessary prefixes from your CSS (like prefixes, produced by many CSS libraries).

a{-webkit-border-radius5px;border-radius5px;}

compiles to:

a{border-radius5px;}

Usage

gulp.task('autoprefixer',function(){var postcss      =require('gulp-postcss');var sourcemaps   =require('gulp-sourcemaps');var autoprefixer =require('autoprefixer');returngulp.src('./src/*.css').pipe(sourcemaps.init()).pipe(postcss(autoprefixer())).pipe(sourcemaps.write('.')).pipe(gulp.dest('./dest'));});
module.exports={    module{        loaders{                test\.css$,                loader"style-loader!css-loader!postcss-loader"}}}

And create a with:

module.exports={  pluginsrequire('autoprefixer')}
module.exports=function(grunt){grunt.loadNpmTasks('grunt-postcss');grunt.initConfig({        postcss{            options{                maptrue,                processorsrequire('autoprefixer')},            dist{                src'css/*.css'}}});grunt.registerTask('default','postcss:dist');};
  • Mincer: add npm package and enable it:

  • Jekyll: add and to
let prefixer =postcssJs.sync( autoprefixer );let style =prefixer({    display'flex'});
npm install --global postcss-cli autoprefixerpostcss --use autoprefixer *.css -d build/

See for help.

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);});

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.

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

Usage

gulp.task('autoprefixer',function(){var postcss      =require('gulp-postcss');var sourcemaps   =require('gulp-sourcemaps');var autoprefixer =require('autoprefixer');returngulp.src('./src/*.css').pipe(sourcemaps.init()).pipe(postcss(autoprefixer())).pipe(sourcemaps.write('.')).pipe(gulp.dest('./dest'));});
module.exports={    module{        rules{                test\.css$,                use"style-loader","css-loader","postcss-loader"}}}

And create a with:

module.exports={  pluginsrequire('autoprefixer')}
module.exports=function(grunt){grunt.loadNpmTasks('grunt-postcss');grunt.initConfig({        postcss{            options{                maptrue,                processorsrequire('autoprefixer')},            dist{                src'css/*.css'}}});grunt.registerTask('default','postcss:dist');};
  • Jekyll: add and to
  • Mincer: add npm package and enable it:

let prefixer =postcssJs.sync( autoprefixer );let style =prefixer({    display'flex'});
npm install postcss-cli autoprefixernpx postcss *.css --use autoprefixer -d build/

See for help.

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);});

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.

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{transformscale(0.5);-moz-transformscale(0.6);}

You can use these plugin options to control some of Autoprefixer’s features.

  • will disable parameters prefixing.
  • will disable flexbox properties prefixing. Or will add prefixes only for final and IE versions of specification.
  • will disable cleaning outdated prefixes.

You should set them inside the plugin like so:

autoprefixer({ grid'autoplace'})

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

.a{transition1s;}.b{transition1s;}.c{transition1s;maskurl(image.png);}

There are three types of control comments:

  • : enable/disable all Autoprefixer translations for the whole block both before and after the comment.
  • : disable Autoprefixer only for the next property or next rule selector or at-rule parameters (but not rule/at‑rule body).
  • : control how Autoprefixer handles grid translations for the whole block:
    • : enable grid translations with autoplacement support.
    • : enable grid translations with autoplacement support disabled (alias for deprecated value ).
    • : disable all grid translations.

You can also use comments recursively:

@supports (transition: all) {a {}}

Note that comments that disable the whole block should not be featured in the same block twice:

.do-not-do-this{transition1s;transformrotate(20deg);}

Browsers

You can specify the browsers you want to target in your project:

autoprefixer("last 1 version","> 1%","ie 8","ie 7").compile(css);
  • is browser versions, selected by global usage statistics.
  • and is Firefox versions newer, that 20.
  • don’t set any browsers to clean CSS from any vendor prefixes.
  • You can also set browsers directly.

Blackberry and stock Android browsers will not be used in . You can add them by name:

autoprefixer("last 1 version","bb 10","android 4").compile(css);
  • for old Android stock browser.
  • for Blackberry browser.
  • for Google Chrome.
  • for Mozilla Firefox.
  • for Internet Explorer.
  • for iOS Safari.
  • for Opera.
  • for desktop Safari.

By default, Autoprefixer uses :

  • Opera 12.1 will be in list until Opera supports non-Blink 12.x branch.

Features

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 and ), unit function (), at‑rules ( and ) and properties.

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

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

a{displayflex;}

compiles to:

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

It also removes old, unnecessary prefixes from your CSS (like prefixes, produced by many CSS libraries).

a{-webkit-border-radius5px;border-radius5px;}

compiles to:

a{border-radius5px;}

FAQ

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 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.

@media(min-resolution2dppx){.image{background-imageurl(image@2x.png);}}

Will be compiled to:

@media(-webkit-min-device-pixel-ratio: 2),       (-o-min-device-pixel-ratio:21),       (min-resolution2dppx){.image{background-imageurl(image@2x.png);}}

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:

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

Autoprefixer needs unprefixed property to add prefixes. So if you only wrote without W3C’s , Autoprefixer will not add other prefixes.

Usage

gem"autoprefixer-rails"
gem"middleman-autoprefixer"

and activate the extension in your project’s :

activate autoprefixer

You can integrate Autoprefixer into your Sprockets environment by  gem:

AutoprefixerRails.install(sprockets_env)

or process CSS from plain Ruby:

prefixed =AutoprefixerRails.compile(css)
grunt.loadNpmTasks('grunt-autoprefixer');

If you use Compass binary to compile your styles, you can easy integrate Autoprefixer with it. Install gem:

and add post-compile hook to :

require'autoprefixer-rails'require'csso'on_stylesheet_saved do |file|  css =File.read(file)File.open(file,'w')do |io|    io <<Csso.optimize(AutoprefixerRails.compile(css))endend

If you need uncompressed CSS, remove method call.

You can set browsers array as second argument in .

Just install npm package and use it in option:

environment.enable('autoprefixer');

Use npm package:

var autoprefixer =require('autoprefixer');var prefixed     =autoprefixer.compile(css);
rework(css).use(autoprefixer('> 1%','opera 12.5').rework).use(rework.references()).toString();
$autoprefixer = new Autoprefixer();$css          = 'a { transition: transform 1s }';$prefixed     = $autoprefixer->compile($css);

You can use the binary to process CSS files using any assets manager:

See for help.


С этим читают