Compatibility mode and Targeting IE with valid CSS selectors

I caught a link to Microsoft breaks IE8 interoperability promise an article written by Opera’s CTO, Hakon Lie.

Daniel Klima’s comment caught my eye, so I thought I might respond here in addition to writing a comment over here. At the time of this post, my comment hasn’t yet been approved by moderators of theregister.co.uk

And it is needed as hell,since soem [sic] servers will send IE7 CSS to IE8,which causes IE8 to render page incorrectly.Daniel Klima

9 times out of 10 i have no need in my projects for IE conditional comments. Outside of the additional HTTP request loading an additional file brings, why add ANY browser specific code to a document? If you’re using IE CSS filters, then sure, use conditional comments and don’t break your validation, but unless you’re forced in some way to use some old proprietary-to-IE scripting or styles, there’s no point.

A star shines less brightly

That star (*) that we’ve relied to heavily upon to override ones own css with additional rules aimed at forcing weak and non-standards-compliant browsers to render content in a way that satisfies the ego’s of creative directors everywhere isn’t totally burnt out, but it’s on it’s way to becoming history.

I put together a little test to see what rules IE8b2 renders and ignores using selectors that won’t invalidate you CSS. You can view the remarkably simple test here: ie8csstest

What this means

• If you are currently targeting IE6 with the * html hack, it won’t break your site if you run it in IE8.
• If you are currently targeting IE7 with the *:first-child+html hack, it won’t break a site in IE8 either.

Neither rule break css validation, IE8b2 in standards mode ignores both rules (but renders IE7’s rule in compatibility mode), everyone is happy, and “servers don’t send the wrong CSS to the browser”.

So what’s up with this broken looking button/icon?

Compatibility and Standards modes can be toggled with a small button that appears to the right of the location bar. If you are viewing a file locally using file:// the button is missing, so I have no idea what mode local files are rendered with. For local testing, a locally running server is required such as xampp or something similar.

Standards mode is default

This is the compatibility modes button. Though it’s not remarkably clear as to what it is, or what state it represents, when it is in it’s “not selected” state, it means the browser rendering pages in Standards mode.

Compatibility mode

When the button appears to be depressed, the browser is rendering pages in Compatibility mode. Which due to my test’s results, is the equivalent of IE7 mode.