Writing User-Agent specific CSS

Asked by Andrew a freelance designer from Chicago

How come when i have the “if IE” link to the css, it doesn’t change at all?
It’s linked correctly and the “if IE” is correct, but the css just isn’t showing.
I think cause the link to the regular css is over-riding the “if IE” one. Why won’t it work?

Right off the top of my head.
If you are using multiple versions of Internet Explorer on the same machine you will experience issues with version targeting like “If IE”.So if you are using a Standalone IE6 or Standalone IE7, refer to the manufacturers of the standalones for workarounds.

Conditional comments and version targeting

Conditional comments only work in Internet Explorer, and are used to target specific versions. They use the HTML Comment structure, and thus are placed in the HTML not the CSS.

Example

<!–[if IE 6]>
<link href=”../ie6.css” rel=”stylesheet” ………. />
<![endif]–>

This makes them perfect for linking to alternate IE only stylesheets, which for example, wouldn’t use 24-bit PNG transparency etc.

Troubleshooting

This script comes off the very handy Quirksmode.org website. It will run through the different versions available to show you what your browser is behaving as.

From: http://www.quirksmode.org/css/condcom.html

<p><!–[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]–>
<!–[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]–>
<!–[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]–>
<!–[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]–>
<!–[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />
<![endif]–>
<!–[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]–>
<!–[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]–>
<!–[if lt IE 6]>
According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]–>
<!–[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]–>
<!–[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />
<![endif]–>
</p>

Its always preferable to avoid using conditional targeting and try to work within the css to support the major browsers, but unfortunately the real world sometimes calls for harsher measures.

For the adventurous, try the conditional comments and mix them with progressive enhancement.