IE specific CSS rules and bypass filters using @media block hacks

This page is designed to detect loop holes in a browsers CSS parser. I'm using it to see if it's possible to:

  1. Wrap IE specific CSS rules in @media blocks.
  2. Trick IE into rendering @media blocks that use media queries.
For more information please read my blog post.

@media rules applied in this browser:

Exclusively targeting IE browsers

Style rules defined in the following blocks will only be applied in IE, other browsers will ignore them.

Rule IE 6 IE 7 IE 8 IE 9 IE 10
@media screen\0 {…} No No Yes Yes Yes
@media screen\9 {…} Yes Yes No No No
@media \0screen {…} No No Yes No No
@media \0screen\,screen\9 {…} Yes Yes Yes No No
@media screen and (min-width:0\0) {…} No No No Yes Yes
Key:
Yes
Styles applied
No
Styles not applied

@media query bypass filters for older IE browsers

A bypass filter allows older versions of IE to ALWAYS apply style rules defined in @media blocks that use media queries. Browsers that support @media queries will continue to apply the rules as expected. This hack could be useful for mobile-first responsive web design where "desktop" styles progressively are built up in @media queries.

Rule IE 6 IE 7 IE 8 IE 9 IE 10
@media screen and (min-width: 640px), screen\9 {…} Yes Yes No Uses MQ Uses MQ
Key:
Yes
Styles ALWAYS applied
Uses MQ
Styles applied if @media query is satisfied
No
Styles NEVER applied

You've probably noticed I haven't found an IE8 bypass filter yet - if you discover one please let me know via twitter.