Less-fussy IE Conditionals

Before: A seperate stylesheet for each version of IE.

<link href="main.css" media="all" type="text/css" rel="stylesheet" />

<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="ie5-6.css" />
<![endif]-->

<!--[if IE 7]>
   <link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

• Inflexible
• Harder to manage
• A pain in the tookus!

Simplify things with special containing elements

<!--[if IE 6]><div class="ie ie6"><![endif]-->
<!--[if IE 7]><div class="ie ie7"><![endif]-->
<!--[if IE 8]><div class="ie ie8"><![endif]-->

...the rest of your content...
			
<!--[if IE 6]</div><![endif]-->
<!--[if IE 7]</div><![endif]-->
<!--[if IE 8]</div><![endif]-->

Override IE styles by using specific class in one stylesheet.

#footer { width: 200px; }
.ie6 #footer { width: 190px; }

Or target all versions of IE in one fell swoop

.ie p { color: pink; }

Source: Newsweek source code