Media Queries Targeting Internet Explorer (IE) | CSS: Presentation Layer

Standards Based Development

ie10

Feature Detection via @cc_on

This works because the code is inside of an ie-excluding conditional comment, ensuring that ie < 10 will not recognize it. ie10 and greater will recognize and append the ie10 to the html element:

<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

Style html.ie10{} the same way we apply specific styles via conditional comments:

html{background-color:#000}
html.ie10{background-color:#ff0}

@cc_on JavaScript Statement activates conditional compilation support in ie; Note: ie only, not in Windows Store applications.

Conditional compilation activiation allows for comments within a script.

Note: an @if or @set statement outside of a comment also activates conditional comilation.

@media -ms-high-contrast

takes advantage that ie10 supports media queries and also supports -ms-high-contrast as a media query value (ie9 does not support -ms-high-contrast value).

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

}

The above media query supports ie10 in both high constrast mode and default mode.

Note: @media -ms-high-contrast does not work in ie10pp2.

/* 
    IE10 Hack https://gist.github.com/4025104
    #ie10 will only be red in MSIE 10, 
    both in high contrast (display setting) and default mode 
*/

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #ie10 { color: red; }
}

@media Zero

@media zero targets both ie9 and ie10.

https://gist.github.com/4025104

• @media block as well as its contents.

  To target IE 6 and 7

  
  @media screen\9 {
      body { background: red; }
  } 
  

  To target IE 6, 7 and 8

  
  @media \0screen\,screen\9 {
      body { background: green; }
  } 
  

  To target IE 8

  
  @media \0screen {
      body { background: blue; }
  } 
  

  To target IE 8, 9 and 10

  
  @media screen\0 {
      body { background: orange; }
  } 
  

  To target IE 9 and 10

  
  @media screen and (min-width:0\0) {
      body { background: yellow; }
  } 
  

  Demo code use, this says it all really:

  
  body {
    background: pink;
  }
  
  /* IE 6 and 7 fallback styles */
  @media all\9 {
      body {
          background: red;
      }
      h1 {
          color: yellow;
      }
  }
  
  /* IE 6 and 7 fallback print styles */
  @media print\9 {
      body {
          color: blue;
      }
      h1 {
          color: red;
      }
  }
  

  Note that the @media type can be any of the supported types, so rules in @media screen\9 will target screens and @media print\9 will only apply to print style sheets.

  Moving ie Specific css into @media Blocks