How to create an unnested IE11 media query?

Question

I'm trying to support IE11 in my grid-site, and I have -ms-grid code in one media query. I want to activate -ms-grid only on screens larger than 767px.

This works:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active){

I will get -ms-grid code in IE11 with that, and only in IE11, but this doesn't work:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active), (min-width:767px){

It doesn't turn off when I resize the screen.. I have tried a few different variations on it, I'm quite a noob on media queries so I hope you can spot something thats off..

Answer 1

Now that I have tested everything, supporting grid/-ms-grid/no-grid, I see that the best way is this:

1. Create mobile friendly html5 site without grid

2. Support Internet Explorer 11 by doing this:

   @media screen and (min-width: 767px){
       *::-ms-backdrop,.example{
           display: -ms-grid;
       }
   }
   

3. Support "display: grid;" enabled browsers with this:

   @media only screen and (min-width: 767px){
       @supports (display: grid){
           .example{
               display: grid;
           }
       }
   }
   

Remember to make sure the code is in this order because Edge still reads the old grid code aswell.