postcss/autoprefixer (autoprefixer)
### [`v9.0.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.0.0): 9.0 “A Mari Usque Ad Mare”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.5...9.0.0)
Autoprefixer 9.0 brings Browserslist 4.0 and drops Node.js 4 support.
#### Breaking Changes
We removed Node.js 4 and Node.js 9 support since it doesn’t have security updates anymore.
We removed IE and “dead” browsers (without security updates) from Babel’s targets. Don't worry, Autoprefixer still generate IE-compatible code. These changes affect websites which run Autoprefixer on client-side like CodePen.
last 2 version
not dead
not Explorer 11
not ExplorerMobile 11
node 10
node 8
node 6
[Autoprefixer Rails](https://togithub.com/ai/autoprefixer-rails) 9.0 dropped the RubyRacer and Sprockets 3 support.
#### Browserslist 4.0
Autoprefixer 9.0 uses [Browserslist](https://togithub.com/browserslist/browserslist) 4.0 to get your target browsers.
Now you use Browserslist to specify Node.js versions. Babel 7 will use Browserslist config as well.
Also, Browserslist 4.0 will warn you if you didn’t update Can I Use DB for last than 6 month.
#### PostCSS 7.0
Autoprefixer 9.0 uses [PostCSS 7.0](https://togithub.com/postcss/postcss/releases/tag/7.0.0)
### [`v8.6.5`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#865)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.4...8.6.5)
- Do not show Grid warnings if IE was not selected.
### [`v8.6.4`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#864)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.3...8.6.4)
- Fix `stretch` prefix in Chrome >= 46.
### [`v8.6.3`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#863)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.2...8.6.3)
- Add warnings for unsupported Grid features.
- Add warnings about wrong Grid properties.
- Add note about `grid` option for grid properties in `autoprefixer --info`.
### [`v8.6.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#862)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.1...8.6.2)
- Fix error during adding Grid prefixes in `@media` (by Evgeny Petukhov).
### [`v8.6.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#861)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.0...8.6.1)
- Fix `grid-template` with media queries (by Evgeny Petukhov).
### [`v8.6.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.6.0): 8.6 “Follow Reason”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.5.2...8.6.0)
Autoprefixer 8.6 brings `gap` property support and two values support for `grid-gap`/`gap`.
##### Grid Gap
CSSWG [renamed](https://drafts.csswg.org/css-grid/#change-2016-grid-gap) `grid-gap` property to `gap`.
[@yepninja](https://togithub.com/yepninja) added `gap` support with 2 values support.
Grid layout code bellow will work even in IE if you pass `grid: true` option to Autoprefixer:
```css
.main {
gap: 10px 20px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "head head head"
"nav main main"
"nav foot foot";
}
```
##### Other Changes
- Add `ignoreUnknownVersions` option for [Browserslist](https://togithub.com/browserslist/browserslist)
### [`v8.5.2`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#852)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.5.1...8.5.2)
- Fix `grid-template` support wit auto row sizes (by Yury Timofeev).
### [`v8.5.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#851)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.5.0...8.5.1)
- Remove unnecessary warning on `-webkit-fill-available`.
### [`v8.5.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.5.0): 8.5 “Muito Nobre e Sempre Leal”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.4.1...8.5.0)
Autoprefixer 8.5 brings `grid-gap` support and fix `radial-gradient`.
##### Grid Gap
[@yepninja](https://togithub.com/yepninja) continues his amazing work of adding CSS Grid Layout support to Autoprefixer.
Now he brought `grid-gap`. It is amazing work since IE 11 has gaps support in `-ms-` grids.
To add `grid-gap` support for IE 11 Autoprefixer adds addition grid cells. Unfortunately, it will work only if you have `grid-template` in the same rule with `grid-gap`. We had [big discussion](https://togithub.com/postcss/autoprefixer/pull/1032) with a community about these limits.
```css
.page {
grid-gap: 33px;
-ms-grid-rows: 1fr 33px minmax(100px, 1fr) 33px 2fr;
-ms-grid-columns: 1fr 33px 100px 33px 1fr;
grid-template:
"head head head" 1fr
"nav main main" minmax(100px, 1fr)
"nav foot foot" 2fr /
1fr 100px 1fr;
}
```
Set [`postcss-gap-properties`](https://togithub.com/jonathantneal/postcss-gap-properties) before Autoprefixer if you want to use new `gap` property.
##### Radial Gradients
Old gradients with prefixes used a different direction syntax. Autoprefixer converts direction to old syntax (or warn you to rewrite direction from old to new syntax).
But it has an issue with extent keywords like `circle closest-corner`. We fixed it after [@BaliBalo](https://togithub.com/BaliBalo) [report](https://togithub.com/postcss/autoprefixer/issues/1002).
```css
.mask {
-webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, black, white);
mask-image: radial-gradient(circle closest-corner at 100% 50%, black, white);
}
```
### [`v8.4.1`](https://togithub.com/postcss/autoprefixer/blob/HEAD/CHANGELOG.md#841)
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.4.0...8.4.1)
- Fix working in old PostCSS versions (by Diablohu).
### [`v8.4.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.4.0): 8.4 “Non in aves, sed in angues”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.3.0...8.4.0)
Autoprefixer 8.4 brings new control comment to ignore next line.
[@vostrik](https://togithub.com/vostrik) implemented the [@levin-du](https://togithub.com/levin-du)’s idea of having control comment to disable only next property/rule:
```css
.logo {
/* autoprefixer: ignore next */
user-select: none; /* ← ignored */
mask: url(mask.jpg); /* ← will be prefixed */
}
/* autoprefixer: ignore next */
::placholder /* ← ignored */ {
text-decoration-style: dotted; /* ← will be prefixed */
}
```
### [`v8.3.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.3.0): 8.3 “Benigno Numine”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.2.0...8.3.0)
Autoprefixer 8.3 adds `@media` support for `grid-template` and fixes gradient direction warning.
##### Media and Grid Layout
[@evgeny-petukhov](https://togithub.com/evgeny-petukhov) continues his great work for Grid Layout support in Autoprefixer.
Now he improved `@media` support. Now this CSS will work in IE:
```css
body {
grid-template:
[header-left] "head head" 30px [header-right]
[main-left] "nav main" 1fr [main-right]
[footer-left] "nav foot" 30px [footer-right]
/ 120px repeat(4, 250px 10px);
}
header {
grid-area: head;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
@media (min-width: 1000px) {
body {
grid-template:
[header-left] "head" 30px [header-right]
[main-left] "main" 1fr [main-right]
[footer-left] "footer" 30px [footer-right]
/ 1fr;
}
}
```
Don’t forget that Autoprefixer inserts Grid Layout prefixes only if you set `grid: true` option.
##### Gradient Warning
[@radium-v](https://togithub.com/radium-v) found that Autoprefixer show warning even if `cover` is outside of `radial-gradient`.
```css
a {
background: radial-gradient(#fff, transparent) 0 0 / cover no-repeat #f0f;
}
```
[@kotfire](https://togithub.com/kotfire) improve old direction detection and fix this issue.
### [`v8.2.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.2.0): 8.2 “Ad Astra per Aspera”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.1.0...8.2.0)
Autoprefixer 8.2 brings [`color-adjust`](https://drafts.csswg.org/css-color-4/#color-adjust) support.
[@YozhikM](https://togithub.com/YozhikM), [@soul-wish](https://togithub.com/soul-wish), and [@yuriyalekseyev](https://togithub.com/yuriyalekseyev) did a great work. They added new data to Can I Use and implemented a new feature to Autoprefixer.
```css
body {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}
```
### [`v8.1.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.1.0): 8.1 “Rex, Familia et Ultio”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.0.0...8.1.0)
Autoprefixer 8.1 brings `overscroll-behavior` and better Grid support.
##### Overscroll Behavior
[@Malvoz](https://togithub.com/Malvoz) [suggested](https://togithub.com/postcss/autoprefixer/issues/956) the great idea to polyfill `overscroll-behavior` for IE 11 and Edge by `-ms-scroll-chaining`.
```css
.none {
-ms-scroll-chaining: none;
overscroll-behavior: none;
}
.contain {
-ms-scroll-chaining: none;
overscroll-behavior: contain;
}
.auto {
-ms-scroll-chaining: chained;
overscroll-behavior: auto;
}
```
Note, that `overscroll-behavior-x` and `overscroll-behavior-y` are not supported since `-ms-` property doesn’t have this freedom.
##### Better Grid Layout
[@evgeny-petukhov](https://togithub.com/evgeny-petukhov) continues his amazing work and now Autoprefixer polyfills Grid Layout for IE in more cases.
He added `grid-template` shortcut support and improve support of `grid-column-end` and `grid-row-end`.
Grid properties were fixed in `@supports`. We recommend:
- To select modern Grid browsers and IE 11: `@supports (display: grid)`.
- To select only Grid browsers without IE 11: `@supports (grid-gap: 0)`.
Note, that you need `grid: true` option to Autoprefixer to add `-ms-` prefixes for Grid Layout.
### [`v8.0.0`](https://togithub.com/postcss/autoprefixer/releases/tag/8.0.0): 8.0 “Excelsior”
[Compare Source](https://togithub.com/postcss/autoprefixer/compare/7.2.6...8.0.0)
Autoprefixer 8.0 uses Browserslist 3.0, has `autoprefixer` CLI tool instead of `autoprefixer-info`.
##### Browserslist 3.0
The main feature of Autoprefixer 8.0 is Browserslist 3.0. In the new version, it brings new default browsers. It will affect you only if you don’t change browsers by `.browserslistrc` or `browserslist` key in `package.json` (we don’t recommend to use `browsers` option).
In one hand, Browserslist 3.0 usage statistics limit for default browsers was reduced from `>1%` to `>0.5%`. In another hand, we remove dead browsers from default browsers. The dead browser is a browser with < than 1% in the global market and who don’t have security updates. Right now IE 10 and BlackBerry browser are dead browsers.
Read other notable changes in [Browserslist 3.0 changelog](https://togithub.com/ai/browserslist/blob/master/CHANGELOG.md#30). We recommend subscribing for [@Browserslist](https://twitter.com/browserslist) twitter account.
##### CLI Tool
CLI tool to show target browsers and used prefixes was renamed to `autoprefixer`:
$ npx autoprefixer --info
Browsers:
Edge: 16
These browsers account for 0.04% of all users globally
At-Rules:
@viewport: ms
Selectors:
::placeholder: ms
Properties:
user-select: ms
hyphens: ms
appearance: webkit
scroll-snap-type: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
flow-into: ms
flow-from: ms
region-fragment: ms
text-spacing: ms
With the new name, `npx` will install Autoprefixer automatically if it is missed in the current project.
##### Page Breaks for Firefox
Previous Autoprefixer versions replace `break-*` properties to `page-break-*` for Firefox.
But this feature didn’t add any vendor prefix. Autoprefixer goal is to take care only about prefixes, not polyfills. For better consistency, we removed this feature from Autoprefixer.
Don’t afraid, the PostCSS ecosystem has many plugins for CSS polyfills. We recommend to take look at [postcss-preset-env](https://togithub.com/jonathantneal/postcss-preset-env) to write future CSS today.
[ ] If you want to rebase/retry this PR, check this box
This PR contains the following updates:
^7.1.2->^9.0.0By merging this PR, the below issues will be automatically resolved and closed:
Release Notes
postcss/autoprefixer (autoprefixer)
### [`v9.0.0`](https://togithub.com/postcss/autoprefixer/releases/tag/9.0.0): 9.0 “A Mari Usque Ad Mare” [Compare Source](https://togithub.com/postcss/autoprefixer/compare/8.6.5...9.0.0)