-ms- prefix doesnt seem to work

-ms- prefix doesnt seem to work
0

#1

Hello,

Im working on a litle project for my own and I want to make it look good in IE as well.
Im using the prefix like this:

#gallery {
        display: -ms-grid;
            display: grid;
        -ms-grid-template-columns: 250px 250px 250px;
            grid-template-columns: 250px 250px 250px;
        -ms-grid-auto-rows: 350px;
            grid-auto-rows: 350px;
        -ms-justify-content: center;
            justify-content: center;
        -ms-grid-column-gap: 72px;
            grid-column-gap: 72px;
        -ms-grid-row-gap: 72px;
            grid-row-gap: 72px;
    }

When I open the html file in IE however, nothing changes. Can anyone tell me what I’m doing wrong?

Thanks.


#2

This is what I get when using Autoprefixer

#gallery {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 250px 72px 250px 72px 250px;
            grid-template-columns: 250px 250px 250px;
            grid-auto-rows: 350px;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            grid-column-gap: 72px;
            grid-row-gap: 72px;
}

#3

I have used your code, still not working…


#4

What version of IE are you targeting?

Edit: You can also give this article a read or this may be newer.


#5

Im checking it in IE 11. Thanks I will give it a look


#6

MDN documentation lists that grid gap isn’t supported on IE.

Unfortunately, IE is really holding the world back here. Grid gap is such an important and helpful property :sleepy:


#7

I started looking into this, 30 seconds in I regret everything. I honestly can’t be bothered to figure out what is needed for IE 11 support. I’m sure if you look at the links and resources you can come up with something.

For autoprefixer, you can use grid-gap as long as you define both grid-template-areas and grid-template-columns and then place the grid items correctly.

Before autoprefixer:

#gallery {
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-template-areas: "col-1 col-2 col-3";
  grid-auto-rows: 350px;
  justify-content: center;
  grid-gap: 72px;
}

After autoprefixer:

#gallery {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 250px 72px 250px 72px 250px;
  grid-template-columns: 250px 250px 250px;
      grid-template-areas: "col-1 col-2 col-3";
  grid-auto-rows: 350px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-gap: 72px;
}

This sort of works, i didn’t really get into it (and i now hate IE 11 a little more, if thats even possible).

Summary
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Fun...not</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="gallery">
	<img class="img-1" src="http://via.placeholder.com/350" alt="">
    <img class="img-2" src="http://via.placeholder.com/320" alt="">
    <img class="img-3" src="http://via.placeholder.com/300" alt="">
  </div>
  </body>
</html>


* {
  padding: 0;
  margin: 0;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

#gallery {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 250px 72px 250px 72px 250px;
  grid-template-columns: 250px 250px 250px;
      grid-template-areas: "col-1 col-2 col-3";
  grid-auto-rows: 350px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-gap: 72px;
}

.img-1 {
  -ms-grid-column: 1;
}
.img-2 {
  -ms-grid-column: 3;
}
.img-3 {
  -ms-grid-column: 5;
}

#8

At this point, IE 11 is mostly for folks who refused to go past Windows 7 and are using what amount to very old computers at this point. That’s going to be older folks mostly. It’s not natively installed on most newer systems.

Unless your building content that is targeting that audience…I would move on by and concentrate or Edge or whatever else MS is doing now.


#9

Well, Microsoft has given up and will now use Chromium for their browser. For developers it’s probably nice, competition wise it’s not great. Soon, just as with search, people will call browsing “Chroming”…I hope not.

Goodbye, EdgeHTML

From a social, civic and individual empowerment perspective ceding control of fundamental online infrastructure to a single company is terrible. This is why Mozilla exists. We compete with Google not because it’s a good business opportunity. We compete with Google because the health of the internet and online life depend on competition and choice. They depend on consumers being able to decide we want something better and to take action.

Anyway, apparently there are still more people using IE 11, then Firefox. Also, I’m sure there are plenty of businesses that still want IE 11 support and Intranet stuff that has not been updated. But soon enough phones will be most of the market share I’m sure.


#10

IE11 is still only 3%. Edge is over 4.

I’m not really worried about competition. Chrome really hasn’t had any for a long time. Firefox has almost no customer facing arm (advertising) and MS still relies on people who never do anything besides out of the box. With their purchase of Github, MS has to switch to chromium or rebuild, so that makes sense.

Unless you’re B2B, again, worrying about the corporate intranet support is also, not worth that while.


#11

Im making a portfolio website for my drawings, so it will mainly be family and friends visiting my site. Unfortunately some of them are older folks still using IE. Im not even sure they have it updated to 11 :sob:

Ive already started educating them a little bit about the web in the hope they will switch, but Im still worried about them wanting to proudly show off my work to their friends who might also still use IE and then end up seeing a crappy page :frowning:


#12

I dont blame you, i got a headache because of IE myself right now. Thanks for your time anyway I will try your code later when I got the time and energy to try and tackle it again.