5

I am looking at using modernizr for supporting media query in ie8. Could you please provide an example to implement the same.

I also had a look at Respond.js, but found it a bit complex with all the CDN stuff.

Any other suggestions would also be appreciated.

copenndthagen
  • 49,230
  • 102
  • 290
  • 442

3 Answers3

11

Respond.js is mandatory if you want to use mediaqueries in IE8. This is the polyfill that enables media queries for the browser.

Modernizr only offer test for mediaqueries. According to the doc, in older non-supporting browser the test will always return false.

Another alternative is adapt.js by Nathan Smith creator of the 960gs grid system.

Update: Modernizr is now adding support for html5 tags in older version of IE as stated in the doc

Jonathan Liuti
  • 685
  • 5
  • 10
  • Thx a lot..i just had a look at. Semms to be exactly what i m looking for..Adapt.js..If i understand correctly, i just need to include ths js on all pages where i need to show 2 diff versions/2 css (desktop.css/ipad.css) AND also add the code for var ADAPT_CONFIG = {... }So if that can show 2 diff versions @ diff screen sizes even on ie8, do i not need the Respond.js ...Please confirm.. – copenndthagen Oct 15 '11 at 17:39
  • Also can i substitute adapt.js for the complete media query statements..e.g. If i have 3 CSS files to be applied on the same html @ diff screen sizes, even if the browser understands media queries like say FF4 or Safari 5 , it would also work seamlessly with adapt.js...I did not quite get the callback function use in adapt.js.. – copenndthagen Oct 15 '11 at 17:46
  • You should give the doc a [look](http://sonspring.com/journal/adapt-js-explained#how-to-use) it's pretty simple. You should offcourse include the script everywhere with the bare minimum ADAPT_CONFIG. The best way to use it is to use conditional statement to only load the script for IE version lower than 9. Then you can still use media queries for the more modern browsers. About the fallback, it's optional and what it does is execute the referenced javascript function after adapt.js has done his work. Try to put this statemeent: `function() {alert('Adapt Loaded');}` has the fallback. Enjoy ;) – Jonathan Liuti Oct 17 '11 at 19:29
  • I thought overnight that it was 100% better to test for mediaqueries with modernizr instead of using conditional comments to detect if you have to use adapt.js or not. Go with modernizr to test for mediaqueries browser capability ! – Jonathan Liuti Oct 18 '11 at 05:40
  • modernizr adds support for html5 elements like article, section etc., too. – aaandre Jul 08 '13 at 19:08
  • It's indeed the case now, but it was not at the time of writing (october 2011) ;) – Jonathan Liuti Jul 10 '13 at 10:00
3

Modernizr does not add functionality to the browser; it merely detects whether the browser supports certain functionality, and therefore allows your site to determine whether it needs to use a polyfill hack for that feature.

Therefore you would use Modernizr to find out whether you need to use Respond.js or not.

The Modernizr web site does include a page which lists all the polyfill hacks that they know of, so if you're not happy with Respond.js, you could try looking here to see what alternatives are available. Looking at the page, I see there are a few others listed in the "Media Queries" section, so you could try them.

However, I will say that Respond.js does seem to be the one script which is currently recommended for this kind of thing. I haven't tried the others listed, so I can't compare them, but I can say that Respond.js works the way it does for a good reason.

The reason that Respond.js has these complex cross-domain issues is that the only way for it to work with browsers that don't understand media queries is to load the whole stylesheet again and process it using Javascript. But the browser's security model doesn't like you doing that sort of thing with remotely loaded scripts.

As I say, I haven't worked with any of the alternative scripts, but my guess is that they'd suffer from similar issues, due to the way they'd need to work in order to get media queries working on a browser that doesn't support them.

The easiest way to deal with this is simply to put the respond.js script into the same domain as the rest of your site rather than loading it from a separate domain. This completely bypasses any need to deal with the CDN issue at all.

Hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
-7

Media queries are not supported in internet explorer 8. Also with modernizr, this is not going to work. Modernizr does not add functionality to the browser. And why you want add media queries in ie8? Media queries are make for mobile websites. Media queries are not make for desktop browsers.

Mike Vierwind
  • 6,889
  • 3
  • 15
  • 9
  • 3
    -1 this is not true at all. not everyone browses on a huge monitor. media queries are so that you can have a responsive layout for people who may be on different-sized monitors IN ADDITION to mobile – Jason Oct 18 '11 at 16:58
  • If you're writing your CSS for mobile first before desktop (e.g. stuffandnonsense.co.uk/projects/320andup/) then you would want IE6-8 to still be able to see the desktop styles so it would need to be able to understand CSS media queries – BeesonBison Jul 02 '12 at 15:36
  • Some CSS frameworks use mobile-first approach and require media queries to display content in a layout different from the default mobile view. – aaandre Jul 08 '13 at 21:06