Responding to Legacy Internet Explorer

Updated: October 5th 2012Published: July 30th 2012by Orde Saunders

Internet Explorer 9 is the first version to support the device media queries that are a feature of responsive design. Whilst we could settle for letting them adopt the baseline linear presentation there are times when this isn't acceptable. This technique uses a CSS pre-processor (such as LESS or SASS) to provide an Internet Explorer specific stylesheet that adopts the layout of one of your wide-screen media queries.

Setup

For this technique you will need to be using a CSS pre-processor as it relies on using the same code in different places, whilst you could maintain this manually it would violate DRY.

The site should be contained within a some form of wrapper <div> as this will be used to set a fixed width for the Internet Explorer version of the site. In this example this will have a class of wrapper.

For fine tuning the layout for different versions of Internet Explorer you will also probably want to be using conditional <html> tag.

<!--[if lt IE 7 ]> <html leang="en" class="oldie"> <![endif]-->
<!--[if IE 7 ]>    <html leang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if (gt IE 8)|!(IE)]><!--><html lang="en"><!--<![endif]-->

Build your responsive CSS

Build your CSS using media queries in the same way you normally would for responsive design but put the contents of each media query into a separate include file. For example, using LESS syntax:

core.less

.main {
  margin:1em 5%;
  width:100%;
}
@media screen and (min-width:25em) {
  @import 25em.less;
}
@media screen and (min-width:50em) {
  @import 50em.less;
}

25em.less

.main {
  float:left;
  width:75%;
}

50em.less

.main {
  width:66%;
}

Compile your core.less file into your core.css file and include it as you would normally.

Build your Internet Explorer CSS

The bulk of this work has been done in building the responsive sections, you now need to bring it together in a single style sheet for Internet Explorer.

The important step here is that you will need to set a fixed width for your wrapper element to pin the container out to a width equivalent to the widest media query you are using. This is similar to building a fixed width site but the containers using the fluid grid will no longer get the opportunity to re-flow.

ie.less

@import 25em.less;
@import 50em.less;
.wrapper {
  width:960px;
}

This will compile into the following:

ie.css

.main {
  float:left;
  width:75%;
}
.main {
  width:66%;
}
.wrapper {
  width:960px;
}

There is some duplication here but the cascade part of CSS will cause the correct values to be applied. This duplication is less than ideal but the alternative is maintaining several files by hand which I feel is considerably worse.

Bringing it all together

You now need to include the ie.css in your pages with a conditional comment:

<head>
  <link rel="stylesheet" href="/css/core.css"/>
  <!--[if lte IE 8 & gte IE 7 & !IEMobile]><link rel="stylesheet" href="/css/ie.css"/><![endif]-->
</head>

In this example it is only being included for Internet Explorer 7 and Internet Explorer 8 - older versions of Internet Explorer will get the baseline presentation designed for browsers without media queries as outlined in my article on progressively enhancing CSS.

Visitors on older versions of Internet Explorer that do not support media queries will now see a fixed width presentation of your site that is equivalent to that seen by modern browsers with a wide viewport.