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 :P

*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

Be Sociable, Share!

    Commentaires

    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 jkneb Cancel reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>