Accurately checking for CSS Grid support in Microsoft Edge

Edge is updating it's implementation of CSS Grid. YAY! I was thrilled to fire up a test build and take it for a spin and check out a few of the most common CSS Grid demos as a good first pass at real life scenarios.

Then I hopped over to a great repo set up by Rachel Andrew that shows live sites using CSS Grid.

I discovered something unfortunate while looking at Bryan Robinson's awesome portfolio site. It didn't look like a grid layout. I then check his site in Firefox, and bam, - it looks great. Something was up.

Looking at the code I see this:

@supports(display: grid) and (not(display: -ms-grid)) {
    /* grid code here */
}

While I get the purpose of this, IE's implementation of grid is not a direct 1:1 of the standardized CSS Grid. Unfortunately this makes it so that Edge will NOT go into this support block at all, because we will support both display: grid and display: -ms-grid when Edge ships.

The solution, just display: grid

So to make this work, we don't want to focus on -ms-grid at all, but harness the power of any of the other standard approach such as display: grid or any other grid-template-* properties added to the spec. For example:

@supports(display: grid) {
    /* will return true for any browser supporting the spec */
}

Bryan was awesome and updated his site about five minutes after we spoke on twitter and it now looks great.

What's Grid?

Just in case you read this whole post and don't know what CSS Grid is and what all the hype is about. Learn more about this awesome layout capability coming to a browser near you.

Update

In an earlier version of this post, I theorized why such a feature query was being used, as possibly related to a bug with @supports in an Insiders build of Edge 15 (eg: our Canary builds). This bug did not ship to stable, so I have updated the content to be the simpler more sane approach. Basically, don't include -ms-grid checks.