1

I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.

I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?

Dr Upvote
  • 8,023
  • 24
  • 91
  • 204
  • See: http://stackoverflow.com/questions/5769493/ie8-support-for-css-media-query – Diodeus - James MacFarlane Jan 18 '12 at 17:28
  • Yeah. I know calling in individual stylesheets per IE is probably the best method, just was wondering if there was anything else out there. It would be neat to program something like "all @media void" etc. – Dr Upvote Jan 19 '12 at 16:19

3 Answers3

0

I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

  .example:not(.nevergonnahappen) {
        color: red;
  }
}

IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.

If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.

.touch .example {...}

instead of 

.example:not(.nevergonnahappen) {...}

where the ".touch" class is put in for touch-screen devices.

Miriam Salzer
  • 1,242
  • 1
  • 12
  • 16
  • Actually starting the media query with `@media only screen` (emphasis on *only*) is enough for IE8 to skip it all together. JFYI – hexalys Feb 01 '14 at 08:42
0

Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/

And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat: 

@media screen and (min-width:640px), screen/9 {
    body {
        background: green;
    }
}

"This allows all non-IE browsers to render the styles and keeps media query support in IE9/10. It also creates a pass-through filter for IE6/7 but we’re still stuck with IE8 ignoring the entire block". http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark

hexalys
  • 5,177
  • 3
  • 31
  • 56
0

How about doing feature detection with Modernizr. http://www.modernizr.com/

ialphan
  • 1,241
  • 1
  • 17
  • 30