:: placeholder { color : gray; } . image { background-image : url ( image@1x.png ); } @media ( min-resolution : two dppx ) { . image { background-image : url ( image@2x.png ); } }
:: -moz-placeholder { color : gray; } :: placeholder { color : gray; } . image { background-image : url ( image@1x.png ); } @media ( -webkit-min-device-pixel-ratio : two ) , ( min-resolution : two dppx ) { . image { background-image : url ( image@2x.png ); } }
-
Contents -
Browsers -
FAQ -
Does Autoprefixer polyfill Grid Layout for IE? -
Does it add polyfills? -
Why doesn’t Autoprefixer add prefixes to border-radius ? -
Why does Autoprefixer use unprefixed properties in @-webkit-keyframes ? -
How to work with legacy -webkit- only code? -
Does Autoprefixer add -epub- prefix? -
Why doesn’t Autoprefixer transform generic font-family system-ui ?
-
-
Usage -
Warnings -
Disabling -
Options -
Environment Variables -
Grid Autoplacement support in IE -
Debug -
Security Contact -
For Enterprise
. page { display : grid; grid-gap : thirty-three px ; grid-template :
"head head head" one fr
"nav main main" minmax ( one hundred px , one fr ) "nav foot foot" two fr /
one fr one hundred px one fr ; } . page__head { grid-area : head; } . page__nav { grid-area : nav; } . page__main { grid-area : main; } . page__footer { grid-area : foot; }
-
The guide about Grids in IE and Autoprefixer . postcss-gap-properties to use new gap property instead of old grid-gap . postcss-grid-kiss has alternate “everything in one property” syntax, which makes using Autoprefixer’s Grid translations safer.
-
postcss-preset-env is a plugins preset with polyfills and Autoprefixer to write future CSS today. -
Oldie , a PostCSS plugin that handles some IE hacks (opacity, rgba, etc). -
postcss-flexbugs-fixes , a PostCSS plugin to fix flexbox issues.
gulp . task ( 'autoprefixer' , ( ) => {
const autoprefixer = require ( 'autoprefixer' )
const sourcemaps = require ( 'gulp-sourcemaps' )
const postcss = require ( 'gulp-postcss' )
return gulp . 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" ]
}
]
}
}
module . exports = {
plugins : [
require ( 'autoprefixer' )
]
}
module . exports = {
module : {
rules : [
{
test : / \.css$ / ,
use : [ 'style-loader' , 'postcss-loader' ] ,
} ,
{
test : / \.jsx?$ / ,
use : [ 'babel-loader' , 'astroturf/loader' ] ,
}
]
}
}
module . exports = {
plugins : [
require ( 'autoprefixer' )
]
}
npm install postcss postcss-cli autoprefixer npx postcss * .css --use autoprefixer -d build/
-
Grunt: grunt-postcss -
Ruby on Rails : autoprefixer-rails -
Neutrino : neutrino-middleware-postcss -
Jekyll : add autoprefixer-rails and jekyll-assets to Gemfile -
Brunch : postcss-brunch -
Broccoli : broccoli-postcss -
Middleman : middleman-autoprefixer -
Mincer : add autoprefixer npm package and enable it: environment.enable('autoprefixer')
-
Less : less-plugin-autoprefix -
Stylus : autoprefixer-stylus -
Compass : autoprefixer-rails#compass
const autoprefixer = require ( 'autoprefixer' )
const postcss = require ( 'postcss' )
postcss ( [ autoprefixer ] ) . process ( css ) . then ( result => {
result . warnings ( ) . forEach ( warn => {
console . warn ( warn . toString ( ) )
} )
console . log ( result . css )
} )
-
Old direction syntax in gradients. -
Old unprefixed display: box instead of display: flex by latest specification version.
result . warnings ( ) . forEach ( warn => {
console . warn ( warn . toString ( ) )
} )
a { transform : scale ( zero point five ); -moz-transform : scale ( zero point six ); }
grid: "autoplace" will enable -ms- prefixes for Grid Layout including some limited autoplacement support . 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.
autoprefixer ( { grid : 'autoplace' } )
. a { transition : one s ; /* will be prefixed */ } . b { /* autoprefixer: off */
transition : one s ; /* will not be prefixed */ } . c { /* autoprefixer: ignore next */
transition : one s ; /* will not be prefixed */
mask : url (image.png); /* will be prefixed */ }
/* autoprefixer: (on|off) */ : enable/disable all Autoprefixer translations for the whole block both before and after the comment. /* autoprefixer: ignore next */ : disable Autoprefixer only for the next property or next rule selector or at-rule parameters (but not rule/at‑rule body). /* autoprefixer grid: (autoplace|no-autoplace|off) */ : control how Autoprefixer handles grid translations for the whole block: autoplace : enable grid translations with autoplacement support. no-autoplace : enable grid translations with autoplacement support disabled (alias for deprecated value on ). off : disable all grid translations.
/* autoprefixer: off */
@supports ( transition : all) { /* autoprefixer: on */
a { /* autoprefixer: off */ } }
/* How not to use block level control comments */ . do-not-do-this { /* autoprefixer: off */
transition : one s ; /* autoprefixer: on */
transform : rotate ( twenty deg ); }
autoprefixer ( { cascade : false } )
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 10 versions of specification. Default is true . grid (false| "autoplace" | "no-autoplace" ): should Autoprefixer add IE 10-11 prefixes for Grid Layout properties? false (default): prevent Autoprefixer from outputting CSS Grid translations. "autoplace" : enable Autoprefixer grid translations and include autoplacement support. You can also use /* autoprefixer grid: autoplace */ in your CSS. "no-autoplace" : enable Autoprefixer grid translations but exclude autoplacement support. You can also use /* autoprefixer grid: no-autoplace */ in your CSS. (alias for the deprecated true value)
stats (object): custom usage statistics for > 10% in my stats browsers query. overrideBrowserslist (array): list of queries for target browsers. Try to not use it. The best practice is to use .browserslistrc config or browserslist key in package.json to share target browsers with Babel, ESLint and Stylelint. See Browserslist docs for available queries and default value. ignoreUnknownVersions (boolean): do not raise error on unknown browser version in Browserslist config. Default is false .
AUTOPREFIXER_GRID : ( autoplace | no-autoplace ) should Autoprefixer add IE 10-11 prefixes for Grid Layout properties? autoplace : enable Autoprefixer grid translations and include autoplacement support. no-autoplace : enable Autoprefixer grid translations but exclude autoplacement support.
-
Install the latest version of Autoprefixer and cross-env :
npm install autoprefixer@latest cross-env --save-dev
-
Under "browserslist" > "development" in the package.json file, add "last 1 ie version"
"browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version", "last 1 ie version" ] }
-
Update "scripts" in the package.json file to the following:
"scripts": { "start": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts start", "build": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts build", "test": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts test", "eject": "react-scripts eject" },
/* Input CSS */
/* autoprefixer grid: autoplace */ . autoplacement-example { display : grid; grid-template-columns : one fr one fr ; grid-template-rows : auto auto; grid-gap : twenty px ; }
/* Output CSS */
/* autoprefixer grid: autoplace */ . autoplacement-example { display : -ms-grid; display : grid; -ms-grid-columns : one fr twenty px one fr ; grid-template-columns : one fr one fr ; -ms-grid-rows : auto twenty px auto; grid-template-rows : auto auto; grid-gap : twenty px ; } . autoplacement-example > * : nth-child ( one ) { -ms-grid-row : one ; -ms-grid-column : one ; } . autoplacement-example > * : nth-child ( two ) { -ms-grid-row : one ; -ms-grid-column : three ; } . autoplacement-example > * : nth-child ( three ) { -ms-grid-row : three ; -ms-grid-column : one ; } . autoplacement-example > * : nth-child ( four ) { -ms-grid-row : three ; -ms-grid-column : three ; }
< div class =" grid " >
< div class =" grid-cell " > </ div >
</ div >
/* Unsafe CSS when Autoplacement is enabled */ . grid-cell { grid-column : two ; grid-row : two ; } . grid { display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( three , one fr ); }
/* Also unsafe to use this CSS */ . grid { display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( three , one fr ); } . grid-cell { grid-column : two ; grid-row : two ; }
/* Disable autoplacement to fix the issue */ . grid { /* autoprefixer grid: no-autoplace */
display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( three , one fr ); } . grid-cell { grid-column : two ; grid-row : two ; }
/* Disable autoplacement by default in old projects */
/* autoprefixer grid: no-autoplace */
/* Old code will function the same way it always has */ . old-grid { display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( three , one fr ); } . old-grid-cell { grid-column : two ; grid-row : two ; } /* Enable autoplacement when you want to use it in new code */ . new-autoplace-friendly-grid { /* autoprefixer grid: autoplace */
display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( three , auto); }
. not-allowed { display : grid; grid-template-columns : repeat ( three , one fr ); } . is-allowed { display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( ten , auto); }
. grid { /* This will never be IE friendly */
grid-template-columns : repeat (auto-fit , min-max ( two hundred px , one fr )) }
. autoplacement-grid { display : grid; grid-template-columns : repeat ( three , one fr ); grid-template-rows : repeat ( three , auto); } /* Grid cells placed inside the explicit grid
will break the layout in IE */ . not-permitted-grid-cell { grid-column : one ; grid-row : one ; } /* Grid cells placed outside the
explicit grid will work in IE */ . permitted-grid-cell { grid-column : one / span two ; grid-row : four ; }
. page { display : grid; grid-gap : thirty px ; grid-template :
"head head"
"nav main" minmax ( one hundred px , one fr ) "foot foot" /
two hundred px one fr ; } . page__head { grid-area : head; } . page__nav { grid-area : nav; } . page__main { grid-area : main; } . page__footer { grid-area : foot; }
< div class =" grid " >
< div class =" grid-cell " > </ div >
</ div >
. grid { display : grid; grid-template-columns : one fr one fr ; grid-template-rows : auto; } . grid :: before { content : 'before' ; } . grid :: after { content : 'after' ; }
. grid { display : -ms-grid; display : grid; -ms-grid-columns : one fr one fr ; grid-template-columns : one fr one fr ; -ms-grid-rows : auto; grid-template-rows : auto; } . grid > * : nth-child ( one ) { -ms-grid-row : one ; -ms-grid-column : one ; } . grid > * : nth-child ( two ) { -ms-grid-row : one ; -ms-grid-column : two ; } . grid :: before { content : 'before' ; } . grid :: after { content : 'after' ; }
. grid { display : grid; grid-template-columns : one fr one fr ; grid-template-rows : auto; grid-gap : fifty px ; } /* This will *NOT* work in IE */
@media ( max-width : six hundred px ) { . grid { grid-gap : twenty px ; } } /* This will *NOT* work in IE */ . grid . small-gap { grid-gap : twenty px ; }
. grid { display : grid; grid-template-columns : one fr one fr ; grid-template-rows : auto; grid-gap : fifty px ; } /* This *WILL* work in IE */
@media ( max-width : six hundred px ) { . grid { grid-template-columns : one fr one fr ; grid-template-rows : auto; grid-gap : twenty px ; } } /* This *WILL* work in IE */ . grid . small-gap { grid-template-columns : one fr one fr ; grid-template-rows : auto; grid-gap : twenty px ; }
$ npx autoprefixer --info
Browsers:
Edge: 16
These browsers account for 0.26% of all users globally
At-Rules:
@viewport: ms
Selectors:
::placeholder: ms
Properties:
appearance: webkit
flow-from: ms
flow-into: ms
hyphens: ms
overscroll-behavior: ms
region-fragment: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
scroll-snap-type: ms
text-size-adjust: ms
text-spacing: ms
user-select: ms
console . log ( autoprefixer ( ) . info ( ) )