Saturday, 21 March 2009

Detecting IE 8 Compatibility Modes with Javascript

Using Javascript to determine a users browser settings in IE 8

Microsoft's new version of Internet Explorer, IE 8 comes with two configuration settings that allow the user to control the rendering mode and the browser mode so that in fact IE 8 comes with 6 different settings that can drastically alter the behaviour of the browser. See this article about the different settings for an overview.

If you want to be able to determine client side what configuration mix is currently enabled for the browser you can use the following function I have written which will output a little object with the relevant details. Either use it by itself or incorporate it into a fuller browser detection object such as my browser object.

If you are running IE 8 you will see below the output from the function:


download the script here: IE 8 compatibility mode detection script

How to detect which settings the user has enabled in IE 8?

To determine the browser mode you can test the user-agent which will mention Trident/4.0 for IE 8, and IE 8 in compatibility mode. IE 8 running as IE 7 will not mention this so combining this with a check for document.documentMode which is only available in IE 8 will enable you tell if the user has IE 7 or is running IE 8 as IE 7.

To determine the document mode you can test the new property which is available in IE 8 document.documentMode which will return the rendering mode its currently set to e.g 8, 7 or 5 (for quirks mode). Combining this with a check for document.compatMode for previous IE versions lets us determine the rendering engine settings.

15 comments:

Anonymous said...

This is great Rob just what I need.

zachleat said...

Are you designing your software differently for IE8 in IE7 mode?

Seems like that should be taken care of by the original IE7 compatibility code.

R Reid said...

No I am not developing my code differently for those options. The JS code is an example of how you can tell the difference if you needed to. An example would be that some sites have a browser compatibility page that checks the users browser settings to make sure they will work in the best possible way with the site. I personally have been trying to make sure all my sites work in IE 8 browser & document mode. As one of the other articles I wrote explains there are a number of differences or possible bugs I have fixed. In fact I have not found that many issues with trying to do this which is good. I just wish that Microsoft took the opportunity when rewriting their JS engine to follow the standards or at least fix their many bugs (i.e event model) but then it wouldn't be Microsoft if they did that would it :)

zachleat said...

Sure, I'm just saying that IE7 emulation mode shouldn't be something that people have to worry about detecting.

michael said...

I'm not so sure this works in all cases. Running IE8 in "compatibility view" under Windows 7 the only difference I could see with the agent string was that it said 7.0 instead of 8.0.

Trident/4.0 was still in the agent string... Perhaps it is different running IE8 in Vista?

Any thoughts?

R Reid said...

Hi Michael
Yes thats the only difference with the user-agent and I did say this

"the user-agent which will mention Trident/4.0 for IE 8, and IE 8 in compatibility mode"

So IE 8 and 8 in compatmode will mention Trident in the useragent whereas IE 7 mode won't.

That is why I combine this check with tests for document.documentMode which will only be availble in IE 8. As this will help spot IE 8 running as IE 7 and IE 7 proper as IE 7 proper will not have this object available to test.

I have tested on Windows 7 in IE 8 compatmode. Are you are telling me that my test DIV is not outputting the following:

IE Version: IE 8
BrowserMode: CompatMode
DocMode: 8, 7 or 5 (depending on settings)

When running on Windows 7 in IE 8 with IE 8 compatmode?

mkamoski said...

IntrAnet sites on our LAN are automatically served in Compatibility View for all Ie8 installations. Furthermore, the Compatibility View button is hidden. Ug. Is there any quick and easy way to force the Compatibility View button to be shown at all times? Is there any quick and easy way to force the browser to never use Compatibility View?

R Reid said...

Well this is the default behaviour for IE 8 on Intranet sites see this article:

http://blog.strictly-software.com/2009/03/detecting-ie-8-compatibility-settings.html

I'm pretty sure you will be able to change the default behaviour somewhere in IE's settings for your browser but as I have stopped using this browser I have no clue where. Read that article for tips and also check out IEBlog for more info.

Anonymous said...

Actually determining if IE8 is in doc mode is necessary in some instances:

We use a LMS which is not certified to work with IE8 unless it is in compatability mode. We can barely get users to tell us which browser they are using so asking them the version and if it is in compatability mode is pointless (but necessary info for us to trouleshoot)

We can place a detector on the login page to warn them about their browser or browser settings incompatability.

This was the last piece we were missing. THANKS.

Anonymous said...

This is exactly what I was looking for. I didn't think I ever needed this until I discovered the numerous CSS and Javascript issues that crop up on IE8. I always kick the browser into compatibility mode, but I then realized that it still reads as IE8 if you are using conditional statements. If you are in IE8 and press the compatibility mode button then it will read as IE7 for conditionals. I can do a more full-proof detection using this. Thanks again!

Anonymous said...

Actually, I have the opposite problem, with compatiblity mode turned on. We have some features that have workarounds for iE7, but the workarounds cause problems when we are running ie8 or ie9 and the browser is pretending to be ie7. If the browser really is ie8 or or ie9, i don't want it running in compatiblity mode for our app.

R Reid said...

Well now that IE9 has been released unfortunately this bit of code will not work properly.

I have not as of yet found a way to detect if a user running IE9 (as in they have installed the new IE9 browser) is running in different browser modes (7, 8) on 32 bit machines.

I "may" have a way in 64 bit machines which seems to work but this relies on a useragent sniff for the BOIE9; string and I am not 100% sure this is accurate.

I am presuming BOIE9; means its IE9 but this doesn't seem to be present on the 32 bit windows 7 machines I have tested it on only on 64 bit machines.

Obviously people may say well if you choose IE 8/7 browser mode in IE9 then that is what the browser should become/behave as.

However some sites and some developers like these sort of tests and I have seen a few pages (including some on my own sites) that show the user a compatibility test report for the website where you would get a result like this for a WIN7 64bit IE9 browser in IE 7 browser mode and IE 8 document mode:

Browser: IE 9 (IE 7 Mode)
Document Mode: IE 8

However I cannot as yet work a way out of determining this without checking for the BOIE9; useragent sniff so it's not reliable and I won't update the code.

Anonymous said...

I've got the same problem. I need to be able to differentiate between IE7/IE8 and IE9 pretending to be IE7 or 8. There's a big Flash bug in IE9 regardless of whether it's running in 7, 8 or 9 and I need to be able to detect whether the user has IE9 regardless of what mode it's in.

Michael Tangen said...

You are my hero. Thanks for sharing this function. Because of you, I won't be forced to take a few cans of C4 to Internet Explorer. ;-)

R Reid said...

Glad I could be of service!

I take it you are not using IE 9 yet then?