From 668134b14b490bdd4828bf78390c9606b42ae446 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Fox?= Date: Thu, 22 Oct 2026 21:05:58 +0200 Subject: [PATCH] Describe this repository --- README.md | 1083 +---------------------------------------------------- 1 file changed, 8 insertions(+), 1075 deletions(-) diff --git a/README.md b/README.md index 1f58bb0..947dc37 100644 --- a/README.md +++ b/README.md @@ -1,1079 +1,12 @@ -# Autoprefixer +# Contributions to postcss/autoprefixer - +Parse CSS and add vendor prefixes to rules by Can I Use -[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. +This repository holds only my commits to the upstream project, with their original author, date and diff. +Each of my commits is preceded by a snapshot of the upstream files it touched, so every diff shows exactly what I changed. -Write your CSS rules without vendor prefixes (in fact, forget about them -entirely): +## Merged pull requests -```css -::placeholder { - color: gray; -} - -.image { - width: stretch; -} -``` - -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. - -```css -::-moz-placeholder { - color: gray; -} -::placeholder { - color: gray; -} - -.image { - width: -moz-available; - width: -webkit-fill-available; - width: stretch; -} -``` - -Twitter account for news and releases: [@autoprefixer]. - ---- - -  Autoprefixer is built by Evil Martians, an American design and engineering consultancy for developer tools, AI, and cybersecurity startups. - ---- - -[interactive demo]: https://autoprefixer.github.io/ -[@autoprefixer]: https://twitter.com/autoprefixer -[Can I Use]: https://caniuse.com/ -[PostCSS]: https://github.com/postcss/postcss - -## Contents - -- [Contents](#contents) -- [Browsers](#browsers) -- [FAQ](#faq) - - [Does Autoprefixer polyfill Grid Layout for IE?](#does-autoprefixer-polyfill-grid-layout-for-ie) - - [Does it add polyfills?](#does-it-add-polyfills) - - [Why doesn’t Autoprefixer add prefixes to `border-radius`?](#why-doesnt-autoprefixer-add-prefixes-to-border-radius) - - [Why does Autoprefixer use unprefixed properties in `@-webkit-keyframes`?](#why-does-autoprefixer-use-unprefixed-properties-in--webkit-keyframes) - - [How to work with legacy `-webkit-` only code?](#how-to-work-with-legacy--webkit--only-code) - - [Does Autoprefixer add `-epub-` prefix?](#does-autoprefixer-add--epub--prefix) - - [Why doesn’t Autoprefixer transform generic font-family `system-ui`?](#why-doesnt-autoprefixer-transform-generic-font-family-system-ui) -- [Usage](#usage) - - [Gulp](#gulp) - - [Webpack](#webpack) - - [CSS-in-JS](#css-in-js) - - [CLI](#cli) - - [Other Build Tools](#other-build-tools) - - [Preprocessors](#preprocessors) - - [GUI Tools](#gui-tools) - - [JavaScript](#javascript) - - [Text Editors and IDE](#text-editors-and-ide) -- [Warnings](#warnings) -- [Disabling](#disabling) - - [Prefixes](#prefixes) - - [Features](#features) - - [Control Comments](#control-comments) -- [Options](#options) -- [Environment Variables](#environment-variables) - - [Using environment variables to support CSS Grid prefixes in Create React App](#using-environment-variables-to-support-css-grid-prefixes-in-create-react-app) -- [Grid Autoplacement support in IE](#grid-autoplacement-support-in-ie) - - [Beware of enabling autoplacement in old projects](#beware-of-enabling-autoplacement-in-old-projects) - - [Autoplacement limitations](#autoplacement-limitations) - - [Both columns and rows must be defined](#both-columns-and-rows-must-be-defined) - - [Repeat auto-fit and auto-fill are not supported](#repeat-auto-fit-and-auto-fill-are-not-supported) - - [No manual cell placement or column/row spans allowed inside an autoplacement grid](#no-manual-cell-placement-or-columnrow-spans-allowed-inside-an-autoplacement-grid) - - [Do not create `::before` and `::after` pseudo elements](#do-not-create-before-and-after-pseudo-elements) - - [When changing the `grid gap` value, columns and rows must be re-declared](#when-changing-the-grid-gap-value-columns-and-rows-must-be-re-declared) -- [Debug](#debug) -- [Security Contact](#security-contact) -- [For Enterprise](#for-enterprise) - -## Browsers - -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. - -[Browserslist docs]: https://github.com/browserslist/browserslist#queries -[babel-preset-env]: https://github.com/babel/babel/tree/master/packages/babel-preset-env -[Best Practices]: https://github.com/browserslist/browserslist#best-practices -[Browserslist]: https://github.com/browserslist/browserslist -[Stylelint]: https://stylelint.io/ - -## FAQ - -### 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](#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`. - -```css -.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: - -- [The guide about Grids in IE and Autoprefixer]. -- [`postcss-gap-properties`] to use new `gap` property - instead of old `grid-gap`. -- [`postcss-grid-kiss`] has alternate “everything in one property” syntax, - which makes using Autoprefixer’s Grid translations safer. - -[The guide about Grids in IE and Autoprefixer]: https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ -[`postcss-gap-properties`]: https://github.com/jonathantneal/postcss-gap-properties -[`postcss-grid-kiss`]: https://github.com/sylvainpolletvillard/postcss-grid-kiss - -### Does it add polyfills? - -No. Autoprefixer only adds prefixes. - -Most new CSS features will require client side JavaScript to handle a new -behavior correctly. - -Depending on what you consider to be a “polyfill”, you can take a look at some -other tools and libraries. If you are just looking for syntax sugar, -you might take a look at: - -- [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. - -[postcss-flexbugs-fixes]: https://github.com/luisrudge/postcss-flexbugs-fixes -[postcss-preset-env]: https://github.com/jonathantneal/postcss-preset-env -[Oldie]: https://github.com/jonathantneal/oldie - -### 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]. - -[Can I Use]: https://caniuse.com/ - -### 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. - -[postcss-unprefix]: https://github.com/gucong3000/postcss-unprefix - -### 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. - -[postcss-epub]: https://github.com/Rycochet/postcss-epub - -### 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. - -[postcss-font-family-system-ui]: https://github.com/JLHwung/postcss-font-family-system-ui - -## Usage - -### Gulp - -In Gulp you can use [gulp-postcss] with `autoprefixer` npm package. - -```js -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]. - -[gulp-postcss]: https://github.com/postcss/gulp-postcss -[other PostCSS plugins]: https://github.com/postcss/postcss#plugins - -### Webpack - -In [webpack] you can use [postcss-loader] with `autoprefixer` -and [other PostCSS plugins]. - -```js -module.exports = { - module: { - rules: [ - { - test: /\.css$/, - use: ['style-loader', 'css-loader', 'postcss-loader'] - } - ] - } -} -``` - -And create a `postcss.config.js` with: - -```js -module.exports = { - plugins: [require('autoprefixer')] -} -``` - -[other PostCSS plugins]: https://github.com/postcss/postcss#plugins -[postcss-loader]: https://github.com/postcss/postcss-loader -[webpack]: https://webpack.js.org/ - -### CSS-in-JS - -The best way to use PostCSS with CSS-in-JS is [`astroturf`]. -Add its loader to your `webpack.config.js`: - -```js -module.exports = { - module: { - rules: [ - { - test: /\.css$/, - use: ['style-loader', 'postcss-loader'] - }, - { - test: /\.jsx?$/, - use: ['babel-loader', 'astroturf/loader'] - } - ] - } -} -``` - -Then create `postcss.config.js`: - -```js -module.exports = { - plugins: [require('autoprefixer')] -} -``` - -[`astroturf`]: https://github.com/4Catalyzer/astroturf - -### CLI - -You can use the [postcss-cli] to run Autoprefixer from CLI: - -```sh -npm install postcss postcss-cli autoprefixer -npx postcss *.css --use autoprefixer -d build/ -``` - -See `postcss -h` for help. - -[postcss-cli]: https://github.com/postcss/postcss-cli - -### Other Build Tools - -- **Grunt:** [grunt-postcss] -- **Ruby on Rails**: [autoprefixer-rails] -- **Neutrino**: [neutrino-middleware-postcss] -- **Jekyll**: add `autoprefixer-rails` and `jekyll-assets` to `Gemfile` -- **Brunch**: [postcss-brunch] -- **Broccoli**: [broccoli-postcss] -- **Middleman**: [middleman-autoprefixer] -- **Mincer**: add `autoprefixer` npm package and enable it: - `environment.enable('autoprefixer')` - -[neutrino-middleware-postcss]: https://www.npmjs.com/package/neutrino-middleware-postcss -[middleman-autoprefixer]: https://github.com/middleman/middleman-autoprefixer -[autoprefixer-rails]: https://github.com/ai/autoprefixer-rails -[broccoli-postcss]: https://github.com/jeffjewiss/broccoli-postcss -[postcss-brunch]: https://github.com/iamvdo/postcss-brunch -[grunt-postcss]: https://github.com/C-Lodder/grunt-postcss - -#### Preprocessors - -- **Less**: [less-plugin-autoprefix] -- **Stylus**: [autoprefixer-stylus] -- **Compass**: [autoprefixer-rails#compass] - -[less-plugin-autoprefix]: https://github.com/less/less-plugin-autoprefix -[autoprefixer-stylus]: https://github.com/jenius/autoprefixer-stylus -[autoprefixer-rails#compass]: https://github.com/ai/autoprefixer-rails#compass - -#### GUI Tools - -- [CodeKit](https://codekitapp.com/help/autoprefixer/) -- [Prepros](https://prepros.io) - -### JavaScript - -You can use Autoprefixer with [PostCSS] in your Node.js application -or if you want to develop an Autoprefixer plugin for a new environment. - -```js -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. - -[html-autoprefixer]: https://github.com/RebelMail/html-autoprefixer -[standalone build]: https://raw.github.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js -[PostCSS]: https://github.com/postcss/postcss - -### Text Editors and IDE - -Autoprefixer should be used in assets build tools. Text editor plugins are not -a good solution, because prefixes decrease code readability and you will need -to change 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: - -- [Visual Studio Code](https://github.com/mrmlnc/vscode-autoprefixer) -- [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer) - -[Parcel]: https://parceljs.org/ - -## Warnings - -Autoprefixer uses the [PostCSS warning API] to warn about really important -problems in your CSS: - -- Old direction syntax in gradients. -- Old unprefixed `display: box` instead of `display: flex` - by latest specification version. - -You can get warnings from `result.warnings()`: - -```js -result.warnings().forEach(warn => { - console.warn(warn.toString()) -}) -``` - -Every Autoprefixer runner should display these warnings. - -[PostCSS warning API]: https://postcss.org/api/#warning - -## Disabling - -### Prefixes - -Autoprefixer was designed to have no interface – it just works. -If you need some browser specific hack just write a prefixed property -after the unprefixed one. - -```css -a { - transform: scale(0.5); - -moz-transform: scale(0.6); -} -``` - -If some prefixes were generated incorrectly, please create an [issue on GitHub]. - -[issue on GitHub]: https://github.com/postcss/autoprefixer/issues - -### Features - -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](#grid-autoplacement-support-in-ie). -- `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: - -```js -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. - -```css -.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 four 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: ignore next warning */`: hide Autoprefixer warnings only for - the next property or rule/at-rule (but not its body). Prefixes are still added. -- `/* 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: - -```css -/* 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: - -```css -/* How not to use block level control comments */ - -.do-not-do-this { - /* autoprefixer: off */ - transition: 1s; - /* autoprefixer: on */ - transform: rotate(20deg); -} -``` - -## Options - -Function `autoprefixer(options)` returns a new PostCSS plugin. -See [PostCSS API] for plugin usage documentation. - -```js -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. - -[usage statistics]: https://github.com/browserslist/browserslist#custom-usage-data -[PostCSS API]: https://postcss.org/api/ - -## Environment Variables - -- `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. - -[Create React App]: (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) - -### Using environment variables to support CSS Grid prefixes in Create React App - -1. Install the latest version of Autoprefixer and [cross-env](https://www.npmjs.com/package/cross-env): - -``` -npm install autoprefixer@latest cross-env --save-dev -``` - -2. 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" - ] -} -``` - -3. 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. - -[Browserslist environment variables]: https://github.com/browserslist/browserslist#environment-variables - -## 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. - -```css -/* Input CSS */ - -/* autoprefixer grid: autoplace */ - -.autoplacement-example { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; - grid-gap: 20px; -} -``` - -```css -/* 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: - -```html -
-
-
-``` - -The following CSS will not work as expected with the autoplacement feature enabled: - -```css -/* 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: - -```css -/* 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: - -```css -/* 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. - -```css -/* 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. - -```css -.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. - -```css -.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. - -```css -.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: - -```css -.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: - -```html -
-
-
-``` - -And you write this CSS: - -```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: - -```css -.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](https://codepen.io/daniel-tonon/pen/gBymVw) 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. - -```css -.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; -} -``` - -```css -.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; -} -``` - -## Debug - -Run `npx autoprefixer --info` in your project directory to check -which browsers are selected and which properties will be prefixed: - -```console -$ 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: - -```js -console.log(autoprefixer().info()) -``` - -## Security Contact - -To report a security vulnerability, please use the [Tidelift security contact]. -Tidelift will coordinate the fix and disclosure. - -[Tidelift security contact]: https://tidelift.com/security - -## For Enterprise - -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.](https://tidelift.com/subscription/pkg/npm-autoprefixer?utm_source=npm-autoprefixer&utm_medium=referral&utm_campaign=enterprise&utm_term=repo) +- [Add `/* autoprefixer: ignore next warning */` control comment](https://github.com/postcss/autoprefixer/pull/1560) (2026-10-07) +- [Set source for Grid prefixes in source maps](https://github.com/postcss/autoprefixer/pull/1559) (2026-10-05) +- [Inherit grid gap set with the row-gap and column-gap longhands](https://github.com/postcss/autoprefixer/pull/1557) (2026-09-15)