This is my old pattern:
<!DOCTYPE html>
<html lang="en-US">
<title>Internet Exploder</title>
<link rel="stylesheet" href="/_assets/styles/styles.css" />
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="stylesheet" href="/_assets/styles/ie6.css" />
<![endif]>
<![if IE 7]>
<link rel="stylesheet" href="/_assets/styles/ie7.css" />
<![endif]>
<![if gt IE 7]>
<link rel="stylesheet" href="/_assets/styles/ie8.css" />
<![endif]>
<![endif]-->
</head>
<body id="home">
Simple. It serves a new style sheet to various versions of IE as needed. The bad thing is the extra HTTP request added onto the Microsoft browsers. I’m not even there yet, but during one of my interviews for the new gig an alternative was suggested- using conditional comments to append a different class to the html element and letting the cascade sort it out.
I liked that idea.
Thinking about it a little bit, I came up with two issues with that technique.
- If you’re forced to use CSS Filters, the html element technique will not hide the offending CSS properties from good browsers. If you hate seeing errors and warnings and/or want your code to validate, then this technique fails.
For me that’s mostly going to be an issue with IE6 and PNGs.
Which leads me into the next potential problem.
- Occasionally, IE6 can require an enormous amount of extra code. Serving that to everyone bothers me.
Yes, I like to worry about milliseconds.
With those things in mind, I’ve decided to go with something like this. It solves both of my concerns*
<!DOCTYPE html>
<!--[if gte IE 7]>
<![if IE 7]>
<html lang="en" class="ie7">
<![endif]>
<![if gt IE 7]>
<html lang="en" class="ie8">
<![endif]>
<![endif]-->
<!--[if !IE]> <-->
<html lang="en">
<!--> <![endif]-->
<title>Internet Exploder</title>
<link rel="stylesheet" href="/_assets/styles/styles.css" />
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="stylesheet" href="/_assets/styles/ie6.css" />
<![endif]>
<![endif]-->
</head>
<body id="home">
It does the neat solution for the easier-to-deal-with IE7 and IE8 cases and then falls back to serving a new sheet for IE6.
And no, I’m not going to lose sleep over an extra HTTP request for IE6. The web experience in that browser is so bad it’s not worth stressing over an optimization like that, especially since I’m desperate to just be done with supporting the beast.
*Most of the time- if I need to use the Opacity filter, this pattern goes out the window.