Targeting IE8 With CSS

June 5, 2014

If you’re a front-end developer, and the project you work on needs to support users on Internet Explorer 8, odds are that you’ve run into situations where you need a bit of CSS that should only be triggered by those users.

Current Options

The most common thing to do in this situation is to create and serve IE only stylesheets. In your HTML, you’ll call a separate stylesheet like this:

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Drawbacks

Honestly this works really well. The only issue is that you’re serving an extra file, an extra HTTP request to the user and it can affect performance. That and it’s just another file to deal with.

The next most common option is to use selectors that target a specific browser. If you wanted to target IE8, you could write something like these:

/* IE6, IE7, IE8 */
#diecinueve { color: blue9; }
 
/* IE7, IE8 */
#veinte { color/***/: blue9; }

Drawbacks

This also works well, my only real problem with this technique is that your IE8 specific code ends up all over the place, it’s also a bit confusing because you’ll use the same selector multiple times in a row ( one for other browsers, one for IE8, etc ). Also, it’s really difficult to tell what’s going on ( I’ve had many people complain about glitches in my CSS! ).

A New Solution

I’ve come up with a new way of dealing with this while sticking to only one file. It plays off IE8 not having support for media queries.

The Idea

The basic idea here is you write your IE8 and below code in your style.css and then wrap all of your modern browser code in a media query which will be ignored by older browsers. Something like this:

/* Hide button in IE8 */
.button {
    display: none;
}

/* Change link color in IE8 */
a {
    color: pink;
}

/*
 * Now, the modern browser code
 *
 */
@media all and (min-width: 1px) {
    .button {
        display: inline;
    }

    a {
        color: blue;
    }

    /* The rest of your CSS goes here */
}

What do you all think? Is this something you’d use in a production environment?