Skip to content

Instantly share code, notes, and snippets.

@hannesl

hannesl/gist:2778202

Created May 23, 2012 22:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save hannesl/2778202 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save hannesl/2778202 to your computer and use it in GitHub Desktop.
Download ZIP
A method for including respond.js for IE < 9 only, and complex media queries for everyone else.
Raw
gistfile1.html
<!-- Include complex media queries for all browsers except IE < 9.
See bottom of http://www.quirksmode.org/css/condcom.html for info about
the comment tag. Using document.write() to aviod invalid markup. -->
<script>
document.write('<comment><link rel="stylesheet" href="/path/to/complex-media-queries.css" media="all" /></comment>');
</script>
<!-- Only include respond.js for IE < 9. -->
<!--[if lt IE 9]>
<script src="/path/to/respond.min.js?v=v1.1.0"></script>
<![endif]-->
@hannesl
Copy link
Author

hannesl commented May 23, 2012

Use the above in the html head to cleanly separate the media query related code that is needed by IE < 9 and everyone else. Details:

  • respond.js – Makes IE < 9 read media queries, but only simple ones like "max-width".
  • complex-media-queries.css – Should contain all the other media queries, such as "min-device-pixel-ratio" for retina displays.

Only including respond.js when it's actually needed is good for avoiding a performance hit in other browsers.

With "complex-media-queries.css", you might think that you could just put any media queries in your normal css and IE < 9 (respond.js) would just ignore the ones that it doesn't understand. However, I've found that at least sometimes it does ignore the media queries, but applies their contained styling to all contexts, with unwanted results.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment