Closed greenkeeper[bot] closed 5 years ago
Update to this version instead 🚀
browserslist
option instead of browsers
.Invalid array length
error during indent changes.Update to this version instead 🚀
Autoprefixer 7.2 brings better Grid support for IE
and autoprefixer-info
CLI tool.
With grid: true
option Autoprefixer adds -ms-
prefixes to Grid Layout properties. But this feature was very limited.
In 7.0 we dramatically improved Grid support for IE. @Alex7Kom added grid-area
and improved grid-row
and grid-column
support. @evgeny-petukhov added grid-template-areas
and grid-template
support.
Even this complex emoji example will work with new Autoprefixer (output):
body {
display: grid;
grid-template-rows: auto 300px;
grid-template-columns: 3fr 1fr;
grid-template-areas: "🎩 🎩"
"🍔 📰"
"👞 👞";
}
header {
grid-area: 🎩;
}
nav {
grid-area: 🍔;
}
main {
grid-area: 📰;
}
footer {
grid-area: 👞;
}
Just don’t forget to set grid: true
option:
auoprefixer({ grid: true })
Autoprefixer 7.2 ships with new CLI tool to check which browsers are selected and which properties will be prefixed.
Just go to your project directory and run 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
Also, @pdokas added default value (current working dir) for from
option in autoprefixer.info()
.
radial-gradient
properties warning.reverse
animation direction.Update to this version instead 🚀
Update to this version instead 🚀
_autoprefixerDisabled is undefined
issue.Update to this version instead 🚀
grid-template-areas
in @media
(by @evgeny-petukhov).Update to this version instead 🚀
Fix IE 10 support
Update to this version instead 🚀
Update to this version instead 🚀
Autoprefixer 8.1 brings overscroll-behavior
and better Grid support.
@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.
@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:
@supports (display: grid)
.@supports (grid-gap: 0)
.Note, that you need grid: true
option to Autoprefixer to add -ms-
prefixes for Grid Layout.
Update to this version instead 🚀
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;
}
Update to this version instead 🚀
Autoprefixer 8.3 adds @media
support for grid-template
and fixes gradient direction warning.
@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.
@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.
Update to this version instead 🚀
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 */
}
Update to this version instead 🚀
Autoprefixer 8.5 brings grid-gap
support and fix radial-gradient
.
@evgeny-petukhov 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 with a community about these limits.
.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
before Autoprefixer if you want to use new gap
property.
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 report.
.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);
}
Update to this version instead 🚀
-webkit-fill-available
.Update to this version instead 🚀
Autoprefixer 8.6 brings gap
property support and two values support for grid-gap
/gap
.
CSSWG renamed grid-gap
property to gap
.
@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:
.main {
gap: 10px 20px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas: "head head head"
"nav main main"
"nav foot foot";
}
ignoreUnknownVersions
option for BrowserslistUpdate to this version instead 🚀
grid-template
with media queries (by @yepninja)Update to this version instead 🚀
@media
(by @yepninja).Update to this version instead 🚀
grid
option for grid properties in autoprefixer --info
.Update to this version instead 🚀
stretch
prefix in Chrome >= 46.Update to this version instead 🚀
Update to this version instead 🚀
Autoprefixer 9.0 brings Browserslist 4.0 and drops Node.js 4 support.
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:
last 2 version
not dead
not Explorer 11
not ExplorerMobile 11
node 10
node 8
node 6
Autoprefixer Rails 9.0 dropped the RubyRacer and Sprockets 3 support.
Autoprefixer 9.0 uses 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.
Autoprefixer 9.0 uses PostCSS 7.0
Update to this version instead 🚀
Update to this version instead 🚀
Update to this version instead 🚀
Autoprefixer 9.1 brings background-clip: text
and fix span
in IE Grid.
background-clip: text
beome to be the standard and got Edge support. So we added it to Autoprefixer:
.title {
background: linear-gradient(yellow, red);
-webkit-background-clip: text;
background-clip: text;
}
Note, that Edge expect -webkit-
prefix for this property.
@bogdan0083 fixed an issue when media-query override some grid-template
.
Update to this version instead 🚀
grid-gap
through @media
(by @bogdan0083).grid-template
and @media
(by @bogdan0083).span X
Grid prefix (by @@bogdan0083).Update to this version instead 🚀
autoprefixer --info
in new Node.js.Update to this version instead 🚀
@babel/register
from dependencies.devDependency
autoprefixer was updated from 6.7.7
to 9.2.0
.devDependency
autoprefixer was updated from 6.7.7
to 9.2.1
.Update to this version instead 🚀
devDependency
autoprefixer was updated from 6.7.7
to 9.3.0
.Update to this version instead 🚀
Autoprefixer 9.3 brings place-self
support for Grid Layout
place-self
@Dan503 and @bogdan0083 found a way to impement support for another Grid property
.grid > .center {
place-self: center;
}
.grid > .center {
-ms-grid-row-align: center;
-ms-grid-column-align: center;
place-self: center;
}
@Dan503 and @bogdan0083 also detect and fixed issue with Grid row/column span inheritance.
devDependency
autoprefixer was updated from 6.7.7
to 9.3.1
.Update to this version instead 🚀
repeat()
value (by @bogdan0083).
Version 7.1.5 of autoprefixer was just published.
The version 7.1.5 is not covered by your current version range.
If you don’t accept this pull request, your project will work just like it did before. However, you might be missing out on a bunch of new features, fixes and/or performance improvements from the dependency update.
It might be worth looking into these changes and trying to get this project onto the latest version of autoprefixer.
If you have a solid test suite and good coverage, a passing build is a strong indicator that you can take advantage of these changes directly by merging the proposed change into your project. If the build fails or you don’t have such unconditional trust in your tests, this branch is a great starting point for you to work on the update.
Release Notes
7.1.5::placeholder
prefix for Edge.inherit
/initial
/unset
values forflex-direction
.FAQ and help
There is a collection of [frequently asked questions](https://greenkeeper.io/faq.html). If those don’t help, you can always [ask the humans behind Greenkeeper](https://github.com/greenkeeperio/greenkeeper/issues/new).Your Greenkeeper bot :palm_tree: