How to target old versions of Internet Explorer in our CSS in 2013

This is how I like to do in my projects, it may be or may be not the best solution but it works just fine for me, hope you’ll find it useful.

I find myself following these 2 rules :
* Is there a better approach in order to avoid specific ie version targeting?
* If ie specific styles are required, how can I avoid code scattering at all cost?

How to target ie6

Do you feel this sweet sensation of freedom…

How to target ie7

I use the _ safe css hack

.bob {
    margin-top:10px; /* all browsers */
    _margin-top:8px; /* ie7 only */
}

How to target ie8-

There’s a twisted use out there of the :not selector, it’s not supported by ie8- so the goal here is to FIRST define some minimum styles (at the end they’ll be for ie8 and ie7 only). Then put all your fancy css3 styles INSIDE this elem:not(#whateverDumbNameYouLike) { } because they’ll be applied on every browser EXCEPT ie8 and ie7 πŸ™‚ Nice trick.

.bob {
    margin-top:8px; /* all browsers but at the end it's only for ie8-7 */
}
.bob:not(#foo) {
    margin-top:10px; /* all browsers EXCEPT ie8-7 */
}

How to target ie9

Well I currently never had to deal with ie9 specific styles… Twitter Bootstrap uses the 9 hack, does it mean it’s safe for you to use in your projects? Don’t know πŸ™‚ ie9 is quite robust so it’s easier to find better approaches.

Feature detection

If nothing of these solved my problem I usually give a chance to feature detection in javascript with Modernizr. Sometimes a simple if (Modernizr.backgroundsize) is easier and faster than struggling with this stupid css rules πŸ˜›

*cough cough*… and what then?

If I’m steel stuck?… Oh well I guess at this point the situation is already an epic fail so just sniffing the user agent with javascript would be “ok” … yes shame on me.


Other techniques

Paul Irish’s conditional html classes is so damn cool but using it on the <html> tag could be tricky, consider reading this and this carefully before using it in production. I found myself sometimes using this technique on the body tag but again it’s a bit risky, third party scripts/frameworks usually use the body tag to inject attributes and I just don’t know if it’s going to collide or not. So at the end I usually give up with this one. Sorry Paul, if one day you read this πŸ™‚ and here’s a simplified version of the H5BP official one:

<!doctype html>
<!--[if IE 7]>         <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]>         <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
...

Then you use it like this in your css:

.bob { margin-top:10px; }
.ie8 .bob { margin-top:8px; }
.ie7 .bob { margin-top:12px; }

Conditional stylesheets loading from the <head>

The good old way from the head works just fine but the point here is to avoid isolated pieces of css scattered in multiple files. So I usually never use it. Here’s how to do it:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="all.css">
    <!--[if IE 7]><link rel="stylesheet" href="ie7.css"><![endif]-->
    <!--[if IE 8]><link rel="stylesheet" href="ie8.css"><![endif]-->
</head>
...

Resources

3 thoughts on “How to target old versions of Internet Explorer in our CSS in 2013

  1. Awesome!! I’ve spent a lot of time today trying to get something that would just target IE8. The :not approach works very well. In fact it’s the only thing I could get to work. = a huuuuuuuuge relief. Cheers!!

    Grant

  2. Dude, you’re showing the IE6 underscore hack and suggesting usage for IE7.
    I think this is what you meant:

    .bob {
      margin-top:10px; /* all browsers */
      _margin-top:8px; /* ie6 only */
      *margin-top:8px; /* ie6 & ie7 only */
    }

Leave a Reply to Anonymous Cancel reply