Releases: postcss/autoprefixer
8.4 “Non in aves, sed in angues”
Autoprefixer 8.4 brings new control comment to ignore next line.
@vostrik implemented the @levin-du’s idea of having control comment to disable only next property/rule:
.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 */
}8.3 “Benigno Numine”
Autoprefixer 8.3 adds @media support for grid-template and fixes gradient direction warning.
Media and Grid Layout
@evgeny-petukhov continues his great work for Grid Layout support in Autoprefixer.
Now he improved @media support. Now this CSS will work in IE:
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 found that Autoprefixer show warning even if cover is outside of radial-gradient.
a {
background: radial-gradient(#fff, transparent) 0 0 / cover no-repeat #f0f;
}@kotfire improve old direction detection and fix this issue.
8.2 “Ad Astra per Aspera”
Autoprefixer 8.2 brings color-adjust support.
@YozhikM, @soul-wish, and @yuriyalekseyev did a great work. They added new data to Can I Use and implemented a new feature to Autoprefixer.
body {
-webkit-print-color-adjust: exact;
color-adjust: exact;
}8.1 “Rex, Familia et Ultio”
Autoprefixer 8.1 brings overscroll-behavior and better Grid support.
Overscroll Behavior
@Malvoz suggested the great idea to polyfill overscroll-behavior for IE 11 and Edge by -ms-scroll-chaining.
.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 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.
8.0 “Excelsior”
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. We recommend subscribing for @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 to write future CSS today.