Hacker News Reader

Comment by RussianCow | Hacker News Reader

Does anyone here have experience using CSS Grid on IE? I would like to start using it, but at work we have to support IE11, and I understand that it implements a different version of the standard. Is the amount of effort required to support both versions worth it?

View on HN

It's not as simple as using auto-prefixer, since IE10 and IE11 use the older syntax. However, it's surprisingly not that bad for simple layouts.

Here's a great resource covering the hows and whys: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...

And here's a simplified example I threw together recently to demonstrate it in action: https://codepen.io/shahab/pen/ypWmZG

Basically, you lose auto-placement, named grid areas, and simple grid gaps, so you have to manually place items in the specific row/column for IE. But, I've found that it's still easier than the alternative in many cases.

Autoprefixer should take care of this for you. You write standard grid layout and it works on IE11.

My understanding is that the MS properties don't map 1-to-1 onto the standard CSS properties, so I don't think this would always work, hence the question. That said, I assumed Autoprefixer didn't support CSS Grid for that reason, so thanks for pointing out that it does.

Autoprefixer doesn't just add prefixes, it translates the the syntax to browser compatible code as well, for example:

    a {
        display: flex;
    }

Translates to:

    a {
       display: -webkit-box;
       display: -webkit-flex;
       display: -ms-flexbox;
       display: flex;
    }

It supports the 27 differences between the various browsers.

Autoprefixer doesn't take care of this for you. You either write a bunch of -ms properties, or get your preprocessor to do it for you. Here's a working example: https://codepen.io/ksenzee/pen/OzRejj

This is not true. IE11 simply doesn't support the whole of CSS Grid, and tools like Autoprefixer don't and can't add support.

If you limit yourself to only using the parts of CSS Grid that IE11 supports, then you can write the standard equivalent to that subset and Autoprefixer will translate it for you, but you can't "just write standard grid layout", because that includes things there is no IE11 equivalent for.

Reply on news.ycombinator.com