Will targeting IE8 with conditional comments work?

Question

When IE8 is released, will the following code work to add a conditional stylesheet?

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

I've read conflicting reports as to whether this works with the beta. I'm hoping someone can share their experience. Thanks.

Answer 1

It seems to in the Beta

Answer 2

It worked for me – both in quirks mode and in standards compliance mode. However, it does not work when switching to IE8 compatibility mode.

Answer 3

One thing to note:

It does work, BUT if you are loading the page/site local network (e.g. Intranet) it will load in IE7 mode by default! (update - localhost[*] is a special case, that does render in standards mode)

This goes against MSFT's original statement of going STANDARDS by default.

e.g.

http://127.0.0.1/mysite/mypage.php  <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php  <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php  <-- IE7 by default
http://192.168.100.x/mysite/mypage.php  <-- IE7 by default
http://google.com/  <-- IE8 by default

[*] - Scott Dickens [MSFT] noted in a comment here on the IE Blog that localhost was a special scenario in the Intranet (often used to develop Internet sites) thus would render in Standards mode by default.

To test what mode a page in IE8 is really rendering in, you can use check the developer tools or use this bookmarklet code (only works in IE8):

javascript:
var vMode=document.documentMode;
var rMode='IE5 Quirks Mode';
if(vMode==8){
  rMode='IE8 Standards Mode';
} else if(vMode==7){
  rMode='IE7 Strict Mode';
}
alert('Rendering in: '+rMode);

Answer 4

Tools/Compatability view settings

uncheck them all

Answer 5

It appears that the new IE8 (when in IE8 standards mode) will not work correctly when you have both inline and linked style sheets...if you're in quirks or ie7 mode its fine, but the moment you switch to IE8 standards mode (for both broser and docMode) your linked styles are gone!

test example --- http://mtroadwines.com/ie8test.htm

Any confirmation or info would be a big help!

Answer 6

Hi All,

Thank you for your help. I've discovered the solution, apparently the problem was having each style sheet use its own title attribute. Once I took the title off all but the main style sheet, no prob.

This is a weird issue unique to IE8 - and although I've been told its supposed to work that way, something to do with "Stylesheet Preference" - it only serves to create problems since the solution requires you remove the title which could be helpful when scripting, etc - when you need to call the style sheet.

In any case, not sure if this is a bug, or its supposed to be that way, but I hope Microsoft investigates further.

Thanks

Answer 7

Why even bother writing a separate stylesheet for IE8?

If you've already debugged for IE7, you can force IE8 into compatibility mode, and thus display your code as though IE8 were IE7.

All you gotta do is put this RIGHT BELOW the opening head tag. Anywhere else and it won't work.

And then that's a half hour or so less work on average per project, no intense debugging for IE8 needed!

Even Msn.com does this - kind of ironic, eh?

Wrote a blog post about it recently: http://blog.sankhomallik.com/2009/11/16/stop-wasting-time-debugging-on-ie8-when-you-dont-have-to-or-get-ie8-to-behave-like-ie7/

Answer 8

IE8 renders pretty nice compared to IE7, I have stylesheets for IE6, IE7 and IE8; at first i thought conditional comments were not working for IE8 after a bit of experimentation i found some rules were not beeing applied by IE8 just because i needed to put the ancestor or parent class first, e.g. i had a class like

.niceclass {some:properties;more:properties;}

it worked only if i changed it for something like:

.parentclass .niceclass {some:properties;more:properties;} or

#parentselector .niceclass {some:properties;more:properties;}

btw in my IE8-only css i have only one overriding rule, the rest is rendered almost like firefox, though thats not making me leave FF anyway!.

Answer 9

For my part I wanted to use rounded borders using css. IE8 on Vista does not support such. And since the graphics were so that the rounded borders would show a nice rounded shadow as well, the page looked terrible in IE8.

I tried using conditional comments, but to no avail, IE8 would not evaluate the if IE expression and thus would not include the external stylesheet.

Then I had a look at putting it into quirks / compatiblity mode, however, this still did not work as the CSS hacks I had used did no longer work for the IE8.

Last but least I found a working CSS hack that will render the page correctly when in compatibility mode.

* + html #test[id] { color:lime } 

Now, I do not know if this works for IE7 or below, so you would have at least three different hacks for each IE release you want to support, e.e.

* + html #test,
    html+body #test,
    * html body #test
    { color:lime }

I wonder what the next regression of the Internet Exploiter will behold for us.