Autoprefixer
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 Alibaba.
Write your CSS rules without vendor prefixes (in fact, forget about them
entirely):
::placeholder {
color : gray;
}
.image {
background-image : url ([email protected] );
}
@media (min-resolution : 2dppx ) {
.image {
background-image : url ([email protected] );
}
}
Autoprefixer will use the data based on current browser popularity and property
support to apply prefixes for you. You can try the interactive demo
of Autoprefixer.
::-moz-placeholder {
color : gray;
}
::placeholder {
color : gray;
}
.image {
background-image : url ([email protected] );
}
@media (-webkit-min-device-pixel-ratio : 2 ),
(min-resolution : 2dppx ) {
.image {
background-image : url ([email protected] );
}
}
Twitter account for news and releases: @autoprefixer .
Autoprefixer uses Browserslist , so you can specify the browsers
you want to target in your project with queries like > 5%
(see Best Practices ).
The best way to provide browsers is a .browserslistrc
file in your project
root, or by adding a browserslist
key to your package.json
.
We recommend the use of these options over passing options to Autoprefixer so
that the config can be shared with other tools such as babel-preset-env and
Stylelint .
See Browserslist docs for queries, browser names, config format, and defaults.
Does Autoprefixer polyfill Grid Layout for IE?
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 grid: "autoplace"
option or the /* autoprefixer grid: autoplace */
control comment.
Also you can use environment variable to enable Grid:
AUTOPREFIXER_GRID=autoplace npm build
.
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.
Third, there is only very limited auto placement support. Read the
Grid Autoplacement support in IE section
for more details.
Fourth, if you are not using the autoplacement feature, the best way
to use Autoprefixer is by using grid-template
or grid-template-areas
.
.page {
display : grid;
grid-gap : 33px ;
grid-template :
"head head head" 1fr
"nav main main" minmax (100px , 1fr )
"nav foot foot" 2fr /
1fr 100px 1fr ;
}
.page__head {
grid-area : head;
}
.page__nav {
grid-area : nav;
}
.page__main {
grid-area : main;
}
.page__footer {
grid-area : foot;
}
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:
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.
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 .
Why does Autoprefixer use 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 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 for prefixing ePub3 properties.
Why doesn’t Autoprefixer transform generic font-family system-ui
?
system-ui
is technically not a prefix and the transformation is not
future-proof. You can use postcss-font-family-system-ui to transform
system-ui
to a practical font-family list.
In Gulp you can use gulp-postcss with autoprefixer
npm package.
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' ) )
} )
With gulp-postcss
you also can combine Autoprefixer
with other PostCSS plugins .
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' )
]
}
The best way to use PostCSS with CSS-in-JS is astroturf
.
Add its loader to your webpack.config.js
:
module . exports = {
module : {
rules : [
{
test : / \.css$/ ,
use : [ 'style-loader' , 'postcss-loader' ] ,
} ,
{
test : / \.jsx?$/ ,
use : [ 'babel-loader' , 'astroturf/loader' ] ,
}
]
}
}
Then create postcss.config.js
:
module . exports = {
plugins : [
require ( 'autoprefixer' )
]
}
You can use the postcss-cli to run Autoprefixer from CLI:
npm install postcss postcss-cli autoprefixer
npx postcss * .css --use autoprefixer -d build/
See postcss -h
for help.
You can use Autoprefixer with PostCSS in your Node.js application
or if you want to develop an Autoprefixer plugin for a new environment.
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 )
} )
There is also a standalone build for the browser or for a non-Node.js runtime.
You can use html-autoprefixer to process HTML with inlined 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 values in all prefixed properties.
I recommend you to learn how to use build tools like Parcel .
They work much better and will open you a whole new world of useful plugins
and automation.
If you can’t move to a build tool, you can use text editor plugins:
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 ( warn => {
console . warn ( warn . toString ( ) )
} )
Every Autoprefixer runner should display these warnings.
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 incorrectly, please create an issue on GitHub .
You can use these plugin options to control some of Autoprefixer’s features.
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.
You should set them inside the plugin like so:
autoprefixer ( { grid : 'autoplace' } )
Control Comments
If you do not need Autoprefixer in some part of your CSS,
you can use control comments to disable Autoprefixer.
.a {
transition : 1s ; /* will be prefixed */
}
.b {
/* autoprefixer: off */
transition : 1s ; /* will not be prefixed */
}
.c {
/* autoprefixer: ignore next */
transition : 1s ; /* will not be prefixed */
mask : url (image.png); /* will be prefixed */
}
There are three types of control comments:
/* 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.
You can also use comments recursively:
/* autoprefixer: off */
@supports (transition : all) {
/* autoprefixer: on */
a {
/* autoprefixer: off */
}
}
Note that comments that disable the whole block should not be featured in the same
block twice:
/* How not to use block level control comments */
.do-not-do-this {
/* autoprefixer: off */
transition : 1s ;
/* autoprefixer: on */
transform : rotate (20deg );
}
Function autoprefixer(options)
returns a new PostCSS plugin.
See PostCSS API for plugin usage documentation.
autoprefixer ( { cascade : false } )
Available options are:
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
.
Plugin object has info()
method for debugging purpose.
You can use PostCSS processor to process several CSS files
to increase performance.
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.
Environment variables are useful, when you want to change Autoprefixer options but don't have access to config files.
Create React App is a good example of this.
Using environment variables to support CSS Grid prefixes in Create React App
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"
},
Replace autoplace
with no-autoplace
in the above example if you prefer to disable Autoprefixer Grid autoplacement support.
Now when you run npm start
you will see CSS Grid prefixes automatically being applied to your output CSS.
See also Browserslist environment variables for more examples on how to use environment variables in your project.
Grid Autoplacement support in IE
If the grid
option is set to "autoplace"
, limited autoplacement support is added to Autoprefixers grid translations. You can also use
the /* autoprefixer grid: autoplace */
control comment or
AUTOPREFIXER_GRID=autoplace npm build
environment variable.
Autoprefixer will only autoplace grid cells if both grid-template-rows
and grid-template-columns
has been set. If grid-template
or grid-template-areas
has been set, Autoprefixer will use area based
cell placement instead.
Autoprefixer supports autoplacement by using nth-child
CSS selectors.
It creates [number of columns] x [number of rows] nth-child
selectors.
For this reason Autoplacement is only supported within the explicit grid.
/* Input CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display : grid;
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto auto;
grid-gap : 20px ;
}
/* Output CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display : -ms-grid;
display : grid;
-ms-grid-columns : 1fr 20px 1fr ;
grid-template-columns : 1fr 1fr ;
-ms-grid-rows : auto 20px auto;
grid-template-rows : auto auto;
grid-gap : 20px ;
}
.autoplacement-example > * : nth-child (1 ) {
-ms-grid-row : 1 ;
-ms-grid-column : 1 ;
}
.autoplacement-example > * : nth-child (2 ) {
-ms-grid-row : 1 ;
-ms-grid-column : 3 ;
}
.autoplacement-example > * : nth-child (3 ) {
-ms-grid-row : 3 ;
-ms-grid-column : 1 ;
}
.autoplacement-example > * : nth-child (4 ) {
-ms-grid-row : 3 ;
-ms-grid-column : 3 ;
}
Beware of enabling autoplacement in old projects
Be careful about enabling autoplacement in any already established projects that have
previously not used Autoprefixer's grid autoplacement feature before.
If this was your html:
< div class ="grid ">
< div class ="grid-cell "> </ div >
</ div >
The following CSS will not work as expected with the autoplacement feature enabled:
/* Unsafe CSS when Autoplacement is enabled */
.grid-cell {
grid-column : 2 ;
grid-row : 2 ;
}
.grid {
display : grid;
grid-template-columns : repeat (3 , 1fr );
grid-template-rows : repeat (3 , 1fr );
}
Swapping the rules around will not fix the issue either:
/* Also unsafe to use this CSS */
.grid {
display : grid;
grid-template-columns : repeat (3 , 1fr );
grid-template-rows : repeat (3 , 1fr );
}
.grid-cell {
grid-column : 2 ;
grid-row : 2 ;
}
One way to deal with this issue is to disable autoplacement in the
grid-declaration rule:
/* Disable autoplacement to fix the issue */
.grid {
/* autoprefixer grid: no-autoplace */
display : grid;
grid-template-columns : repeat (3 , 1fr );
grid-template-rows : repeat (3 , 1fr );
}
.grid-cell {
grid-column : 2 ;
grid-row : 2 ;
}
The absolute best way to integrate autoplacement into already existing projects
though is to leave autoplacement turned off by default and then use a control
comment to enable it when needed. This method is far less likely to cause
something on the site to break.
/* 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 (3 , 1fr );
grid-template-rows : repeat (3 , 1fr );
}
.old-grid-cell {
grid-column : 2 ;
grid-row : 2 ;
}
/* Enable autoplacement when you want to use it in new code */
.new-autoplace-friendly-grid {
/* autoprefixer grid: autoplace */
display : grid;
grid-template-columns : repeat (3 , 1fr );
grid-template-rows : repeat (3 , auto);
}
Note that the grid: "no-autoplace"
setting and the
/* autoprefixer grid: no-autoplace */
control comment share identical
functionality to the grid: true
setting and the /* autoprefixer grid: on */
control comment. There is no need to refactor old code to use no-autoplace
in place of the old true
and on
statements.
Autoplacement limitations
Both columns and rows must be defined
Autoplacement only works inside the explicit grid. The columns and rows need to be defined
so that Autoprefixer knows how many nth-child
selectors to generate.
.not-allowed {
display : grid;
grid-template-columns : repeat (3 , 1fr );
}
.is-allowed {
display : grid;
grid-template-columns : repeat (3 , 1fr );
grid-template-rows : repeat (10 , auto);
}
Repeat auto-fit and auto-fill are not supported
The repeat(auto-fit, ...)
and repeat(auto-fill, ...)
grid functionality relies on
knowledge from the browser about screen dimensions and the number of available grid
items for it to work properly. Autoprefixer does not have access to this information
so unfortunately this little snippet will never be IE friendly.
.grid {
/* This will never be IE friendly */
grid-template-columns : repeat (auto-fit, min-max (200px , 1fr ))
}
No manual cell placement or column/row spans allowed inside an autoplacement grid
Elements must not be manually placed or given column/row spans inside
an autoplacement grid. Only the most basic of autoplacement grids are supported.
Grid cells can still be placed manually outside the the explicit grid though.
Support for manually placing individual grid cells inside an explicit
autoplacement grid is planned for a future release.
.autoplacement-grid {
display : grid;
grid-template-columns : repeat (3 , 1fr );
grid-template-rows : repeat (3 , auto);
}
/* Grid cells placed inside the explicit grid
will break the layout in IE */
.not-permitted-grid-cell {
grid-column : 1 ;
grid-row : 1 ;
}
/* Grid cells placed outside the
explicit grid will work in IE */
.permitted-grid-cell {
grid-column : 1 / span 2 ;
grid-row : 4 ;
}
If manual cell placement is required, we recommend using grid-template
or
grid-template-areas
instead:
.page {
display : grid;
grid-gap : 30px ;
grid-template :
"head head"
"nav main" minmax (100px , 1fr )
"foot foot" /
200px 1fr ;
}
.page__head {
grid-area : head;
}
.page__nav {
grid-area : nav;
}
.page__main {
grid-area : main;
}
.page__footer {
grid-area : foot;
}
Do not create ::before
and ::after
pseudo elements
Let's say you have this HTML:
< div class ="grid ">
< div class ="grid-cell "> </ div >
</ div >
And you write this CSS:
.grid {
display : grid;
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto;
}
.grid ::before {
content : 'before' ;
}
.grid ::after {
content : 'after' ;
}
This will be the output:
.grid {
display : -ms-grid;
display : grid;
-ms-grid-columns : 1fr 1fr ;
grid-template-columns : 1fr 1fr ;
-ms-grid-rows : auto;
grid-template-rows : auto;
}
.grid > * : nth-child (1 ) {
-ms-grid-row : 1 ;
-ms-grid-column : 1 ;
}
.grid > * : nth-child (2 ) {
-ms-grid-row : 1 ;
-ms-grid-column : 2 ;
}
.grid ::before {
content : 'before' ;
}
.grid ::after {
content : 'after' ;
}
IE will place .grid-cell
, ::before
and ::after
in row 1 column 1.
Modern browsers on the other hand will place ::before
in row 1 column 1,
.grid-cell
in row 1 column 2, and ::after
in row 2 column 1.
See this CodePen to see a visualization
of the issue. View the CodePen in both a modern browser and IE to see the difference.
Note that you can still create ::before
and ::after
elements as long as you manually
place them outside the explicit grid.
When changing the grid gap
value, columns and rows must be re-declared
If you wish to change the size of a grid-gap
, you will need to redeclare the grid columns and rows.
.grid {
display : grid;
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto;
grid-gap : 50px ;
}
/* This will *NOT* work in IE */
@media (max-width : 600px ) {
.grid {
grid-gap : 20px ;
}
}
/* This will *NOT* work in IE */
.grid .small-gap {
grid-gap : 20px ;
}
.grid {
display : grid;
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto;
grid-gap : 50px ;
}
/* This *WILL* work in IE */
@media (max-width : 600px ) {
.grid {
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto;
grid-gap : 20px ;
}
}
/* This *WILL* work in IE */
.grid .small-gap {
grid-template-columns : 1fr 1fr ;
grid-template-rows : auto;
grid-gap : 20px ;
}
Run npx autoprefixer --info
in your project directory to check
which browsers are selected and which properties will be prefixed:
$ 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
JS API is also available:
console . log ( autoprefixer ( ) . info ( ) )
To report a security vulnerability, please use the Tidelift security contact .
Tidelift will coordinate the fix and disclosure.
Available as part of the Tidelift Subscription.
The maintainers of autoprefixer
and thousands of other packages are working
with Tidelift to deliver commercial support and maintenance for the open source
dependencies you use to build your applications. Save time, reduce risk,
and improve code health, while paying the maintainers of the exact dependencies
you use. Learn more.
{
"props" : {
"initialPayload" : {
"allShortcutsEnabled" : false ,
"path" : "/" ,
"repo" : {
"id" : 8768406 ,
"defaultBranch" : "main" ,
"name" : "autoprefixer" ,
"ownerLogin" : "postcss" ,
"currentUserCanPush" : false ,
"isFork" : false ,
"isEmpty" : false ,
"createdAt" : "2013-03-14T05:04:51.000Z" ,
"ownerAvatar" : "https://avatars.githubusercontent.com/u/8296347?v=4" ,
"public" : true ,
"private" : false ,
"isOrgOwned" : true
},
"currentUser" : null ,
"refInfo" : {
"name" : "main" ,
"listCacheKey" : "v0:1710975759.0" ,
"canEdit" : false ,
"refType" : "branch" ,
"currentOid" : "8060e33a78f39759f32781dd3518dae90740dc38"
},
"tree" : {
"items" : [
{
"name" : ".github" ,
"path" : ".github" ,
"contentType" : "directory"
},
{
"name" : "bin" ,
"path" : "bin" ,
"contentType" : "directory"
},
{
"name" : "data" ,
"path" : "data" ,
"contentType" : "directory"
},
{
"name" : "lib" ,
"path" : "lib" ,
"contentType" : "directory"
},
{
"name" : "test" ,
"path" : "test" ,
"contentType" : "directory"
},
{
"name" : ".editorconfig" ,
"path" : ".editorconfig" ,
"contentType" : "file"
},
{
"name" : ".gitignore" ,
"path" : ".gitignore" ,
"contentType" : "file"
},
{
"name" : ".npmignore" ,
"path" : ".npmignore" ,
"contentType" : "file"
},
{
"name" : "AUTHORS" ,
"path" : "AUTHORS" ,
"contentType" : "file"
},
{
"name" : "CHANGELOG.md" ,
"path" : "CHANGELOG.md" ,
"contentType" : "file"
},
{
"name" : "LICENSE" ,
"path" : "LICENSE" ,
"contentType" : "file"
},
{
"name" : "README.md" ,
"path" : "README.md" ,
"contentType" : "file"
},
{
"name" : "eslint.config.mjs" ,
"path" : "eslint.config.mjs" ,
"contentType" : "file"
},
{
"name" : "logo.svg" ,
"path" : "logo.svg" ,
"contentType" : "file"
},
{
"name" : "package.json" ,
"path" : "package.json" ,
"contentType" : "file"
},
{
"name" : "pnpm-lock.yaml" ,
"path" : "pnpm-lock.yaml" ,
"contentType" : "file"
}
],
"templateDirectorySuggestionUrl" : null ,
"readme" : null ,
"totalCount" : 16 ,
"showBranchInfobar" : false
},
"fileTree" : null ,
"fileTreeProcessingTime" : null ,
"foldersToFetch" : [],
"treeExpanded" : false ,
"symbolsExpanded" : false ,
"isOverview" : true ,
"overview" : {
"banners" : {
"shouldRecommendReadme" : false ,
"isPersonalRepo" : false ,
"showUseActionBanner" : false ,
"actionSlug" : null ,
"actionId" : null ,
"showProtectBranchBanner" : false ,
"publishBannersInfo" : {
"dismissActionNoticePath" : "/settings/dismiss-notice/publish_action_from_repo" ,
"releasePath" : "/postcss/autoprefixer/releases/new?marketplace=true" ,
"showPublishActionBanner" : false
},
"interactionLimitBanner" : null ,
"showInvitationBanner" : false ,
"inviterName" : null
},
"codeButton" : {
"contactPath" : "/contact" ,
"isEnterprise" : false ,
"local" : {
"protocolInfo" : {
"httpAvailable" : true ,
"sshAvailable" : null ,
"httpUrl" : "https://github.com/postcss/autoprefixer.git" ,
"showCloneWarning" : null ,
"sshUrl" : null ,
"sshCertificatesRequired" : null ,
"sshCertificatesAvailable" : null ,
"ghCliUrl" : "gh repo clone postcss/autoprefixer" ,
"defaultProtocol" : "http" ,
"newSshKeyUrl" : "/settings/ssh/new" ,
"setProtocolPath" : "/users/set_protocol"
},
"platformInfo" : {
"cloneUrl" : "https://desktop.github.com" ,
"showVisualStudioCloneButton" : false ,
"visualStudioCloneUrl" : "https://windows.github.com" ,
"showXcodeCloneButton" : false ,
"xcodeCloneUrl" : "https://developer.apple.com" ,
"zipballUrl" : "/postcss/autoprefixer/archive/refs/heads/main.zip"
}
},
"newCodespacePath" : "/codespaces/new?hide_repo_select=true&repo=8768406"
},
"popovers" : {
"rename" : null ,
"renamedParentRepo" : null
},
"commitCount" : "2,640" ,
"overviewFiles" : [
{
"displayName" : "README.md" ,
"repoName" : "autoprefixer" ,
"refName" : "main" ,
"path" : "README.md" ,
"preferredFileType" : "readme" ,
"tabName" : "README" ,
"richText" : "<article class= \" markdown-body entry-content container-lg \" itemprop= \" text \" ><div class= \" markdown-heading \" dir= \" auto \" ><h1 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Autoprefixer <a href= \" https://cultofmartians.com/tasks/autoprefixer-grid.html \" rel= \" nofollow \" ><img src= \" https://camo.githubusercontent.com/253e85a9b7dea62bb3afabae0f6a507f84f685dd389698b504660345d96be072/68747470733a2f2f63756c746f666d61727469616e732e636f6d2f6173736574732f6261646765732f62616467652e737667 \" alt= \" Cult Of Martians \" data-canonical-src= \" https://cultofmartians.com/assets/badges/badge.svg \" style= \" max-width: 100%; \" ></a></h1><a id= \" user-content-autoprefixer- \" class= \" anchor \" aria-label= \" Permalink: Autoprefixer \" href= \" #autoprefixer- \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" ><a target= \" _blank \" rel= \" noopener noreferrer nofollow \" href= \" https://camo.githubusercontent.com/2094056b09fb1377d966dcdb6d18bf58aa3d17d2eb40c923657224d75323df62/68747470733a2f2f706f73746373732e6769746875622e696f2f6175746f70726566697865722f6c6f676f2e737667 \" ><img align= \" right \" width= \" 94 \" height= \" 71 \" src= \" https://camo.githubusercontent.com/2094056b09fb1377d966dcdb6d18bf58aa3d17d2eb40c923657224d75323df62/68747470733a2f2f706f73746373732e6769746875622e696f2f6175746f70726566697865722f6c6f676f2e737667 \" title= \" Autoprefixer logo by Anton Lovchikov \" data-canonical-src= \" https://postcss.github.io/autoprefixer/logo.svg \" style= \" max-width: 100%; \" ></a></p> \n <p dir= \" auto \" ><a href= \" https://github.com/postcss/postcss \" >PostCSS</a> plugin to parse CSS and add vendor prefixes to CSS rules using values \n from <a href= \" https://caniuse.com/ \" rel= \" nofollow \" >Can I Use</a>. It is recommended by Google and used in Twitter and Alibaba.</p> \n <p dir= \" auto \" >Write your CSS rules without vendor prefixes (in fact, forget about them \n entirely):</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" ::placeholder { \n color: gray; \n } \n\n .image { \n background-image: url([email protected] ); \n } \n @media (min-resolution: 2dppx) { \n .image { \n background-image: url([email protected] ); \n } \n } \" ><pre>::<span class= \" pl-ent \" >placeholder</span> { \n <span class= \" pl-c1 \" >color</span><span class= \" pl-kos \" >:</span> gray; \n } \n\n .<span class= \" pl-c1 \" >image</span> { \n <span class= \" pl-c1 \" >background-image</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >url</span>([email protected] ); \n } \n <span class= \" pl-k \" >@media</span> (<span class= \" pl-c1 \" >min-resolution</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2<span class= \" pl-smi \" >dppx</span></span>) { \n .<span class= \" pl-c1 \" >image</span> { \n <span class= \" pl-c1 \" >background-image</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >url</span>([email protected] ); \n } \n }</pre></div> \n <p dir= \" auto \" >Autoprefixer will use the data based on current browser popularity and property \n support to apply prefixes for you. You can try the <a href= \" https://autoprefixer.github.io/ \" rel= \" nofollow \" >interactive demo</a> \n of Autoprefixer.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" ::-moz-placeholder { \n color: gray; \n } \n ::placeholder { \n color: gray; \n } \n\n .image { \n background-image: url([email protected] ); \n } \n @media (-webkit-min-device-pixel-ratio: 2), \n (min-resolution: 2dppx) { \n .image { \n background-image: url([email protected] ); \n } \n } \" ><pre>::<span class= \" pl-ent \" >-moz-placeholder</span> { \n <span class= \" pl-c1 \" >color</span><span class= \" pl-kos \" >:</span> gray; \n } \n ::<span class= \" pl-ent \" >placeholder</span> { \n <span class= \" pl-c1 \" >color</span><span class= \" pl-kos \" >:</span> gray; \n } \n\n .<span class= \" pl-c1 \" >image</span> { \n <span class= \" pl-c1 \" >background-image</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >url</span>([email protected] ); \n } \n <span class= \" pl-k \" >@media</span> (<span class= \" pl-c1 \" >-webkit-min-device-pixel-ratio</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>)<span class= \" pl-kos \" >,</span> \n (<span class= \" pl-c1 \" >min-resolution</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2<span class= \" pl-smi \" >dppx</span></span>) { \n .<span class= \" pl-c1 \" >image</span> { \n <span class= \" pl-c1 \" >background-image</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >url</span>([email protected] ); \n } \n }</pre></div> \n <p dir= \" auto \" >Twitter account for news and releases: <a href= \" https://twitter.com/autoprefixer \" rel= \" nofollow \" >@autoprefixer</a>.</p> \n <a href= \" https://evilmartians.com/?utm_source=autoprefixer \" rel= \" nofollow \" > \n <img src= \" https://camo.githubusercontent.com/1860f22f15ba04b9bacfd5bef56205a1f4b477f26931e201ef75d917faa01093/68747470733a2f2f6576696c6d61727469616e732e636f6d2f6261646765732f73706f6e736f7265642d62792d6576696c2d6d61727469616e732e737667 \" alt= \" Sponsored by Evil Martians \" width= \" 236 \" height= \" 54 \" data-canonical-src= \" https://evilmartians.com/badges/sponsored-by-evil-martians.svg \" style= \" max-width: 100%; \" > \n </a> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Contents</h2><a id= \" user-content-contents \" class= \" anchor \" aria-label= \" Permalink: Contents \" href= \" #contents \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <ul dir= \" auto \" > \n <li><a href= \" #contents \" >Contents</a></li> \n <li><a href= \" #browsers \" >Browsers</a></li> \n <li><a href= \" #faq \" >FAQ</a> \n <ul dir= \" auto \" > \n <li><a href= \" #does-autoprefixer-polyfill-grid-layout-for-ie \" >Does Autoprefixer polyfill Grid Layout for IE?</a></li> \n <li><a href= \" #does-it-add-polyfills \" >Does it add polyfills?</a></li> \n <li><a href= \" #why-doesnt-autoprefixer-add-prefixes-to-border-radius \" >Why doesn’t Autoprefixer add prefixes to <code>border-radius</code>?</a></li> \n <li><a href= \" #why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes \" >Why does Autoprefixer use unprefixed properties in <code>@-webkit-keyframes</code>?</a></li> \n <li><a href= \" #how-to-work-with-legacy--webkit--only-code \" >How to work with legacy <code>-webkit-</code> only code?</a></li> \n <li><a href= \" #does-autoprefixer-add--epub--prefix \" >Does Autoprefixer add <code>-epub-</code> prefix?</a></li> \n <li><a href= \" #why-doesnt-autoprefixer-transform-generic-font-family-system-ui \" >Why doesn’t Autoprefixer transform generic font-family <code>system-ui</code>?</a></li> \n </ul> \n </li> \n <li><a href= \" #usage \" >Usage</a> \n <ul dir= \" auto \" > \n <li><a href= \" #gulp \" >Gulp</a></li> \n <li><a href= \" #webpack \" >Webpack</a></li> \n <li><a href= \" #css-in-js \" >CSS-in-JS</a></li> \n <li><a href= \" #cli \" >CLI</a></li> \n <li><a href= \" #other-build-tools \" >Other Build Tools</a> \n <ul dir= \" auto \" > \n <li><a href= \" #preprocessors \" >Preprocessors</a></li> \n <li><a href= \" #gui-tools \" >GUI Tools</a></li> \n </ul> \n </li> \n <li><a href= \" #javascript \" >JavaScript</a></li> \n <li><a href= \" #text-editors-and-ide \" >Text Editors and IDE</a></li> \n </ul> \n </li> \n <li><a href= \" #warnings \" >Warnings</a></li> \n <li><a href= \" #disabling \" >Disabling</a> \n <ul dir= \" auto \" > \n <li><a href= \" #prefixes \" >Prefixes</a></li> \n <li><a href= \" #features \" >Features</a></li> \n <li><a href= \" #control-comments \" >Control Comments</a></li> \n </ul> \n </li> \n <li><a href= \" #options \" >Options</a></li> \n <li><a href= \" #environment-variables \" >Environment Variables</a> \n <ul dir= \" auto \" > \n <li><a href= \" #using-environment-variables-to-support-css-grid-prefixes-in-create-react-app \" >Using environment variables to support CSS Grid prefixes in Create React App</a></li> \n </ul> \n </li> \n <li><a href= \" #grid-autoplacement-support-in-ie \" >Grid Autoplacement support in IE</a> \n <ul dir= \" auto \" > \n <li><a href= \" #beware-of-enabling-autoplacement-in-old-projects \" >Beware of enabling autoplacement in old projects</a></li> \n <li><a href= \" #autoplacement-limitations \" >Autoplacement limitations</a> \n <ul dir= \" auto \" > \n <li><a href= \" #both-columns-and-rows-must-be-defined \" >Both columns and rows must be defined</a></li> \n <li><a href= \" #repeat-auto-fit-and-auto-fill-are-not-supported \" >Repeat auto-fit and auto-fill are not supported</a></li> \n <li><a href= \" #no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid \" >No manual cell placement or column/row spans allowed inside an autoplacement grid</a></li> \n <li><a href= \" #do-not-create-before-and-after-pseudo-elements \" >Do not create <code>::before</code> and <code>::after</code> pseudo elements</a></li> \n <li><a href= \" #when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared \" >When changing the <code>grid gap</code> value, columns and rows must be re-declared</a></li> \n </ul> \n </li> \n </ul> \n </li> \n <li><a href= \" #debug \" >Debug</a></li> \n <li><a href= \" #security-contact \" >Security Contact</a></li> \n <li><a href= \" #for-enterprise \" >For Enterprise</a></li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Browsers</h2><a id= \" user-content-browsers \" class= \" anchor \" aria-label= \" Permalink: Browsers \" href= \" #browsers \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoprefixer uses <a href= \" https://github.com/browserslist/browserslist \" >Browserslist</a>, so you can specify the browsers \n you want to target in your project with queries like <code>> 5%</code> \n (see <a href= \" https://github.com/browserslist/browserslist#best-practices \" >Best Practices</a>).</p> \n <p dir= \" auto \" >The best way to provide browsers is a <code>.browserslistrc</code> file in your project \n root, or by adding a <code>browserslist</code> key to your <code>package.json</code>.</p> \n <p dir= \" auto \" >We recommend the use of these options over passing options to Autoprefixer so \n that the config can be shared with other tools such as <a href= \" https://github.com/babel/babel/tree/master/packages/babel-preset-env \" >babel-preset-env</a> and \n <a href= \" https://stylelint.io/ \" rel= \" nofollow \" >Stylelint</a>.</p> \n <p dir= \" auto \" >See <a href= \" https://github.com/browserslist/browserslist#queries \" >Browserslist docs</a> for queries, browser names, config format, and defaults.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >FAQ</h2><a id= \" user-content-faq \" class= \" anchor \" aria-label= \" Permalink: FAQ \" href= \" #faq \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Does Autoprefixer polyfill Grid Layout for IE?</h3><a id= \" user-content-does-autoprefixer-polyfill-grid-layout-for-ie \" class= \" anchor \" aria-label= \" Permalink: Does Autoprefixer polyfill Grid Layout for IE? \" href= \" #does-autoprefixer-polyfill-grid-layout-for-ie \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 \n and IE 11 syntax, but this polyfill will not work in 100% of cases. \n This is why it is disabled by default.</p> \n <p dir= \" auto \" >First, you need to enable Grid prefixes by using either the <code>grid: \" autoplace \" </code> \n option or the <code>/* autoprefixer grid: autoplace */</code> control comment. \n Also you can use environment variable to enable Grid: \n <code>AUTOPREFIXER_GRID=autoplace npm build</code>.</p> \n <p dir= \" auto \" >Second, you need to test every fix with Grid in IE. It is not an enable and \n forget feature, but it is still very useful. \n Financial Times and Yandex use it in production.</p> \n <p dir= \" auto \" >Third, there is only very limited auto placement support. Read the \n <a href= \" #grid-autoplacement-support-in-ie \" >Grid Autoplacement support in IE</a> section \n for more details.</p> \n <p dir= \" auto \" >Fourth, if you are not using the autoplacement feature, the best way \n to use Autoprefixer is by using <code>grid-template</code> or <code>grid-template-areas</code>.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .page { \n display: grid; \n grid-gap: 33px; \n grid-template: \n "head head head" 1fr \n "nav main main" minmax(100px, 1fr) \n "nav foot foot" 2fr / \n 1fr 100px 1fr; \n } \n .page__head { \n grid-area: head; \n } \n .page__nav { \n grid-area: nav; \n } \n .page__main { \n grid-area: main; \n } \n .page__footer { \n grid-area: foot; \n } \" ><pre>.<span class= \" pl-c1 \" >page</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >33<span class= \" pl-smi \" >px</span></span>; \n <span class= \" pl-c1 \" >grid-template</span><span class= \" pl-kos \" >:</span> \n <span class= \" pl-s \" > \" head head head \" </span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> \n <span class= \" pl-s \" > \" nav main main \" </span> <span class= \" pl-en \" >minmax</span>(<span class= \" pl-c1 \" >100<span class= \" pl-smi \" >px</span></span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>) \n <span class= \" pl-s \" > \" nav foot foot \" </span> <span class= \" pl-c1 \" >2<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >/</span> \n <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >100<span class= \" pl-smi \" >px</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n } \n .<span class= \" pl-c1 \" >page__head</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> head; \n } \n .<span class= \" pl-c1 \" >page__nav</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> nav; \n } \n .<span class= \" pl-c1 \" >page__main</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> main; \n } \n .<span class= \" pl-c1 \" >page__footer</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> foot; \n }</pre></div> \n <p dir= \" auto \" >See also:</p> \n <ul dir= \" auto \" > \n <li><a href= \" https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ \" rel= \" nofollow \" >The guide about Grids in IE and Autoprefixer</a>.</li> \n <li><a href= \" https://github.com/jonathantneal/postcss-gap-properties \" ><code>postcss-gap-properties</code></a> to use new <code>gap</code> property \n instead of old <code>grid-gap</code>.</li> \n <li><a href= \" https://github.com/sylvainpolletvillard/postcss-grid-kiss \" ><code>postcss-grid-kiss</code></a> has alternate “everything in one property” syntax, \n which makes using Autoprefixer’s Grid translations safer.</li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Does it add polyfills?</h3><a id= \" user-content-does-it-add-polyfills \" class= \" anchor \" aria-label= \" Permalink: Does it add polyfills? \" href= \" #does-it-add-polyfills \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >No. Autoprefixer only adds prefixes.</p> \n <p dir= \" auto \" >Most new CSS features will require client side JavaScript to handle a new \n behavior correctly.</p> \n <p dir= \" auto \" >Depending on what you consider to be a “polyfill”, you can take a look at some \n other tools and libraries. If you are just looking for syntax sugar, \n you might take a look at:</p> \n <ul dir= \" auto \" > \n <li><a href= \" https://github.com/jonathantneal/postcss-preset-env \" >postcss-preset-env</a> is a plugins preset with polyfills and Autoprefixer \n to write future CSS today.</li> \n <li><a href= \" https://github.com/jonathantneal/oldie \" >Oldie</a>, a PostCSS plugin that handles some IE hacks (opacity, rgba, etc).</li> \n <li><a href= \" https://github.com/luisrudge/postcss-flexbugs-fixes \" >postcss-flexbugs-fixes</a>, a PostCSS plugin to fix flexbox issues.</li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Why doesn’t Autoprefixer add prefixes to <code>border-radius</code>?</h3><a id= \" user-content-why-doesnt-autoprefixer-add-prefixes-to-border-radius \" class= \" anchor \" aria-label= \" Permalink: Why doesn’t Autoprefixer add prefixes to border-radius? \" href= \" #why-doesnt-autoprefixer-add-prefixes-to-border-radius \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Developers are often surprised by how few prefixes are required today. \n If Autoprefixer doesn’t add prefixes to your CSS, check if they’re still \n required on <a href= \" https://caniuse.com/ \" rel= \" nofollow \" >Can I Use</a>.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Why does Autoprefixer use unprefixed properties in <code>@-webkit-keyframes</code>?</h3><a id= \" user-content-why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes \" class= \" anchor \" aria-label= \" Permalink: Why does Autoprefixer use unprefixed properties in @-webkit-keyframes? \" href= \" #why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Browser teams can remove some prefixes before others, so we try to use all \n combinations of prefixed/unprefixed values.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >How to work with legacy <code>-webkit-</code> only code?</h3><a id= \" user-content-how-to-work-with-legacy--webkit--only-code \" class= \" anchor \" aria-label= \" Permalink: How to work with legacy -webkit- only code? \" href= \" #how-to-work-with-legacy--webkit--only-code \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoprefixer needs unprefixed property to add prefixes. So if you only \n wrote <code>-webkit-gradient</code> without W3C’s <code>gradient</code>, \n Autoprefixer will not add other prefixes.</p> \n <p dir= \" auto \" >But <a href= \" https://github.com/postcss/postcss \" >PostCSS</a> has plugins to convert CSS to unprefixed state. \n Use <a href= \" https://github.com/gucong3000/postcss-unprefix \" >postcss-unprefix</a> before Autoprefixer.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Does Autoprefixer add <code>-epub-</code> prefix?</h3><a id= \" user-content-does-autoprefixer-add--epub--prefix \" class= \" anchor \" aria-label= \" Permalink: Does Autoprefixer add -epub- prefix? \" href= \" #does-autoprefixer-add--epub--prefix \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >No, Autoprefixer works only with browsers prefixes from Can I Use. \n But you can use <a href= \" https://github.com/Rycochet/postcss-epub \" >postcss-epub</a> for prefixing ePub3 properties.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Why doesn’t Autoprefixer transform generic font-family <code>system-ui</code>?</h3><a id= \" user-content-why-doesnt-autoprefixer-transform-generic-font-family-system-ui \" class= \" anchor \" aria-label= \" Permalink: Why doesn’t Autoprefixer transform generic font-family system-ui? \" href= \" #why-doesnt-autoprefixer-transform-generic-font-family-system-ui \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" ><code>system-ui</code> is technically not a prefix and the transformation is not \n future-proof. You can use <a href= \" https://github.com/JLHwung/postcss-font-family-system-ui \" >postcss-font-family-system-ui</a> to transform \n <code>system-ui</code> to a practical font-family list.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Usage</h2><a id= \" user-content-usage \" class= \" anchor \" aria-label= \" Permalink: Usage \" href= \" #usage \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Gulp</h3><a id= \" user-content-gulp \" class= \" anchor \" aria-label= \" Permalink: Gulp \" href= \" #gulp \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >In Gulp you can use <a href= \" https://github.com/postcss/gulp-postcss \" >gulp-postcss</a> with <code>autoprefixer</code> npm package.</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" gulp.task('autoprefixer', () => { \n const autoprefixer = require('autoprefixer') \n const sourcemaps = require('gulp-sourcemaps') \n const postcss = require('gulp-postcss') \n\n return gulp.src('./src/*.css') \n .pipe(sourcemaps.init()) \n .pipe(postcss([ autoprefixer() ])) \n .pipe(sourcemaps.write('.')) \n .pipe(gulp.dest('./dest')) \n }) \" ><pre><span class= \" pl-s1 \" >gulp</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >task</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'autoprefixer'</span><span class= \" pl-kos \" >,</span> <span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span> <span class= \" pl-c1 \" >=></span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-k \" >const</span> <span class= \" pl-s1 \" >autoprefixer</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'autoprefixer'</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-k \" >const</span> <span class= \" pl-s1 \" >sourcemaps</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'gulp-sourcemaps'</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-k \" >const</span> <span class= \" pl-s1 \" >postcss</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'gulp-postcss'</span><span class= \" pl-kos \" >)</span> \n\n <span class= \" pl-k \" >return</span> <span class= \" pl-s1 \" >gulp</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >src</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'./src/*.css'</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >.</span><span class= \" pl-en \" >pipe</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >sourcemaps</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >init</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >.</span><span class= \" pl-en \" >pipe</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >postcss</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >[</span> <span class= \" pl-s1 \" >autoprefixer</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span> <span class= \" pl-kos \" >]</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >.</span><span class= \" pl-en \" >pipe</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >sourcemaps</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >write</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'.'</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >.</span><span class= \" pl-en \" >pipe</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >gulp</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >dest</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'./dest'</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >)</span></pre></div> \n <p dir= \" auto \" >With <code>gulp-postcss</code> you also can combine Autoprefixer \n with <a href= \" https://github.com/postcss/postcss#plugins \" >other PostCSS plugins</a>.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Webpack</h3><a id= \" user-content-webpack \" class= \" anchor \" aria-label= \" Permalink: Webpack \" href= \" #webpack \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >In <a href= \" https://webpack.js.org/ \" rel= \" nofollow \" >webpack</a> you can use <a href= \" https://github.com/postcss/postcss-loader \" >postcss-loader</a> with <code>autoprefixer</code> \n and <a href= \" https://github.com/postcss/postcss#plugins \" >other PostCSS plugins</a>.</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" module.exports = { \n module: { \n rules: [ \n { \n test: / \\ .css$/, \n use: ["style-loader", "css-loader", "postcss-loader"] \n } \n ] \n } \n } \" ><pre><span class= \" pl-smi \" >module</span><span class= \" pl-kos \" >.</span><span class= \" pl-c1 \" >exports</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >module</span>: <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >rules</span>: <span class= \" pl-kos \" >[</span> \n <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >test</span>: <span class= \" pl-pds \" ><span class= \" pl-c1 \" >/</span> \\ .css$<span class= \" pl-c1 \" >/</span></span><span class= \" pl-kos \" >,</span> \n <span class= \" pl-c1 \" >use</span>: <span class= \" pl-kos \" >[</span><span class= \" pl-s \" > \" style-loader \" </span><span class= \" pl-kos \" >,</span> <span class= \" pl-s \" > \" css-loader \" </span><span class= \" pl-kos \" >,</span> <span class= \" pl-s \" > \" postcss-loader \" </span><span class= \" pl-kos \" >]</span> \n <span class= \" pl-kos \" >}</span> \n <span class= \" pl-kos \" >]</span> \n <span class= \" pl-kos \" >}</span> \n <span class= \" pl-kos \" >}</span></pre></div> \n <p dir= \" auto \" >And create a <code>postcss.config.js</code> with:</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" module.exports = { \n plugins: [ \n require('autoprefixer') \n ] \n } \" ><pre><span class= \" pl-smi \" >module</span><span class= \" pl-kos \" >.</span><span class= \" pl-c1 \" >exports</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >plugins</span>: <span class= \" pl-kos \" >[</span> \n <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'autoprefixer'</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >]</span> \n <span class= \" pl-kos \" >}</span></pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >CSS-in-JS</h3><a id= \" user-content-css-in-js \" class= \" anchor \" aria-label= \" Permalink: CSS-in-JS \" href= \" #css-in-js \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >The best way to use PostCSS with CSS-in-JS is <a href= \" https://github.com/4Catalyzer/astroturf \" ><code>astroturf</code></a>. \n Add its loader to your <code>webpack.config.js</code>:</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" module.exports = { \n module: { \n rules: [ \n { \n test: / \\ .css$/, \n use: ['style-loader', 'postcss-loader'], \n }, \n { \n test: / \\ .jsx?$/, \n use: ['babel-loader', 'astroturf/loader'], \n } \n ] \n } \n } \" ><pre><span class= \" pl-smi \" >module</span><span class= \" pl-kos \" >.</span><span class= \" pl-c1 \" >exports</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >module</span>: <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >rules</span>: <span class= \" pl-kos \" >[</span> \n <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >test</span>: <span class= \" pl-pds \" ><span class= \" pl-c1 \" >/</span> \\ .css$<span class= \" pl-c1 \" >/</span></span><span class= \" pl-kos \" >,</span> \n <span class= \" pl-c1 \" >use</span>: <span class= \" pl-kos \" >[</span><span class= \" pl-s \" >'style-loader'</span><span class= \" pl-kos \" >,</span> <span class= \" pl-s \" >'postcss-loader'</span><span class= \" pl-kos \" >]</span><span class= \" pl-kos \" >,</span> \n <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >,</span> \n <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >test</span>: <span class= \" pl-pds \" ><span class= \" pl-c1 \" >/</span> \\ .jsx?$<span class= \" pl-c1 \" >/</span></span><span class= \" pl-kos \" >,</span> \n <span class= \" pl-c1 \" >use</span>: <span class= \" pl-kos \" >[</span><span class= \" pl-s \" >'babel-loader'</span><span class= \" pl-kos \" >,</span> <span class= \" pl-s \" >'astroturf/loader'</span><span class= \" pl-kos \" >]</span><span class= \" pl-kos \" >,</span> \n <span class= \" pl-kos \" >}</span> \n <span class= \" pl-kos \" >]</span> \n <span class= \" pl-kos \" >}</span> \n <span class= \" pl-kos \" >}</span></pre></div> \n <p dir= \" auto \" >Then create <code>postcss.config.js</code>:</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" module.exports = { \n plugins: [ \n require('autoprefixer') \n ] \n } \" ><pre><span class= \" pl-smi \" >module</span><span class= \" pl-kos \" >.</span><span class= \" pl-c1 \" >exports</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-c1 \" >plugins</span>: <span class= \" pl-kos \" >[</span> \n <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'autoprefixer'</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >]</span> \n <span class= \" pl-kos \" >}</span></pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >CLI</h3><a id= \" user-content-cli \" class= \" anchor \" aria-label= \" Permalink: CLI \" href= \" #cli \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >You can use the <a href= \" https://github.com/postcss/postcss-cli \" >postcss-cli</a> to run Autoprefixer from CLI:</p> \n <div class= \" highlight highlight-source-shell notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" npm install postcss postcss-cli autoprefixer \n npx postcss *.css --use autoprefixer -d build/ \" ><pre>npm install postcss postcss-cli autoprefixer \n npx postcss <span class= \" pl-k \" >*</span>.css --use autoprefixer -d build/</pre></div> \n <p dir= \" auto \" >See <code>postcss -h</code> for help.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Other Build Tools</h3><a id= \" user-content-other-build-tools \" class= \" anchor \" aria-label= \" Permalink: Other Build Tools \" href= \" #other-build-tools \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <ul dir= \" auto \" > \n <li><strong>Grunt:</strong> <a href= \" https://github.com/C-Lodder/grunt-postcss \" >grunt-postcss</a></li> \n <li><strong>Ruby on Rails</strong>: <a href= \" https://github.com/ai/autoprefixer-rails \" >autoprefixer-rails</a></li> \n <li><strong>Neutrino</strong>: <a href= \" https://www.npmjs.com/package/neutrino-middleware-postcss \" rel= \" nofollow \" >neutrino-middleware-postcss</a></li> \n <li><strong>Jekyll</strong>: add <code>autoprefixer-rails</code> and <code>jekyll-assets</code> to <code>Gemfile</code></li> \n <li><strong>Brunch</strong>: <a href= \" https://github.com/iamvdo/postcss-brunch \" >postcss-brunch</a></li> \n <li><strong>Broccoli</strong>: <a href= \" https://github.com/jeffjewiss/broccoli-postcss \" >broccoli-postcss</a></li> \n <li><strong>Middleman</strong>: <a href= \" https://github.com/middleman/middleman-autoprefixer \" >middleman-autoprefixer</a></li> \n <li><strong>Mincer</strong>: add <code>autoprefixer</code> npm package and enable it: \n <code>environment.enable('autoprefixer')</code></li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Preprocessors</h4><a id= \" user-content-preprocessors \" class= \" anchor \" aria-label= \" Permalink: Preprocessors \" href= \" #preprocessors \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <ul dir= \" auto \" > \n <li><strong>Less</strong>: <a href= \" https://github.com/less/less-plugin-autoprefix \" >less-plugin-autoprefix</a></li> \n <li><strong>Stylus</strong>: <a href= \" https://github.com/jenius/autoprefixer-stylus \" >autoprefixer-stylus</a></li> \n <li><strong>Compass</strong>: <a href= \" https://github.com/ai/autoprefixer-rails#compass \" >autoprefixer-rails#compass</a></li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >GUI Tools</h4><a id= \" user-content-gui-tools \" class= \" anchor \" aria-label= \" Permalink: GUI Tools \" href= \" #gui-tools \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <ul dir= \" auto \" > \n <li><a href= \" https://codekitapp.com/help/autoprefixer/ \" rel= \" nofollow \" >CodeKit</a></li> \n <li><a href= \" https://prepros.io \" rel= \" nofollow \" >Prepros</a></li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >JavaScript</h3><a id= \" user-content-javascript \" class= \" anchor \" aria-label= \" Permalink: JavaScript \" href= \" #javascript \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >You can use Autoprefixer with <a href= \" https://github.com/postcss/postcss \" >PostCSS</a> in your Node.js application \n or if you want to develop an Autoprefixer plugin for a new environment.</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" const autoprefixer = require('autoprefixer') \n const postcss = require('postcss') \n\n postcss([ autoprefixer ]).process(css).then(result => { \n result.warnings().forEach(warn => { \n console.warn(warn.toString()) \n }) \n console.log(result.css) \n }) \" ><pre><span class= \" pl-k \" >const</span> <span class= \" pl-s1 \" >autoprefixer</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'autoprefixer'</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-k \" >const</span> <span class= \" pl-s1 \" >postcss</span> <span class= \" pl-c1 \" >=</span> <span class= \" pl-en \" >require</span><span class= \" pl-kos \" >(</span><span class= \" pl-s \" >'postcss'</span><span class= \" pl-kos \" >)</span> \n\n <span class= \" pl-s1 \" >postcss</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >[</span> <span class= \" pl-s1 \" >autoprefixer</span> <span class= \" pl-kos \" >]</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >process</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >css</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >then</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >result</span> <span class= \" pl-c1 \" >=></span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-s1 \" >result</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >warnings</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >forEach</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >warn</span> <span class= \" pl-c1 \" >=></span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-smi \" >console</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >warn</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >warn</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >toString</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-smi \" >console</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >log</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >result</span><span class= \" pl-kos \" >.</span><span class= \" pl-c1 \" >css</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >)</span></pre></div> \n <p dir= \" auto \" >There is also a <a href= \" https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js \" >standalone build</a> for the browser or for a non-Node.js runtime.</p> \n <p dir= \" auto \" >You can use <a href= \" https://github.com/RebelMail/html-autoprefixer \" >html-autoprefixer</a> to process HTML with inlined CSS.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Text Editors and IDE</h3><a id= \" user-content-text-editors-and-ide \" class= \" anchor \" aria-label= \" Permalink: Text Editors and IDE \" href= \" #text-editors-and-ide \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoprefixer should be used in assets build tools. Text editor plugins are not \n a good solution, because prefixes decrease code readability and you will need \n to change values in all prefixed properties.</p> \n <p dir= \" auto \" >I recommend you to learn how to use build tools like <a href= \" https://parceljs.org/ \" rel= \" nofollow \" >Parcel</a>. \n They work much better and will open you a whole new world of useful plugins \n and automation.</p> \n <p dir= \" auto \" >If you can’t move to a build tool, you can use text editor plugins:</p> \n <ul dir= \" auto \" > \n <li><a href= \" https://github.com/mrmlnc/vscode-autoprefixer \" >Visual Studio Code</a></li> \n <li><a href= \" https://github.com/sindresorhus/sublime-autoprefixer \" >Sublime Text</a></li> \n </ul> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Warnings</h2><a id= \" user-content-warnings \" class= \" anchor \" aria-label= \" Permalink: Warnings \" href= \" #warnings \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoprefixer uses the <a href= \" https://postcss.org/api/#warning \" rel= \" nofollow \" >PostCSS warning API</a> to warn about really important \n problems in your CSS:</p> \n <ul dir= \" auto \" > \n <li>Old direction syntax in gradients.</li> \n <li>Old unprefixed <code>display: box</code> instead of <code>display: flex</code> \n by latest specification version.</li> \n </ul> \n <p dir= \" auto \" >You can get warnings from <code>result.warnings()</code>:</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" result.warnings().forEach(warn => { \n console.warn(warn.toString()) \n }) \" ><pre><span class= \" pl-s1 \" >result</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >warnings</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >forEach</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >warn</span> <span class= \" pl-c1 \" >=></span> <span class= \" pl-kos \" >{</span> \n <span class= \" pl-smi \" >console</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >warn</span><span class= \" pl-kos \" >(</span><span class= \" pl-s1 \" >warn</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >toString</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span> \n <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >)</span></pre></div> \n <p dir= \" auto \" >Every Autoprefixer runner should display these warnings.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Disabling</h2><a id= \" user-content-disabling \" class= \" anchor \" aria-label= \" Permalink: Disabling \" href= \" #disabling \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Prefixes</h3><a id= \" user-content-prefixes \" class= \" anchor \" aria-label= \" Permalink: Prefixes \" href= \" #prefixes \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoprefixer was designed to have no interface – it just works. \n If you need some browser specific hack just write a prefixed property \n after the unprefixed one.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" a { \n transform: scale(0.5); \n -moz-transform: scale(0.6); \n } \" ><pre><span class= \" pl-ent \" >a</span> { \n <span class= \" pl-c1 \" >transform</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >scale</span>(<span class= \" pl-c1 \" >0.5</span>); \n <span class= \" pl-c1 \" >-moz-transform</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >scale</span>(<span class= \" pl-c1 \" >0.6</span>); \n }</pre></div> \n <p dir= \" auto \" >If some prefixes were generated incorrectly, please create an <a href= \" https://github.com/postcss/autoprefixer/issues \" >issue on GitHub</a>.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Features</h3><a id= \" user-content-features \" class= \" anchor \" aria-label= \" Permalink: Features \" href= \" #features \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >You can use these plugin options to control some of Autoprefixer’s features.</p> \n <ul dir= \" auto \" > \n <li><code>grid: \" autoplace \" </code> will enable <code>-ms-</code> prefixes for Grid Layout including some \n <a href= \" #grid-autoplacement-support-in-ie \" >limited autoplacement support</a>.</li> \n <li><code>supports: false</code> will disable <code>@supports</code> parameters prefixing.</li> \n <li><code>flexbox: false</code> will disable flexbox properties prefixing. \n Or <code>flexbox: \" no-2009 \" </code> will add prefixes only for final and IE \n versions of specification.</li> \n <li><code>remove: false</code> will disable cleaning outdated prefixes.</li> \n </ul> \n <p dir= \" auto \" >You should set them inside the plugin like so:</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" autoprefixer({ grid: 'autoplace' }) \" ><pre><span class= \" pl-en \" >autoprefixer</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >{</span> <span class= \" pl-c1 \" >grid</span>: <span class= \" pl-s \" >'autoplace'</span> <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >)</span></pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Control Comments</h3><a id= \" user-content-control-comments \" class= \" anchor \" aria-label= \" Permalink: Control Comments \" href= \" #control-comments \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >If you do not need Autoprefixer in some part of your CSS, \n you can use control comments to disable Autoprefixer.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .a { \n transition: 1s; /* will be prefixed */ \n } \n\n .b { \n /* autoprefixer: off */ \n transition: 1s; /* will not be prefixed */ \n } \n\n .c { \n /* autoprefixer: ignore next */ \n transition: 1s; /* will not be prefixed */ \n mask: url(image.png); /* will be prefixed */ \n } \" ><pre>.<span class= \" pl-c1 \" >a</span> { \n <span class= \" pl-c1 \" >transition</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >s</span></span>; <span class= \" pl-c \" >/* will be prefixed */</span> \n } \n\n .<span class= \" pl-c1 \" >b</span> { \n <span class= \" pl-c \" >/* autoprefixer: off */</span> \n <span class= \" pl-c1 \" >transition</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >s</span></span>; <span class= \" pl-c \" >/* will not be prefixed */</span> \n } \n\n .<span class= \" pl-c1 \" >c</span> { \n <span class= \" pl-c \" >/* autoprefixer: ignore next */</span> \n <span class= \" pl-c1 \" >transition</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >s</span></span>; <span class= \" pl-c \" >/* will not be prefixed */</span> \n <span class= \" pl-c1 \" >mask</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >url</span>(image.png); <span class= \" pl-c \" >/* will be prefixed */</span> \n }</pre></div> \n <p dir= \" auto \" >There are three types of control comments:</p> \n <ul dir= \" auto \" > \n <li><code>/* autoprefixer: (on|off) */</code>: enable/disable all Autoprefixer translations for the \n whole block both <em>before</em> and <em>after</em> the comment.</li> \n <li><code>/* autoprefixer: ignore next */</code>: disable Autoprefixer only for the next property \n or next rule selector or at-rule parameters (but not rule/at‑rule body).</li> \n <li><code>/* autoprefixer grid: (autoplace|no-autoplace|off) */</code>: control how Autoprefixer handles \n grid translations for the whole block: \n <ul dir= \" auto \" > \n <li><code>autoplace</code>: enable grid translations with autoplacement support.</li> \n <li><code>no-autoplace</code>: enable grid translations with autoplacement \n support <em>disabled</em> (alias for deprecated value <code>on</code>).</li> \n <li><code>off</code>: disable all grid translations.</li> \n </ul> \n </li> \n </ul> \n <p dir= \" auto \" >You can also use comments recursively:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* autoprefixer: off */ \n @supports (transition: all) { \n /* autoprefixer: on */ \n a { \n /* autoprefixer: off */ \n } \n } \" ><pre><span class= \" pl-c \" >/* autoprefixer: off */</span> \n <span class= \" pl-k \" >@supports</span> (<span class= \" pl-c1 \" >transition</span><span class= \" pl-kos \" >:</span> all) { \n <span class= \" pl-c \" >/* autoprefixer: on */</span> \n <span class= \" pl-ent \" >a</span> { \n <span class= \" pl-c \" >/* autoprefixer: off */</span> \n } \n }</pre></div> \n <p dir= \" auto \" >Note that comments that disable the whole block should not be featured in the same \n block twice:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* How not to use block level control comments */ \n\n .do-not-do-this { \n /* autoprefixer: off */ \n transition: 1s; \n /* autoprefixer: on */ \n transform: rotate(20deg); \n } \" ><pre><span class= \" pl-c \" >/* How not to use block level control comments */</span> \n\n .<span class= \" pl-c1 \" >do-not-do-this</span> { \n <span class= \" pl-c \" >/* autoprefixer: off */</span> \n <span class= \" pl-c1 \" >transition</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >s</span></span>; \n <span class= \" pl-c \" >/* autoprefixer: on */</span> \n <span class= \" pl-c1 \" >transform</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >rotate</span>(<span class= \" pl-c1 \" >20<span class= \" pl-smi \" >deg</span></span>); \n }</pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Options</h2><a id= \" user-content-options \" class= \" anchor \" aria-label= \" Permalink: Options \" href= \" #options \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Function <code>autoprefixer(options)</code> returns a new PostCSS plugin. \n See <a href= \" https://postcss.org/api/ \" rel= \" nofollow \" >PostCSS API</a> for plugin usage documentation.</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" autoprefixer({ cascade: false }) \" ><pre><span class= \" pl-en \" >autoprefixer</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >{</span> <span class= \" pl-c1 \" >cascade</span>: <span class= \" pl-c1 \" >false</span> <span class= \" pl-kos \" >}</span><span class= \" pl-kos \" >)</span></pre></div> \n <p dir= \" auto \" >Available options are:</p> \n <ul dir= \" auto \" > \n <li><code>env</code> (string): environment for Browserslist.</li> \n <li><code>cascade</code> (boolean): should Autoprefixer use Visual Cascade, \n if CSS is uncompressed. Default: <code>true</code></li> \n <li><code>add</code> (boolean): should Autoprefixer add prefixes. Default is <code>true</code>.</li> \n <li><code>remove</code> (boolean): should Autoprefixer [remove outdated] prefixes. \n Default is <code>true</code>.</li> \n <li><code>supports</code> (boolean): should Autoprefixer add prefixes for <code>@supports</code> \n parameters. Default is <code>true</code>.</li> \n <li><code>flexbox</code> (boolean|string): should Autoprefixer add prefixes for flexbox \n properties. With <code> \" no-2009 \" </code> value Autoprefixer will add prefixes only \n for final and IE 10 versions of specification. Default is <code>true</code>.</li> \n <li><code>grid</code> (false|<code> \" autoplace \" </code>|<code> \" no-autoplace \" </code>): should Autoprefixer \n add IE 10-11 prefixes for Grid Layout properties? \n <ul dir= \" auto \" > \n <li><code>false</code> (default): prevent Autoprefixer from outputting \n CSS Grid translations.</li> \n <li><code> \" autoplace \" </code>: enable Autoprefixer grid translations \n and <em>include</em> autoplacement support. You can also use \n <code>/* autoprefixer grid: autoplace */</code> in your CSS.</li> \n <li><code> \" no-autoplace \" </code>: enable Autoprefixer grid translations \n but <em>exclude</em> autoplacement support. You can also use \n <code>/* autoprefixer grid: no-autoplace */</code> in your CSS. \n (alias for the deprecated <code>true</code> value)</li> \n </ul> \n </li> \n <li><code>stats</code> (object): custom <a href= \" https://github.com/browserslist/browserslist#custom-usage-data \" >usage statistics</a> for <code>> 10% in my stats</code> \n browsers query.</li> \n <li><code>overrideBrowserslist</code> (array): list of queries for target browsers. \n Try to not use it. The best practice is to use <code>.browserslistrc</code> config \n or <code>browserslist</code> key in <code>package.json</code> to share target browsers \n with Babel, ESLint and Stylelint. See <a href= \" https://github.com/browserslist/browserslist#queries \" >Browserslist docs</a> \n for available queries and default value.</li> \n <li><code>ignoreUnknownVersions</code> (boolean): do not raise error on unknown browser \n version in Browserslist config. Default is <code>false</code>.</li> \n </ul> \n <p dir= \" auto \" >Plugin object has <code>info()</code> method for debugging purpose.</p> \n <p dir= \" auto \" >You can use PostCSS processor to process several CSS files \n to increase performance.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Environment Variables</h2><a id= \" user-content-environment-variables \" class= \" anchor \" aria-label= \" Permalink: Environment Variables \" href= \" #environment-variables \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <ul dir= \" auto \" > \n <li><code>AUTOPREFIXER_GRID</code>: (<code>autoplace</code>|<code>no-autoplace</code>) should Autoprefixer \n add IE 10-11 prefixes for Grid Layout properties? \n <ul dir= \" auto \" > \n <li><code>autoplace</code>: enable Autoprefixer grid translations \n and <em>include</em> autoplacement support.</li> \n <li><code>no-autoplace</code>: enable Autoprefixer grid translations \n but <em>exclude</em> autoplacement support.</li> \n </ul> \n </li> \n </ul> \n <p dir= \" auto \" >Environment variables are useful, when you want to change Autoprefixer options but don't have access to config files. \n Create React App is a good example of this.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Using environment variables to support CSS Grid prefixes in Create React App</h3><a id= \" user-content-using-environment-variables-to-support-css-grid-prefixes-in-create-react-app \" class= \" anchor \" aria-label= \" Permalink: Using environment variables to support CSS Grid prefixes in Create React App \" href= \" #using-environment-variables-to-support-css-grid-prefixes-in-create-react-app \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <ol dir= \" auto \" > \n <li>Install the latest version of Autoprefixer and <a href= \" https://www.npmjs.com/package/cross-env \" rel= \" nofollow \" >cross-env</a>:</li> \n </ol> \n <div class= \" snippet-clipboard-content notranslate position-relative overflow-auto \" data-snippet-clipboard-copy-content= \" npm install autoprefixer@latest cross-env --save-dev \" ><pre class= \" notranslate \" ><code>npm install autoprefixer@latest cross-env --save-dev \n </code></pre></div> \n <ol start= \" 2 \" dir= \" auto \" > \n <li>Under <code> \" browserslist \" </code> > <code> \" development \" </code> in the package.json file, add <code> \" last 1 ie version \" </code></li> \n </ol> \n <div class= \" snippet-clipboard-content notranslate position-relative overflow-auto \" data-snippet-clipboard-copy-content= \" "browserslist": { \n "production": [ \n ">0.2%", \n "not dead", \n "not op_mini all" \n ], \n "development": [ \n "last 1 chrome version", \n "last 1 firefox version", \n "last 1 safari version", \n "last 1 ie version" \n ] \n } \" ><pre class= \" notranslate \" ><code> \" browserslist \" : { \n \" production \" : [ \n \" >0.2% \" , \n \" not dead \" , \n \" not op_mini all \"\n ], \n \" development \" : [ \n \" last 1 chrome version \" , \n \" last 1 firefox version \" , \n \" last 1 safari version \" , \n \" last 1 ie version \"\n ] \n } \n </code></pre></div> \n <ol start= \" 3 \" dir= \" auto \" > \n <li>Update <code> \" scripts \" </code> in the package.json file to the following:</li> \n </ol> \n <div class= \" snippet-clipboard-content notranslate position-relative overflow-auto \" data-snippet-clipboard-copy-content= \" "scripts": { \n "start": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts start", \n "build": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts build", \n "test": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts test", \n "eject": "react-scripts eject" \n }, \" ><pre class= \" notranslate \" ><code> \" scripts \" : { \n \" start \" : \" cross-env AUTOPREFIXER_GRID=autoplace react-scripts start \" , \n \" build \" : \" cross-env AUTOPREFIXER_GRID=autoplace react-scripts build \" , \n \" test \" : \" cross-env AUTOPREFIXER_GRID=autoplace react-scripts test \" , \n \" eject \" : \" react-scripts eject \"\n }, \n </code></pre></div> \n <p dir= \" auto \" >Replace <code>autoplace</code> with <code>no-autoplace</code> in the above example if you prefer to disable Autoprefixer Grid autoplacement support.</p> \n <p dir= \" auto \" >Now when you run <code>npm start</code> you will see CSS Grid prefixes automatically being applied to your output CSS.</p> \n <p dir= \" auto \" >See also <a href= \" https://github.com/browserslist/browserslist#environment-variables \" >Browserslist environment variables</a> for more examples on how to use environment variables in your project.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Grid Autoplacement support in IE</h2><a id= \" user-content-grid-autoplacement-support-in-ie \" class= \" anchor \" aria-label= \" Permalink: Grid Autoplacement support in IE \" href= \" #grid-autoplacement-support-in-ie \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >If the <code>grid</code> option is set to <code> \" autoplace \" </code>, limited autoplacement support is added to Autoprefixers grid translations. You can also use \n the <code>/* autoprefixer grid: autoplace */</code> control comment or \n <code>AUTOPREFIXER_GRID=autoplace npm build</code> environment variable.</p> \n <p dir= \" auto \" >Autoprefixer will only autoplace grid cells if both <code>grid-template-rows</code> \n and <code>grid-template-columns</code> has been set. If <code>grid-template</code> \n or <code>grid-template-areas</code> has been set, Autoprefixer will use area based \n cell placement instead.</p> \n <p dir= \" auto \" >Autoprefixer supports autoplacement by using <code>nth-child</code> CSS selectors. \n It creates [number of columns] x [number of rows] <code>nth-child</code> selectors. \n For this reason Autoplacement is only supported within the explicit grid.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* Input CSS */ \n\n /* autoprefixer grid: autoplace */ \n\n .autoplacement-example { \n display: grid; \n grid-template-columns: 1fr 1fr; \n grid-template-rows: auto auto; \n grid-gap: 20px; \n } \" ><pre><span class= \" pl-c \" >/* Input CSS */</span> \n\n <span class= \" pl-c \" >/* autoprefixer grid: autoplace */</span> \n\n .<span class= \" pl-c1 \" >autoplacement-example</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto auto; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span>; \n }</pre></div> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* Output CSS */ \n\n /* autoprefixer grid: autoplace */ \n\n .autoplacement-example { \n display: -ms-grid; \n display: grid; \n -ms-grid-columns: 1fr 20px 1fr; \n grid-template-columns: 1fr 1fr; \n -ms-grid-rows: auto 20px auto; \n grid-template-rows: auto auto; \n grid-gap: 20px; \n } \n\n .autoplacement-example > *:nth-child(1) { \n -ms-grid-row: 1; \n -ms-grid-column: 1; \n } \n\n .autoplacement-example > *:nth-child(2) { \n -ms-grid-row: 1; \n -ms-grid-column: 3; \n } \n\n .autoplacement-example > *:nth-child(3) { \n -ms-grid-row: 3; \n -ms-grid-column: 1; \n } \n\n .autoplacement-example > *:nth-child(4) { \n -ms-grid-row: 3; \n -ms-grid-column: 3; \n } \" ><pre><span class= \" pl-c \" >/* Output CSS */</span> \n\n <span class= \" pl-c \" >/* autoprefixer grid: autoplace */</span> \n\n .<span class= \" pl-c1 \" >autoplacement-example</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> -ms-grid; \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >-ms-grid-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >-ms-grid-rows</span><span class= \" pl-kos \" >:</span> auto <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span> auto; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto auto; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span>; \n } \n\n .<span class= \" pl-c1 \" >autoplacement-example</span> <span class= \" pl-c1 \" >></span> <span class= \" pl-ent \" ><span class= \" pl-c1 \" >*</span></span><span class= \" pl-kos \" >:</span><span class= \" pl-c1 \" >nth-child</span>(<span class= \" pl-c1 \" >1</span>) { \n <span class= \" pl-c1 \" >-ms-grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n <span class= \" pl-c1 \" >-ms-grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n } \n\n .<span class= \" pl-c1 \" >autoplacement-example</span> <span class= \" pl-c1 \" >></span> <span class= \" pl-ent \" ><span class= \" pl-c1 \" >*</span></span><span class= \" pl-kos \" >:</span><span class= \" pl-c1 \" >nth-child</span>(<span class= \" pl-c1 \" >2</span>) { \n <span class= \" pl-c1 \" >-ms-grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n <span class= \" pl-c1 \" >-ms-grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >3</span>; \n } \n\n .<span class= \" pl-c1 \" >autoplacement-example</span> <span class= \" pl-c1 \" >></span> <span class= \" pl-ent \" ><span class= \" pl-c1 \" >*</span></span><span class= \" pl-kos \" >:</span><span class= \" pl-c1 \" >nth-child</span>(<span class= \" pl-c1 \" >3</span>) { \n <span class= \" pl-c1 \" >-ms-grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >3</span>; \n <span class= \" pl-c1 \" >-ms-grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n } \n\n .<span class= \" pl-c1 \" >autoplacement-example</span> <span class= \" pl-c1 \" >></span> <span class= \" pl-ent \" ><span class= \" pl-c1 \" >*</span></span><span class= \" pl-kos \" >:</span><span class= \" pl-c1 \" >nth-child</span>(<span class= \" pl-c1 \" >4</span>) { \n <span class= \" pl-c1 \" >-ms-grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >3</span>; \n <span class= \" pl-c1 \" >-ms-grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >3</span>; \n }</pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Beware of enabling autoplacement in old projects</h3><a id= \" user-content-beware-of-enabling-autoplacement-in-old-projects \" class= \" anchor \" aria-label= \" Permalink: Beware of enabling autoplacement in old projects \" href= \" #beware-of-enabling-autoplacement-in-old-projects \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Be careful about enabling autoplacement in any already established projects that have \n previously not used Autoprefixer's grid autoplacement feature before.</p> \n <p dir= \" auto \" >If this was your html:</p> \n <div class= \" highlight highlight-text-html-basic notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" <div class="grid"> \n <div class="grid-cell"></div> \n </div> \" ><pre><span class= \" pl-kos \" ><</span><span class= \" pl-ent \" >div</span> <span class= \" pl-c1 \" >class</span>= \" <span class= \" pl-s \" >grid</span> \" <span class= \" pl-kos \" >></span> \n <span class= \" pl-kos \" ><</span><span class= \" pl-ent \" >div</span> <span class= \" pl-c1 \" >class</span>= \" <span class= \" pl-s \" >grid-cell</span> \" <span class= \" pl-kos \" >></span><span class= \" pl-kos \" ></</span><span class= \" pl-ent \" >div</span><span class= \" pl-kos \" >></span> \n <span class= \" pl-kos \" ></</span><span class= \" pl-ent \" >div</span><span class= \" pl-kos \" >></span></pre></div> \n <p dir= \" auto \" >The following CSS will not work as expected with the autoplacement feature enabled:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* Unsafe CSS when Autoplacement is enabled */ \n\n .grid-cell { \n grid-column: 2; \n grid-row: 2; \n } \n\n .grid { \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(3, 1fr); \n } \" ><pre><span class= \" pl-c \" >/* Unsafe CSS when Autoplacement is enabled */</span> \n\n .<span class= \" pl-c1 \" >grid-cell</span> { \n <span class= \" pl-c1 \" >grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n <span class= \" pl-c1 \" >grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n } \n\n .<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n }</pre></div> \n <p dir= \" auto \" >Swapping the rules around will not fix the issue either:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* Also unsafe to use this CSS */ \n\n .grid { \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(3, 1fr); \n } \n\n .grid-cell { \n grid-column: 2; \n grid-row: 2; \n } \" ><pre><span class= \" pl-c \" >/* Also unsafe to use this CSS */</span> \n\n .<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n } \n\n .<span class= \" pl-c1 \" >grid-cell</span> { \n <span class= \" pl-c1 \" >grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n <span class= \" pl-c1 \" >grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n }</pre></div> \n <p dir= \" auto \" >One way to deal with this issue is to disable autoplacement in the \n grid-declaration rule:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* Disable autoplacement to fix the issue */ \n\n .grid { \n /* autoprefixer grid: no-autoplace */ \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(3, 1fr); \n } \n\n .grid-cell { \n grid-column: 2; \n grid-row: 2; \n } \" ><pre><span class= \" pl-c \" >/* Disable autoplacement to fix the issue */</span> \n\n .<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c \" >/* autoprefixer grid: no-autoplace */</span> \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n } \n\n .<span class= \" pl-c1 \" >grid-cell</span> { \n <span class= \" pl-c1 \" >grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n <span class= \" pl-c1 \" >grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n }</pre></div> \n <p dir= \" auto \" >The absolute best way to integrate autoplacement into already existing projects \n though is to leave autoplacement turned off by default and then use a control \n comment to enable it when needed. This method is far less likely to cause \n something on the site to break.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" /* Disable autoplacement by default in old projects */ \n /* autoprefixer grid: no-autoplace */ \n\n /* Old code will function the same way it always has */ \n .old-grid { \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(3, 1fr); \n } \n .old-grid-cell { \n grid-column: 2; \n grid-row: 2; \n } \n\n /* Enable autoplacement when you want to use it in new code */ \n .new-autoplace-friendly-grid { \n /* autoprefixer grid: autoplace */ \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(3, auto); \n } \" ><pre><span class= \" pl-c \" >/* Disable autoplacement by default in old projects */</span> \n <span class= \" pl-c \" >/* autoprefixer grid: no-autoplace */</span> \n\n <span class= \" pl-c \" >/* Old code will function the same way it always has */</span> \n .<span class= \" pl-c1 \" >old-grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n } \n .<span class= \" pl-c1 \" >old-grid-cell</span> { \n <span class= \" pl-c1 \" >grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n <span class= \" pl-c1 \" >grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n } \n\n <span class= \" pl-c \" >/* Enable autoplacement when you want to use it in new code */</span> \n .<span class= \" pl-c1 \" >new-autoplace-friendly-grid</span> { \n <span class= \" pl-c \" >/* autoprefixer grid: autoplace */</span> \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> auto); \n }</pre></div> \n <p dir= \" auto \" >Note that the <code>grid: \" no-autoplace \" </code> setting and the \n <code>/* autoprefixer grid: no-autoplace */</code> control comment share identical \n functionality to the <code>grid: true</code> setting and the <code>/* autoprefixer grid: on */</code> \n control comment. There is no need to refactor old code to use <code>no-autoplace</code> \n in place of the old <code>true</code> and <code>on</code> statements.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h3 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Autoplacement limitations</h3><a id= \" user-content-autoplacement-limitations \" class= \" anchor \" aria-label= \" Permalink: Autoplacement limitations \" href= \" #autoplacement-limitations \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Both columns and rows must be defined</h4><a id= \" user-content-both-columns-and-rows-must-be-defined \" class= \" anchor \" aria-label= \" Permalink: Both columns and rows must be defined \" href= \" #both-columns-and-rows-must-be-defined \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Autoplacement only works inside the explicit grid. The columns and rows need to be defined \n so that Autoprefixer knows how many <code>nth-child</code> selectors to generate.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .not-allowed { \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n } \n\n .is-allowed { \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(10, auto); \n } \" ><pre>.<span class= \" pl-c1 \" >not-allowed</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n } \n\n .<span class= \" pl-c1 \" >is-allowed</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >10</span><span class= \" pl-kos \" >,</span> auto); \n }</pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Repeat auto-fit and auto-fill are not supported</h4><a id= \" user-content-repeat-auto-fit-and-auto-fill-are-not-supported \" class= \" anchor \" aria-label= \" Permalink: Repeat auto-fit and auto-fill are not supported \" href= \" #repeat-auto-fit-and-auto-fill-are-not-supported \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >The <code>repeat(auto-fit, ...)</code> and <code>repeat(auto-fill, ...)</code> grid functionality relies on \n knowledge from the browser about screen dimensions and the number of available grid \n items for it to work properly. Autoprefixer does not have access to this information \n so unfortunately this little snippet will <em>never</em> be IE friendly.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .grid { \n /* This will never be IE friendly */ \n grid-template-columns: repeat(auto-fit, min-max(200px, 1fr)) \n } \" ><pre>.<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c \" >/* This will never be IE friendly */</span> \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(auto-fit<span class= \" pl-kos \" >,</span> <span class= \" pl-en \" >min-max</span>(<span class= \" pl-c1 \" >200<span class= \" pl-smi \" >px</span></span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>)) \n }</pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >No manual cell placement or column/row spans allowed inside an autoplacement grid</h4><a id= \" user-content-no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid \" class= \" anchor \" aria-label= \" Permalink: No manual cell placement or column/row spans allowed inside an autoplacement grid \" href= \" #no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Elements must not be manually placed or given column/row spans inside \n an autoplacement grid. Only the most basic of autoplacement grids are supported. \n Grid cells can still be placed manually outside the the explicit grid though. \n Support for manually placing individual grid cells inside an explicit \n autoplacement grid is planned for a future release.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .autoplacement-grid { \n display: grid; \n grid-template-columns: repeat(3, 1fr); \n grid-template-rows: repeat(3, auto); \n } \n\n /* Grid cells placed inside the explicit grid \n will break the layout in IE */ \n .not-permitted-grid-cell { \n grid-column: 1; \n grid-row: 1; \n } \n\n /* Grid cells placed outside the \n explicit grid will work in IE */ \n .permitted-grid-cell { \n grid-column: 1 / span 2; \n grid-row: 4; \n } \" ><pre>.<span class= \" pl-c1 \" >autoplacement-grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>); \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> <span class= \" pl-en \" >repeat</span>(<span class= \" pl-c1 \" >3</span><span class= \" pl-kos \" >,</span> auto); \n } \n\n <span class= \" pl-c \" >/* Grid cells placed inside the explicit grid</span> \n <span class= \" pl-c \" > will break the layout in IE */</span> \n .<span class= \" pl-c1 \" >not-permitted-grid-cell</span> { \n <span class= \" pl-c1 \" >grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n <span class= \" pl-c1 \" >grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n } \n\n <span class= \" pl-c \" >/* Grid cells placed outside the</span> \n <span class= \" pl-c \" > explicit grid will work in IE */</span> \n .<span class= \" pl-c1 \" >permitted-grid-cell</span> { \n <span class= \" pl-c1 \" >grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span> <span class= \" pl-c1 \" >/</span> span <span class= \" pl-c1 \" >2</span>; \n <span class= \" pl-c1 \" >grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >4</span>; \n }</pre></div> \n <p dir= \" auto \" >If manual cell placement is required, we recommend using <code>grid-template</code> or \n <code>grid-template-areas</code> instead:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .page { \n display: grid; \n grid-gap: 30px; \n grid-template: \n "head head" \n "nav main" minmax(100px, 1fr) \n "foot foot" / \n 200px 1fr; \n } \n .page__head { \n grid-area: head; \n } \n .page__nav { \n grid-area: nav; \n } \n .page__main { \n grid-area: main; \n } \n .page__footer { \n grid-area: foot; \n } \" ><pre>.<span class= \" pl-c1 \" >page</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >30<span class= \" pl-smi \" >px</span></span>; \n <span class= \" pl-c1 \" >grid-template</span><span class= \" pl-kos \" >:</span> \n <span class= \" pl-s \" > \" head head \" </span> \n <span class= \" pl-s \" > \" nav main \" </span> <span class= \" pl-en \" >minmax</span>(<span class= \" pl-c1 \" >100<span class= \" pl-smi \" >px</span></span><span class= \" pl-kos \" >,</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>) \n <span class= \" pl-s \" > \" foot foot \" </span> <span class= \" pl-c1 \" >/</span> \n <span class= \" pl-c1 \" >200<span class= \" pl-smi \" >px</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n } \n .<span class= \" pl-c1 \" >page__head</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> head; \n } \n .<span class= \" pl-c1 \" >page__nav</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> nav; \n } \n .<span class= \" pl-c1 \" >page__main</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> main; \n } \n .<span class= \" pl-c1 \" >page__footer</span> { \n <span class= \" pl-c1 \" >grid-area</span><span class= \" pl-kos \" >:</span> foot; \n }</pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Do not create <code>::before</code> and <code>::after</code> pseudo elements</h4><a id= \" user-content-do-not-create-before-and-after-pseudo-elements \" class= \" anchor \" aria-label= \" Permalink: Do not create ::before and ::after pseudo elements \" href= \" #do-not-create-before-and-after-pseudo-elements \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Let's say you have this HTML:</p> \n <div class= \" highlight highlight-text-html-basic notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" <div class="grid"> \n <div class="grid-cell"></div> \n </div> \" ><pre><span class= \" pl-kos \" ><</span><span class= \" pl-ent \" >div</span> <span class= \" pl-c1 \" >class</span>= \" <span class= \" pl-s \" >grid</span> \" <span class= \" pl-kos \" >></span> \n <span class= \" pl-kos \" ><</span><span class= \" pl-ent \" >div</span> <span class= \" pl-c1 \" >class</span>= \" <span class= \" pl-s \" >grid-cell</span> \" <span class= \" pl-kos \" >></span><span class= \" pl-kos \" ></</span><span class= \" pl-ent \" >div</span><span class= \" pl-kos \" >></span> \n <span class= \" pl-kos \" ></</span><span class= \" pl-ent \" >div</span><span class= \" pl-kos \" >></span></pre></div> \n <p dir= \" auto \" >And you write this CSS:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .grid { \n display: grid; \n grid-template-columns: 1fr 1fr; \n grid-template-rows: auto; \n } \n\n .grid::before { \n content: 'before'; \n } \n\n .grid::after { \n content: 'after'; \n } \" ><pre>.<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto; \n } \n\n .<span class= \" pl-c1 \" >grid</span>::<span class= \" pl-ent \" >before</span> { \n <span class= \" pl-c1 \" >content</span><span class= \" pl-kos \" >:</span> <span class= \" pl-s \" >'before'</span>; \n } \n\n .<span class= \" pl-c1 \" >grid</span>::<span class= \" pl-ent \" >after</span> { \n <span class= \" pl-c1 \" >content</span><span class= \" pl-kos \" >:</span> <span class= \" pl-s \" >'after'</span>; \n }</pre></div> \n <p dir= \" auto \" >This will be the output:</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .grid { \n display: -ms-grid; \n display: grid; \n -ms-grid-columns: 1fr 1fr; \n grid-template-columns: 1fr 1fr; \n -ms-grid-rows: auto; \n grid-template-rows: auto; \n } \n\n .grid > *:nth-child(1) { \n -ms-grid-row: 1; \n -ms-grid-column: 1; \n } \n\n\n .grid > *:nth-child(2) { \n -ms-grid-row: 1; \n -ms-grid-column: 2; \n } \n\n .grid::before { \n content: 'before'; \n } \n\n .grid::after { \n content: 'after'; \n } \" ><pre>.<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> -ms-grid; \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >-ms-grid-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >-ms-grid-rows</span><span class= \" pl-kos \" >:</span> auto; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto; \n } \n\n .<span class= \" pl-c1 \" >grid</span> <span class= \" pl-c1 \" >></span> <span class= \" pl-ent \" ><span class= \" pl-c1 \" >*</span></span><span class= \" pl-kos \" >:</span><span class= \" pl-c1 \" >nth-child</span>(<span class= \" pl-c1 \" >1</span>) { \n <span class= \" pl-c1 \" >-ms-grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n <span class= \" pl-c1 \" >-ms-grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n } \n\n\n .<span class= \" pl-c1 \" >grid</span> <span class= \" pl-c1 \" >></span> <span class= \" pl-ent \" ><span class= \" pl-c1 \" >*</span></span><span class= \" pl-kos \" >:</span><span class= \" pl-c1 \" >nth-child</span>(<span class= \" pl-c1 \" >2</span>) { \n <span class= \" pl-c1 \" >-ms-grid-row</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1</span>; \n <span class= \" pl-c1 \" >-ms-grid-column</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >2</span>; \n } \n\n .<span class= \" pl-c1 \" >grid</span>::<span class= \" pl-ent \" >before</span> { \n <span class= \" pl-c1 \" >content</span><span class= \" pl-kos \" >:</span> <span class= \" pl-s \" >'before'</span>; \n } \n\n .<span class= \" pl-c1 \" >grid</span>::<span class= \" pl-ent \" >after</span> { \n <span class= \" pl-c1 \" >content</span><span class= \" pl-kos \" >:</span> <span class= \" pl-s \" >'after'</span>; \n }</pre></div> \n <p dir= \" auto \" >IE will place <code>.grid-cell</code>, <code>::before</code> and <code>::after</code> in row 1 column 1. \n Modern browsers on the other hand will place <code>::before</code> in row 1 column 1, \n <code>.grid-cell</code> in row 1 column 2, and <code>::after</code> in row 2 column 1.</p> \n <p dir= \" auto \" >See this <a href= \" https://codepen.io/daniel-tonon/pen/gBymVw \" rel= \" nofollow \" >CodePen</a> to see a visualization \n of the issue. View the CodePen in both a modern browser and IE to see the difference.</p> \n <p dir= \" auto \" >Note that you can still create <code>::before</code> and <code>::after</code> elements as long as you manually \n place them outside the explicit grid.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h4 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >When changing the <code>grid gap</code> value, columns and rows must be re-declared</h4><a id= \" user-content-when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared \" class= \" anchor \" aria-label= \" Permalink: When changing the grid gap value, columns and rows must be re-declared \" href= \" #when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >If you wish to change the size of a <code>grid-gap</code>, you will need to redeclare the grid columns and rows.</p> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .grid { \n display: grid; \n grid-template-columns: 1fr 1fr; \n grid-template-rows: auto; \n grid-gap: 50px; \n } \n\n /* This will *NOT* work in IE */ \n @media (max-width: 600px) { \n .grid { \n grid-gap: 20px; \n } \n } \n\n /* This will *NOT* work in IE */ \n .grid.small-gap { \n grid-gap: 20px; \n } \" ><pre>.<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >50<span class= \" pl-smi \" >px</span></span>; \n } \n\n <span class= \" pl-c \" >/* This will *NOT* work in IE */</span> \n <span class= \" pl-k \" >@media</span> (<span class= \" pl-c1 \" >max-width</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >600<span class= \" pl-smi \" >px</span></span>) { \n .<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span>; \n } \n } \n\n <span class= \" pl-c \" >/* This will *NOT* work in IE */</span> \n .<span class= \" pl-c1 \" >grid</span>.<span class= \" pl-c1 \" >small-gap</span> { \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span>; \n }</pre></div> \n <div class= \" highlight highlight-source-css notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" .grid { \n display: grid; \n grid-template-columns: 1fr 1fr; \n grid-template-rows: auto; \n grid-gap: 50px; \n } \n\n /* This *WILL* work in IE */ \n @media (max-width: 600px) { \n .grid { \n grid-template-columns: 1fr 1fr; \n grid-template-rows: auto; \n grid-gap: 20px; \n } \n } \n\n /* This *WILL* work in IE */ \n .grid.small-gap { \n grid-template-columns: 1fr 1fr; \n grid-template-rows: auto; \n grid-gap: 20px; \n } \" ><pre>.<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >display</span><span class= \" pl-kos \" >:</span> grid; \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >50<span class= \" pl-smi \" >px</span></span>; \n } \n\n <span class= \" pl-c \" >/* This *WILL* work in IE */</span> \n <span class= \" pl-k \" >@media</span> (<span class= \" pl-c1 \" >max-width</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >600<span class= \" pl-smi \" >px</span></span>) { \n .<span class= \" pl-c1 \" >grid</span> { \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span>; \n } \n } \n\n <span class= \" pl-c \" >/* This *WILL* work in IE */</span> \n .<span class= \" pl-c1 \" >grid</span>.<span class= \" pl-c1 \" >small-gap</span> { \n <span class= \" pl-c1 \" >grid-template-columns</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span> <span class= \" pl-c1 \" >1<span class= \" pl-smi \" >fr</span></span>; \n <span class= \" pl-c1 \" >grid-template-rows</span><span class= \" pl-kos \" >:</span> auto; \n <span class= \" pl-c1 \" >grid-gap</span><span class= \" pl-kos \" >:</span> <span class= \" pl-c1 \" >20<span class= \" pl-smi \" >px</span></span>; \n }</pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Debug</h2><a id= \" user-content-debug \" class= \" anchor \" aria-label= \" Permalink: Debug \" href= \" #debug \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Run <code>npx autoprefixer --info</code> in your project directory to check \n which browsers are selected and which properties will be prefixed:</p> \n <div class= \" highlight highlight-text-shell-session notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" $ npx autoprefixer --info \n Browsers: \n Edge: 16 \n\n These browsers account for 0.26% of all users globally \n\n At-Rules: \n @viewport: ms \n\n Selectors: \n ::placeholder: ms \n\n Properties: \n appearance: webkit \n flow-from: ms \n flow-into: ms \n hyphens: ms \n overscroll-behavior: ms \n region-fragment: ms \n scroll-snap-coordinate: ms \n scroll-snap-destination: ms \n scroll-snap-points-x: ms \n scroll-snap-points-y: ms \n scroll-snap-type: ms \n text-size-adjust: ms \n text-spacing: ms \n user-select: ms \" ><pre>$ <span class= \" pl-s1 \" >npx autoprefixer --info</span> \n <span class= \" pl-c1 \" >Browsers:</span> \n <span class= \" pl-c1 \" > Edge: 16</span> \n\n <span class= \" pl-c1 \" >These browsers account for 0.26% of all users globally</span> \n\n <span class= \" pl-c1 \" >At-Rules:</span> \n <span class= \" pl-c1 \" > @viewport: ms</span> \n\n <span class= \" pl-c1 \" >Selectors:</span> \n <span class= \" pl-c1 \" > ::placeholder: ms</span> \n\n <span class= \" pl-c1 \" >Properties:</span> \n <span class= \" pl-c1 \" > appearance: webkit</span> \n <span class= \" pl-c1 \" > flow-from: ms</span> \n <span class= \" pl-c1 \" > flow-into: ms</span> \n <span class= \" pl-c1 \" > hyphens: ms</span> \n <span class= \" pl-c1 \" > overscroll-behavior: ms</span> \n <span class= \" pl-c1 \" > region-fragment: ms</span> \n <span class= \" pl-c1 \" > scroll-snap-coordinate: ms</span> \n <span class= \" pl-c1 \" > scroll-snap-destination: ms</span> \n <span class= \" pl-c1 \" > scroll-snap-points-x: ms</span> \n <span class= \" pl-c1 \" > scroll-snap-points-y: ms</span> \n <span class= \" pl-c1 \" > scroll-snap-type: ms</span> \n <span class= \" pl-c1 \" > text-size-adjust: ms</span> \n <span class= \" pl-c1 \" > text-spacing: ms</span> \n <span class= \" pl-c1 \" > user-select: ms</span></pre></div> \n <p dir= \" auto \" >JS API is also available:</p> \n <div class= \" highlight highlight-source-js notranslate position-relative overflow-auto \" dir= \" auto \" data-snippet-clipboard-copy-content= \" console.log(autoprefixer().info()) \" ><pre><span class= \" pl-smi \" >console</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >log</span><span class= \" pl-kos \" >(</span><span class= \" pl-en \" >autoprefixer</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >.</span><span class= \" pl-en \" >info</span><span class= \" pl-kos \" >(</span><span class= \" pl-kos \" >)</span><span class= \" pl-kos \" >)</span></pre></div> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >Security Contact</h2><a id= \" user-content-security-contact \" class= \" anchor \" aria-label= \" Permalink: Security Contact \" href= \" #security-contact \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >To report a security vulnerability, please use the <a href= \" https://tidelift.com/security \" rel= \" nofollow \" >Tidelift security contact</a>. \n Tidelift will coordinate the fix and disclosure.</p> \n <div class= \" markdown-heading \" dir= \" auto \" ><h2 tabindex= \" -1 \" class= \" heading-element \" dir= \" auto \" >For Enterprise</h2><a id= \" user-content-for-enterprise \" class= \" anchor \" aria-label= \" Permalink: For Enterprise \" href= \" #for-enterprise \" ><svg class= \" octicon octicon-link \" viewBox= \" 0 0 16 16 \" version= \" 1.1 \" width= \" 16 \" height= \" 16 \" aria-hidden= \" true \" ><path d= \" m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z \" ></path></svg></a></div> \n <p dir= \" auto \" >Available as part of the Tidelift Subscription.</p> \n <p dir= \" auto \" >The maintainers of <code>autoprefixer</code> and thousands of other packages are working \n with Tidelift to deliver commercial support and maintenance for the open source \n dependencies you use to build your applications. Save time, reduce risk, \n and improve code health, while paying the maintainers of the exact dependencies \n you use. <a href= \" https://tidelift.com/subscription/pkg/npm-autoprefixer?utm_source=npm-autoprefixer&utm_medium=referral&utm_campaign=enterprise&utm_term=repo \" rel= \" nofollow \" >Learn more.</a></p> \n </article>" , "loaded" : true ,
"timedOut" : false ,
"errorMessage" : null ,
"headerInfo" : {
"toc" : [
{
"level" : 1 ,
"text" : "Autoprefixer " ,
"anchor" : "autoprefixer-" ,
"htmlText" : "Autoprefixer "
},
{
"level" : 2 ,
"text" : "Contents" ,
"anchor" : "contents" ,
"htmlText" : "Contents"
},
{
"level" : 2 ,
"text" : "Browsers" ,
"anchor" : "browsers" ,
"htmlText" : "Browsers"
},
{
"level" : 2 ,
"text" : "FAQ" ,
"anchor" : "faq" ,
"htmlText" : "FAQ"
},
{
"level" : 3 ,
"text" : "Does Autoprefixer polyfill Grid Layout for IE?" ,
"anchor" : "does-autoprefixer-polyfill-grid-layout-for-ie" ,
"htmlText" : "Does Autoprefixer polyfill Grid Layout for IE?"
},
{
"level" : 3 ,
"text" : "Does it add polyfills?" ,
"anchor" : "does-it-add-polyfills" ,
"htmlText" : "Does it add polyfills?"
},
{
"level" : 3 ,
"text" : "Why doesn’t Autoprefixer add prefixes to border-radius?" ,
"anchor" : "why-doesnt-autoprefixer-add-prefixes-to-border-radius" ,
"htmlText" : "Why doesn’t Autoprefixer add prefixes to border-radius?"
},
{
"level" : 3 ,
"text" : "Why does Autoprefixer use unprefixed properties in @-webkit-keyframes?" ,
"anchor" : "why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes" ,
"htmlText" : "Why does Autoprefixer use unprefixed properties in @-webkit-keyframes?"
},
{
"level" : 3 ,
"text" : "How to work with legacy -webkit- only code?" ,
"anchor" : "how-to-work-with-legacy--webkit--only-code" ,
"htmlText" : "How to work with legacy -webkit- only code?"
},
{
"level" : 3 ,
"text" : "Does Autoprefixer add -epub- prefix?" ,
"anchor" : "does-autoprefixer-add--epub--prefix" ,
"htmlText" : "Does Autoprefixer add -epub- prefix?"
},
{
"level" : 3 ,
"text" : "Why doesn’t Autoprefixer transform generic font-family system-ui?" ,
"anchor" : "why-doesnt-autoprefixer-transform-generic-font-family-system-ui" ,
"htmlText" : "Why doesn’t Autoprefixer transform generic font-family system-ui?"
},
{
"level" : 2 ,
"text" : "Usage" ,
"anchor" : "usage" ,
"htmlText" : "Usage"
},
{
"level" : 3 ,
"text" : "Gulp" ,
"anchor" : "gulp" ,
"htmlText" : "Gulp"
},
{
"level" : 3 ,
"text" : "Webpack" ,
"anchor" : "webpack" ,
"htmlText" : "Webpack"
},
{
"level" : 3 ,
"text" : "CSS-in-JS" ,
"anchor" : "css-in-js" ,
"htmlText" : "CSS-in-JS"
},
{
"level" : 3 ,
"text" : "CLI" ,
"anchor" : "cli" ,
"htmlText" : "CLI"
},
{
"level" : 3 ,
"text" : "Other Build Tools" ,
"anchor" : "other-build-tools" ,
"htmlText" : "Other Build Tools"
},
{
"level" : 4 ,
"text" : "Preprocessors" ,
"anchor" : "preprocessors" ,
"htmlText" : "Preprocessors"
},
{
"level" : 4 ,
"text" : "GUI Tools" ,
"anchor" : "gui-tools" ,
"htmlText" : "GUI Tools"
},
{
"level" : 3 ,
"text" : "JavaScript" ,
"anchor" : "javascript" ,
"htmlText" : "JavaScript"
},
{
"level" : 3 ,
"text" : "Text Editors and IDE" ,
"anchor" : "text-editors-and-ide" ,
"htmlText" : "Text Editors and IDE"
},
{
"level" : 2 ,
"text" : "Warnings" ,
"anchor" : "warnings" ,
"htmlText" : "Warnings"
},
{
"level" : 2 ,
"text" : "Disabling" ,
"anchor" : "disabling" ,
"htmlText" : "Disabling"
},
{
"level" : 3 ,
"text" : "Prefixes" ,
"anchor" : "prefixes" ,
"htmlText" : "Prefixes"
},
{
"level" : 3 ,
"text" : "Features" ,
"anchor" : "features" ,
"htmlText" : "Features"
},
{
"level" : 3 ,
"text" : "Control Comments" ,
"anchor" : "control-comments" ,
"htmlText" : "Control Comments"
},
{
"level" : 2 ,
"text" : "Options" ,
"anchor" : "options" ,
"htmlText" : "Options"
},
{
"level" : 2 ,
"text" : "Environment Variables" ,
"anchor" : "environment-variables" ,
"htmlText" : "Environment Variables"
},
{
"level" : 3 ,
"text" : "Using environment variables to support CSS Grid prefixes in Create React App" ,
"anchor" : "using-environment-variables-to-support-css-grid-prefixes-in-create-react-app" ,
"htmlText" : "Using environment variables to support CSS Grid prefixes in Create React App"
},
{
"level" : 2 ,
"text" : "Grid Autoplacement support in IE" ,
"anchor" : "grid-autoplacement-support-in-ie" ,
"htmlText" : "Grid Autoplacement support in IE"
},
{
"level" : 3 ,
"text" : "Beware of enabling autoplacement in old projects" ,
"anchor" : "beware-of-enabling-autoplacement-in-old-projects" ,
"htmlText" : "Beware of enabling autoplacement in old projects"
},
{
"level" : 3 ,
"text" : "Autoplacement limitations" ,
"anchor" : "autoplacement-limitations" ,
"htmlText" : "Autoplacement limitations"
},
{
"level" : 4 ,
"text" : "Both columns and rows must be defined" ,
"anchor" : "both-columns-and-rows-must-be-defined" ,
"htmlText" : "Both columns and rows must be defined"
},
{
"level" : 4 ,
"text" : "Repeat auto-fit and auto-fill are not supported" ,
"anchor" : "repeat-auto-fit-and-auto-fill-are-not-supported" ,
"htmlText" : "Repeat auto-fit and auto-fill are not supported"
},
{
"level" : 4 ,
"text" : "No manual cell placement or column/row spans allowed inside an autoplacement grid" ,
"anchor" : "no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid" ,
"htmlText" : "No manual cell placement or column/row spans allowed inside an autoplacement grid"
},
{
"level" : 4 ,
"text" : "Do not create ::before and ::after pseudo elements" ,
"anchor" : "do-not-create-before-and-after-pseudo-elements" ,
"htmlText" : "Do not create ::before and ::after pseudo elements"
},
{
"level" : 4 ,
"text" : "When changing the grid gap value, columns and rows must be re-declared" ,
"anchor" : "when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared" ,
"htmlText" : "When changing the grid gap value, columns and rows must be re-declared"
},
{
"level" : 2 ,
"text" : "Debug" ,
"anchor" : "debug" ,
"htmlText" : "Debug"
},
{
"level" : 2 ,
"text" : "Security Contact" ,
"anchor" : "security-contact" ,
"htmlText" : "Security Contact"
},
{
"level" : 2 ,
"text" : "For Enterprise" ,
"anchor" : "for-enterprise" ,
"htmlText" : "For Enterprise"
}
],
"siteNavLoginPath" : "/login?return_to=https%3A%2F%2Fgithub.com%2Fpostcss%2Fautoprefixer"
}
},
{
"displayName" : "LICENSE" ,
"repoName" : "autoprefixer" ,
"refName" : "main" ,
"path" : "LICENSE" ,
"preferredFileType" : "license" ,
"tabName" : "MIT" ,
"richText" : null ,
"loaded" : false ,
"timedOut" : false ,
"errorMessage" : null ,
"headerInfo" : {
"toc" : null ,
"siteNavLoginPath" : "/login?return_to=https%3A%2F%2Fgithub.com%2Fpostcss%2Fautoprefixer"
}
}
],
"overviewFilesProcessingTime" : 0
}
},
"appPayload" : {
"helpUrl" : "https://docs.github.com" ,
"findFileWorkerPath" : "/assets-cdn/worker/find-file-worker-1583894afd38.js" ,
"findInFileWorkerPath" : "/assets-cdn/worker/find-in-file-worker-3a63a487027b.js" ,
"githubDevUrl" : null ,
"enabled_features" : {
"code_nav_ui_events" : false ,
"overview_shared_code_dropdown_button" : false ,
"react_blob_overlay" : false ,
"copilot_conversational_ux_embedding_update" : false ,
"copilot_smell_icebreaker_ux" : true ,
"copilot_workspace" : false
}
}
}
}