Internet Explorer 10+ media queries and responsive break points

Question

I am trying to combine an IE10+ specific media query with a max-width page break point.

I am pretty sure they can be combined but am not sure how to do it.

Here is the original IE10+ only css media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   /* IE10+ CSS styles go here */
   }

Here is my feeble attempt at combining them:

@media (-ms-high-contrast: none), (-ms-high-contrast: active), only screen and (max-width: 950px) {
    /* IE10+ CSS styles go here */ 
    }

The IE only code here works fine, however the "max-width" doesn't work at all.

Thanks for any help!

Answer 1

It works if you do it like this: repeat all the parts of the media query selector.

.For.IE.only {
  display: none
}

@media all and (-ms-high-contrast: active) and (max-width: 950px),
       all and (-ms-high-contrast: none) and (max-width: 950px) {
  .For.IE.only {
    display: block
  }
}

<div class="For IE only">
  This is for IE only, and only on narrow screens
</div>
<div>
  This is for all browsers
</div>

Disclaimer: I don't have IE10 here, only IE11, but I'm reasonably sure it will work in IE10 as well.