Autoprefixer: Grid Layout support ?

[raphaelgoetter]

Hello,

It seem that Grid Layout CSS spec (currently in WD, like transitions, animations or transforms) isn't supported at all by Autoprefixer (For example, IE and Edge need -ms- prefixes).

Is it a choice ? Is it planned ?

[ai]

Can you get me a list of properties and how they works in IE?

[ai]

Future note for me: here is Can I Use page
http://caniuse.com/#feat=css-grid

[raphaelgoetter]

Hello,

IE10 grid layout support :

• concerns old Grid spec : http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
• source on Microsoft : https://msdn.microsoft.com/en-us/library/hh772052(v=vs.85).aspx
• -ms- prefix needed on IE10/IE11/Edge12-13-14 (http://caniuse.com/#feat=css-grid)

Hope everything is correct :

• display: -ms-grid --> display: grid
• display: -ms-inline-grid --> display: inline-grid
• -ms-grid-columns : value --> grid-template-columns : value (same)
• -ms-grid-rows : value --> grid-template-rows : value (same)
• -ms-grid-columns: 10px (250px 10px)[4]; --> grid-template-columns: 10px repeat(4, 250px 10px);
• -ms-grid-column : value --> grid-column : value (same)
• -ms-grid-row : value --> grid-row : value (same)
• -ms-grid-column-align: value --> justify-items: value (same)
• -ms-grid-row-align: value --> align-items: value (same)
• -ms-grid-column-span: value --> grid-column : auto / span value
• -ms-grid-row-span: value --> grid-row : auto / span value

I think that Edge is OK with latest spec ( ?)

EDIT : also the imprementation status for Grid Layout : https://www.chromestatus.com/feature/4589636412243968

[magsout]

@ai

Future note for me: here is Can I Use page

There is already working on it, for Firefox and Chrome with a flag enabled it works

So :+1: for support this spec

[ai]

Also we should allow to disable this prefixes, because IE support is very fragmental #604

[ai]

OK, I made Grid support (fuck, flexbox and grid final spec use same align-items property, it was really tricky to support it in both prefixes) 882a97f

[ai]

I only miss a -ms-grid-row-span.

@raphaelgoetter you gave me -ms- → final rules. Can you give me opposite final → -ms- rules. I really can’t understand -ms-grid-row-span logic.

[raphaelgoetter]

I'm not very sure (and not very good in english either).

I think -ms-grid-row-span: 3 means "elements spans 3 rows". The spec now is a bit more complicated : http://www.w3.org/TR/css-grid-1/#common-uses-numeric

Now you have to write something like grid-row: auto ./ span 3 for the same result.

But I think you should ask the specs editors to be sure :/

[ai]

@raphaelgoetter I ask you about transformation in different way.

What is code we should generate if user write grid-row: 3 / 3.

[ai]

@raphaelgoetter other question: what we should generate on grid-row: span 3.

[yisibl]

This is a good start, but we need a detailed test and review, I suggest that this feature is disabled by default.

[ai]

@yisibl hm, yeap good suggetion.

But I think we can enable it. Anyway there is no CSS with Grid right now.

[raphaelgoetter]

What is code we should generate if user write grid-row: 3 / 3.

I _think_ grid-row: 3 / 3 would be -ms-grid-row: 3; -ms-grid-rows-pan: 1;

Anyway there is no CSS with Grid right now.

Every browser is developing grid, we'll use it very soon in production. Moreover, there is a solid polyfill who does a good job.

[ai]

@raphaelgoetter seems like in grid-row: A / B, A is for grid-row-start and B is for grid-row-end.

So, where did you get -ms-grid-row-span: value → grid-row : auto / span value. Why it is not grid-row: span value / auto?

[ai]

@raphaelgoetter ouh, I understood. -ms-grid-row-span is like a element width. In new spec, you didn’t set a “width”, but set a “left” (start) and “right” (end) points.

[raphaelgoetter]

I think you're right. There are many examples here : http://gridbyexample.com/examples/ and a 2012 article based on MS grid layout : https://24ways.org/2012/css3-grid-layout/

[ai]

grid-*-end support is finished 87db0e3

I will try to add grid-row: X / Y support too.

[ai]

@raphaelgoetter what do you think, should we disable it by default?

[raphaelgoetter]

Great job !
Disabled by defaut seems a good choice for now, yes.

[ai]

BTW, flexbox was not supported by Safari too.

[raphaelgoetter]

Not yet but i sent a chromestatus link on a previous post which says that it's in development on safari.

[yisibl]

I think this feature is disabled by default.

Because:

1. Gird CSS specification is not stable.
2. Blink and Firefox need to enable flag, WebKit only Nightly version to support.
3. Old and new grammar and its confusion. For example:
   
   
   
   • WebKit need prefix in max-content/min-conent value.
   
   
   • Only Firefox 46+ support auto-fill and auto-fit in the repeat() function(bug 1118820).
   
   

So we have a lot of details to repair.

[ai]

I finish all properties support: in → out.

Today I will decide about disabling feature.

[raphaelgoetter]

That seems great, good job !

[ai]

I agree that IE support for Grid is too fragmental. But there is why I think we should not disable it by default:

1. It really useful. You can make a most popuular examples with it.
2. Every other features was enabled. API consistency is important.
3. Nobody read a docs, so user will miss this feature.

But I think I found a solution for everyone:

1. We support Grid by default.
2. If Autoprefixer see that your CSS is too complicated for IE, it will warn you to disable Grid support and use some JS polyfill.

[yisibl]

@ai OK :+1:

[FDiskas]

I was using create-react-app and simple

.demo {
display: grid;
}

does nothing.
webpack config

...
{
  loader: require.resolve('postcss-loader'),
  options: {
    // Necessary for external CSS imports to work
    // https://github.com/facebookincubator/create-react-app/issues/2677
    ident: 'postcss',
    plugins: () => [
      require('postcss-flexbugs-fixes'),
      autoprefixer({
        browsers: [
          '>1%',
          'last 5 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ],
        flexbox: 'no-2009',
      }),
    ],
  },
},
...

Tested on https://autoprefixer.github.io/ and it works as
Versions:
```
[email protected]
[email protected]
[email protected]

[ai]

@FDiskas add grid: true option to Autoprefixer.

[Seanom]

It doesn't appear that column span gets prefixed even with grid set to true was this removed or am I missing something?
-ms-grid-column-span | grid-column

I tried with both:
grid-column: span 2;
grid-column: 1 / -1;
using just grid-column: 1 works as expected and results in -ms-grid-column: 1

Tested over at https://autoprefixer.github.io/ and the same thing occurs

[ai]

@Seanom how do you set options to Autoprefixer. And what version of Autoprefixer to you use?

[yepninja]

@Seanom grid-column is a shortcut. And now it supports only two positive values, one of values can contain span. Try grid-column: 2 / span 5;, it works.