Conditional Stylesheets for IE

Posted by on May 14, 2010 in CSS | 1 comment

We all have dealt with IE issues and bugs but you don’t have to keep banging your head against the wall when you can fight with IE problems with conditional stylesheet. This way you can code hack-free and you don’t have to worry about how dangerous hacks will behave in future, you also get to keep your main stylesheet clean and valid.

You can also use conditional tags for loading JavaScript and HTML or any other content or message in IE.

Conditional tags structure is the same as an HTML comment (<!– –>) and all other browsers will see them as normal comments and will ignore them entirely but explorer Windows, has been programmed to recognize the special <!–[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content, bingo!

Note: since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. You’d have preferred to put the special styles in the CSS file, but that’s impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

How it works?

The code should go in the <head> section with all the other regular CSS <link> CSS files. Below are examples of different codes for different IE versions.

Everytthing except IE

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

Only IE 7

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

Only IE 6

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

Only IE 5

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

Only IE 5.5

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

Only IE 6 and lower

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

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

IE 7 and lower

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

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

IE 8 and lower

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

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

IE and higher

<!--[if gt IE 5.5]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

IE 7 and higher

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

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

IE 8 and higher

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

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

ALL versions of IE

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

One Response to “Conditional Stylesheets for IE”

  1. Tom says:
    May 14, 2010 at 2:16 pm

    Nice article, we dropped support for IE6 a year ago, I think other should do the same.

    reply
Add a Comment
one comment