Fancy websites – and Internet Explorer 8

During the last days I helped at a web project. Everything fine, we made quite good progress. The only thing that costed some time was that we needed to support Internet Explorer 8. The problem in this case was, that IE 8 has no support for media queries. We used Twitter Bootstrap components, CSS and especially the grid system for responsive layout. So the first IE 8 test was really annoying. The site looked so bad and wasn’t usable at all. The Bootstrap docs said, that they support IE8 but with one caveat: we needed to use a third party library for this. The third party library is respond.js. Ok, if this is the only requirement, great.
Library included, openend the site, no result (looked the same as before). After a few hours of research I found the source:

All stylesheets need to be included first. Then include respond.js.

<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/styles.css"></link>
<!--[if lt IE 9]>
<script src="javascripts/respond.min.js"></script>
<![endif]-->

Note:

  • respond.js doesn’t support @import in stylesheets. So this means, if you only include Bootstrap with an @import, this will not work.
  • Also, if you’re hosting your CSS on a CDN or subdomain, you must take care of cross domain policies.