autoprefixer: grid-row-span and grid-column-span not being prefixed by autoprefixer
I have this SCSS mixin which creates css rules:
$columns: 12;
$rows: 12;
@mixin colspan-x {
@for $i from 1 through $columns {
.colspan#{$i} { grid-column-span: $i; }
}
}
@mixin rowspan-x {
@for $i from 1 through $rows {
.rowspan#{$i} { grid-row-span: $i; }
}
}
@include colspan-x;
@include rowspan-x;
This creates
.colspan1 {
grid-column-span: 1;
}
.colspan2 {
grid-column-span: 2;
}
.colspan3 {
grid-column-span: 3;
}
.colspan4 {
grid-column-span: 4;
}
.colspan5 {
grid-column-span: 5;
}
.colspan6 {
grid-column-span: 6;
}
.colspan7 {
grid-column-span: 7;
}
.colspan8 {
grid-column-span: 8;
}
.colspan9 {
grid-column-span: 9;
}
.colspan10 {
grid-column-span: 10;
}
.colspan11 {
grid-column-span: 11;
}
.colspan12 {
grid-column-span: 12;
}
.rowspan1 {
grid-row-span: 1;
}
.rowspan2 {
grid-row-span: 2;
}
.rowspan3 {
grid-row-span: 3;
}
.rowspan4 {
grid-row-span: 4;
}
.rowspan5 {
grid-row-span: 5;
}
.rowspan6 {
grid-row-span: 6;
}
.rowspan7 {
grid-row-span: 7;
}
.rowspan8 {
grid-row-span: 8;
}
.rowspan9 {
grid-row-span: 9;
}
.rowspan10 {
grid-row-span: 10;
}
.rowspan11 {
grid-row-span: 11;
}
.rowspan12 {
grid-row-span: 12;
}
If I put this through autoprefixer (grid: true) the output stays identical, no -ms-grid-column-span
and -ms-grid-row-span
properties are being added. Other properties like grid-column
and grid-row
are properly prefixed.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 113 (59 by maintainers)
Go with the IE version and auto prefixer.
I’ve got a three part series coming out in just 2 or 3 weeks that will teach you everything you need to know about using css-grid safely in IE.
The issue you are facing is that you are not specifying a start column or an end column. You can’t just specify a span and leave it at that for Autoprefixer to work.
Here is the bit in the article about spanning multiple cells:
Autoprefixer has limited column and row spanning support
There is only one way to span multiple cells in IE. You need to define two things, a starting cell, and how many other cells you would like to span.
In modern browsers, you have access to far more options.
Autoprefixer friendly
Out of the modern ways to span multiple cells, Autoprefixer fully supports the following. Feel free to use any of these methods as much as you like:
Specify a starting line and the number of lines to span (similar to IE):
Specify an end line and then span backwards:
Specify a starting line and an end line directly:
Autoprefixer unfriendly. Here be dragons!
Now this is where Autoprefixer reaches its limit. The following methods are supported in modern browsers but are not supported by Autoprefixer. This is mainly due to Autoprefixer having no idea what grid the grid cell belongs to. For the last one, it is really only useful if you have access to auto-placement which is not something that IE supports.
Specify a starting line and how many lines from the end of the explicit grid to span:
Specify both the start and end line from the end of the explicit grid:
Specify only how many lines to span:
So basically avoid using negative integers and don’t use purely just a span and you will be fine 😃
New issue created here: https://github.com/postcss/autoprefixer/issues/1064
@Dan503 can you open a new issue? We will prevent
-ms-
prefix and will show warning.I’m using
$columns
in two more mixins - so I don’t see much of an improvement there. It would lead to@ai (Sorry about all the spam)
Well, then I get it. I like your approach alot because it would even allow us to stay on the currently generated HTML!
@franktopel you must set
grid: true
option. So you must createpostcss.config.js
(in the same dir, where you puta.css
):