Separate css for IE

[DamianS]

I've finally had a gutful of peppering my css with conditional comments just because IE does things differently.
As I see it, the only way to have a clean-looking css file is to give IE its own css, while the other standards-friendly browsers get the normal one.
But will one css be acceptable for all IE versions?
Will I need separate css files for 5.0, 5.5/6, and 7.0?

I'm thinking that most of the rendering bugs in IE7 have been fixed so it doesnt need one?

Here is what I am trying:
<link rel='stylesheet' type='text/css' href='/include/css/portal.css' title='main' />
<!--[if gte IE 5]>
<!--[if lte IE 6]>
<link rel='stylesheet' type='text/css' href='/include/css/ieportal.css' title='main' />
<![endif]-->
<![endif]-->

[edited by: DamianS at 5:43 am (utc) on May 20, 2007]

[DanA]

<!--[if gte IE 5]> is useless as conditional comments were not implemented in IE 4.
One stylesheet for Internet Explorer with the fixes may or may not be enough.
IE 7 may have some rendering bugs due to hasLayout but a stylesheet to fix them shouldn't be necessary.

[edited by: DanA at 6:46 am (utc) on May 20, 2007]

[DamianS]

The gte stands for 'greater than or equal'.
So I was trying to load the css if the IE version was >=5 and <= 6.
I've just discovered it won't work, since conditionals cannot be nested :(

So it would need to be something like:
<link rel='stylesheet' type='text/css' href='/include/css/portal.css' title='main' />
<!--[if IE 5]>
<link rel='stylesheet' type='text/css' href='/include/css/ie5portal.css' title='main' />
<![endif]-->
<!--[if IE 6]>
<link rel='stylesheet' type='text/css' href='/include/css/ie6portal.css' title='main' />
<![endif]-->

Yes, I'm leery about IE7 since it seems to fix most but probably not all rendering bugs. And I still have to worry about the 'hasLayout' property.
Unfortunately, I don't yet have IE7 to test it.

[DanA]

What about IE 5.5?
Are you sure you need to have a stylesheet for each version?
Most hacks and conditional comments can be avoided.

[DamianS]

According to the msdn page I accessed,
<!--[if IE 5]>
means if IE 5.xx, so it will do for 5.5 also.
And yeah, I'm going to try to get away with just one css for the IE 5.x/6

[SuzyUK]

You might possibly want to set up 2, one for IE7 upwards and another for IE5/6. Setting up one for IE5/6 is easy

<!--[if lt IE 7]>

as stated previously IE4 doesn't read conditionals so this would only target 5.x/6

then you can have another for IE7

<!--[if gte IE 7]> or <!--[if IE 7]>

But IE7 does still have some crossover with IE6 re hasLayout and also it has some new stuff. So you can, if you're willing to use back compatible filters, cope with the whole lot in one conditional (until we see what IE8 might bring..)
e.g.

<!--[if lte IE 7]>
<style type="text/css" media="screen">
div {
_width: 100%; /* only ie5/6 will read this */
float: left; /* all IE's will read this */
}
</style>
<![endif]-->

inside the one sheet you can differentiate between 5/6 and 7 using the underscore hack, IE7 has fixed this parse error so will ignore the rule. So for example if you only need 5/6 to see a hasLayout fix use the underscore, but if you find it's one of those fixes that IE7 still needs to see as well, don't use an underscore.

In reverse if there's a rule that you only want IE7 to see, though I can't think of a specific example where this is the case yet, declare the rules in reverse

div {
width: 100%; /* all IE's will read - IE7's width */
_width: auto; /* overrule for IE5/6 width */
}

I'm generally not in favor of using parse hacks but because a Conditional Comment is an indicator of IE workarounds, in the first place, using a back compat hack in it along with comments as to why doesn't make much difference to me than having 2/3 CondComs.

[edited by: SuzyUK at 8:55 am (utc) on May 21, 2007]

[vincevincevince]

What about the hack involving prefixing with a *? Can that be used to avoid conditional comments?

[SuzyUK]

Yes VVV it can, it targets all of IE including 7 - but that's where the danger of using "forward/currently" compatible hacks in the main stylesheet can get tricky which is what going to conditionals now helps avoid.
e.g. were you to use the * prefix and then IE8 fixes it but IE8 still needs the workarounds (or vice versa IE8 still reads the * prefix but doesn't need the workaround) you will likely have to go to conditionals then, so it's a choice of what you're comfortable with?

The general advice, when using hacks is where possible to only use backward compatible hacks, ones which have already been fixed and are only required for back browser versions, their situation cannot change so they can be put there and "forgotten"

Suzy

[SuzyUK]

btw after further checking.. after my first post about using the underscore in reverse to reset for IE5/6 -
I had a thought about whether it would be possible to only reset hasLayout to false for IE5/6 after setting it to true for ALL IE's - According to MS documentation, once an element has "layout" set to true it cannot be unset

So I thought that perhaps this wouldn't work.. but it does

div {
/* to test if hasLayout can only be triggered for IE7 in single conditional sheet */
zoom: 1;
_zoom: normal; /* yes this works to reset hasLayout to false for IE5/6 */
}

<div><p>this div has, hasLayout=false (0) in IE5.5/6 and hasLayout=true (-1) in IE7</p>
<button onclick="alert(normal.currentStyle.hasLayout)">hasLayout is?</button>
</div>

again I can't think of a specific case where this might be needed but thought it would be useful to know it can be done in the single IE CSS.