1

I created a new angular project using the Angular CLI: 6.0.8

I want to create a website using CSS Grid that supports IE 11 using the autoprefixer that's already bundled in the Angular project.

My first step was to add browser rules to the package.json file

  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]

Then I added the following HTML to the app.component.html file

<div class="example">
  <div class="children">
    1
  </div>
  <div class="children">
    2
  </div>
  <div class="children">
    3
  </div>
  <div class="children">
    4
  </div>
</div>

And this CSS to the app.component.css file

.example{
    display: grid;
    grid-template-columns: 20px 100px 35px 12px;
}

This works great in all modern browsers. They render my grid as expected. CSS Grid

But in IE11 it renders incorrectly

css grid in IE

I know that the autoprefixer is doing its job because if you inspect the element in IE you see the following.

autoprefixer

EDIT:

This question IS NOT a duplicate of CSS Grid Layout not working in Edge and IE 11 even with -ms prefix

His problem was that IE 11 didn't support the grid spec he was using. The whole point of me using autoprefixer is so I don't have to worry about that. I know that some things won't carry over but the basic grid stuff I wrote DOES and is pre-fixed with the proper vendor fix. But it's still not working and that's why I posted this question. Please remove duplicate from title or link to an actual duplicate. That link doesn't answer my problem.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
onTheInternet
  • 6,421
  • 10
  • 41
  • 74
  • So it **is** working then....but the styles aren't applyiing. That's a different issue...right? – Paulie_D Aug 14 '18 at 13:48
  • I'm not sure. Maybe there is a setting in the autoprefixer that I haven't enabled? – onTheInternet Aug 14 '18 at 14:03
  • @Pete I don't see how this is a duplicate. The answer you linked isn't my problem. – onTheInternet Aug 14 '18 at 14:08
  • You are using a prefixer that all it does is add the ms prefixes to the items you are using. This means that you are using the current spec for ie11 (just prefixed with ms), therefore this is a duplicate - if you find a prefixer that will prefix and convert to the old spec then this will not be a duplicate, but as all you have done is prefix your current items and not convert them too, then I don't see how this isn't a duplicate, unless the question becomes is there something that will convert, then the question becomes off topic as you are asking for a tool – Pete Aug 14 '18 at 14:31
  • I think I understand. Thank you for your explanation @Pete – onTheInternet Aug 14 '18 at 14:43
  • Have a look at this - I think it is closer: https://stackoverflow.com/questions/47180756/css-grid-not-workiing-on-ie11-or-edge-even-with-ms-prefix - they seem to have added a load of extra properties on top of the prefixes – Pete Aug 14 '18 at 14:46

0 Answers0