Wednesday, June 16, 2010

Detecting and Correcting IE8 in COMPATIBILITY MODE

This was a fascinating find today.

I have been upgrading an older site with some new HTML5 functionality. Not super-bleeding edge HTML5, but things that are common between Safari, Firefox, and IE8, oh yeah, and Opera.

Doing some server-side detecting on the users 'User-Agent' string we can check their browser version and block the site if they are not using a compatible browser. This debated practice will not be discussed here. Lets move on.

So, regarding this terrible monster Internet Explorer which appears to be heading in a good direction in version 8 and even better in the upcoming version 9, we get the user agent strings for the following browser versions 7 and 8:

IE7: "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)"
IE8: "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)"

But wait, if IE8 is set to be in "Compatibility Mode" we get this:

IE8: "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0)"

See that? We have the IE layout engine named "Trident" appearing but we are given the browser version 7.0. That's the give-away that the user has IE8 but is set viewing in "Compatibility Mode".

(More info on this Trident engine can be found here: http://en.wikipedia.org/wiki/Trident_%28layout_engine%29. It appears this has been the layout engine for IE since the beginning, but it has never been exposed in the User Agent string until IE Version 8.)

But many users who have IE8 have [accidentally?] set their browsers to be stuck in "Compatibility Mode". This makes an HTML5 site render as if it were in IE7.

This is terrible! The user has the browser we want them to have but have marked a setting that unless they change they will not get the user experience we want them to have.

But wait, then we learn from the Microsoft Website that we can overcome this end-user setting and force IE8 to render NOT in compatibility mode but properly in IE8 mode. http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx about half way down under "Understanding Content Attribute Values" we are given this:

<meta http-equiv="X-UA-Compatible" content="IE=100" />

Now we have IE8 with compatibility mode ON and yet it views our content properly, over-riding the user setting. This only affects IE browsers.

That's fantastic! Now we can detect for IE version 8 or greater,  OR  IE Version 7 with Trident version 4 or greater. We can use this meta tag and we don't have to block the site or ask the user to change a browser setting.

The strange thing is, I had the IE8 compatibility "button" visible by the browser address bar, and when I add this meta tag the button disappears completely preventing me from toggling compatibility mode ON/OFF.  Good for viewing the site properly, but strange that a meta tag changes the menu mar arrangement on my computer. Oh. Microsoft...

And that's a wrap.