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.