Support IE8 using media queries

I can already hear the forlorn cries of web evangelists: Drop support for IE8, if we all drop support then it will die a faster death.

I couldn’t agree more, in fact I would happily drop by IE8’s funeral and check for myself it was finally gone forever (I think it would be a busy affair).

That being said I really do understand the need to bin it, and what the ramifications are if we continue to support it.

To elaborate on that last point IE itself dropped support for Windows XP during early 2014, IE8 got shipped with XP, it’s updates are bound to the operating system updates. On Jan 2016 there will be no more security updates for IE8, and at that point it is basically dead and gone. Therefore, why the hell would I support a legacy browser if even the vendor is giving it the chop?

Because supporting it = £££’s for some businesses

What’s that they say about money being the root of all evil…?

I currently provide my services to a well known internet retailer who have a demographic which, are not too snappy when it comes to updating browsers. They need support, if we dropped support the business would suffer it’s that simple.

The HTML5 Bootstrap approach

Normally I follow the HTML5 Bootstrap approach of adding conditional classes for different versions of IE to the HTML element:

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

You add this in the <head> of any HTML file you publish to enable isolation of old browsers such as IE8. It’s great that we can use this and not use hacks, which I used to do several years ago, in a previous life (we’ve all been there).

It’s great for something like this:

.box {
 left: 50%;
 top: 50%;
 transform: translate(-50%,-50%);
}

As you can override the top & left properties (in this example) by prepending the class:

.lt-ie9

To your existing class:

.box

So you end up with this:

/* Override left and top in IE8 so that your layout doesn't break */
.lt-ie9 .box {
 left: inherit;
 top: inherit;
}

Note that IE8 does not support transform therefore we only need to override the left and top properties to progressively enhance.

While this method works we’re only fixing problems for IE8

I’m happy to use the HTML5 Bootstrap method, but there is something wrong with it, it just focuses on specific browsers, not the lack of support in any given browser.

If the only legacy IE version you have to tolerate is IE8 then you’re pretty lucky, I remember having to support IE6 (others will go back even further I’m sure).

The majority of CSS I write works fine in IE8, so life isn’t that bad. Ultimately because IE8 supports box-sizing most of your problems should be minimal. To be able to degrade your responsive, high-end website into a fixed width version suited to IE8 really should only be a matter of taking your existing styles, for the desktop width view, out of whatever media queries they reside in, and making the container a fixed width.

Building your layout with media queries

Now this may not be the perfect solution, I don’t think there ever is one, but you could consider this when you build your layouts. Create your base styles (showing sympathy to browsers that don’t support media queries, namely IE8) which restrict the width from being fluid e.g.

.main-wrapper {
 width: 1200px;
 margin: auto;
}

And then override those styles using a media query, media queries are not supported in IE8 therefore anything you attribute to the media query will be negated:

@media screen and (min-width: 768px) {
 .main-wrapper {
  max-width: 1200px;
  width: inherit;
 }
}
@media screen and (max-width: 768px) {
 .main-wrapper {
  width: 100%;
 }
}

And in the earlier case above where we used transform as the example it would be something like this:

.box {
 width: 600px;
 position: relative;
 left: inherit;
 top: inherit;
 margin: auto;
}
@media screen and (min-width: 768px) {
 .box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
 }
}
To conclude

Producing a responsive layout and supporting it in IE8 is bad idea – why I hear you ask? Because media queries are NOT supported, and using the polyfill respond.js is just pointless; as who the fuck is going to be using a device that has IE8 installed on it??? Ok it too could save you the time you want to save, but why take the risk?

My method allows you to escape adding extra time to your already burgeoning workloads.

That’s pretty much it, very simple. It makes me feel better about not ‘sniffing’ out IE8 by using an unsupported, purely CSS feature to negate it from all the new CSS it doesn’t support, which will most certainly mess up your layout – and ultimately waste your time.

About Morgan

Morgan is a web designer and front-end developer, who's speciality is producing websites built with the successful open source platforms: Wordpress & Magento. With a firm belief in offering a high level of customer service, combined with technical expertise and creativity, Morgan really does believe he can offer what most agencies would charge an arm and a leg for, at a fraction of the cost. When he's not trawling the internet for the latest design trends and SEO techniques you can find Morgan in his kitchen doing an impression of Keith Floyd. My Google Profile+
This entry was posted in Legacy Issues. Bookmark the permalink.

2 Comments on "Support IE8 using media queries"

Say something

website design
  • wordpress design

    This was made with:

    • Website design - Illustrator
    • Image output - Photoshop
    • Wordpress front-end development
    • Wordpress CMS
    • On-page SEO
    Learn more
  • website design

    This was made with:

    • Website design - Illustrator
    • Image output - Photoshop
    • Custom HTML + CSS
    • jQuery
    Learn more