Document mode v/s Browser mode in Internet Explorer developer tools (F12)

This post covers information about the Document mode and Browser mode option provided in Internet Explorer’s Developer Tools (F12) which will help you to understand the concept to help you to test your website for old version support i.e. IE 6 and below.

If you are a web developer then most of time you keep testing your site pages, css and js in the developer tools provided in the browsers but when it comes to test site or js code for compatibility with IE6 or any other previous version of IE then you don’t have much option rather than Document mode and Browser mode provided in IE’s developer tools.

Though these options gets used by many web developers frequently still some of them are not much clear about what is the difference between document mode with respect to Browser mode and when to use which. So let’s start exploring these options.

Browser Mode:

When you select browser mode in developer tools “User Agent-string” gets changed as per your selection which gets sent to the server by IE. “User Agent String” contains information about the browser such as application version and name, platform token to identify the operating system and its version, Trident token identifies the version of MSHTML and more.

Server hosting the sites receives this information as a part of header information which can be used by it to provide content that is tailored for specific browser.

If you want to see how User Agent string looks like then you can type below string in address bar of your browser.

javascript:alert(navigator.userAgent)

In newer versions of IE such as IE11 this option has been renamed to User Agent String for more clarity.

Document Mode:

If you are clear about what is the browser mode and user agent string and how it gets used by the server responding then you can now easily understand what document mode is.

You can say Document mode is for browser to interpret the response to render you page in appropriate document type. By default document mode of a webpage is determined by its document type, which is specified using a <!DOCTYPE> directive. Document mode is an emulation of the older browser versions which helps you to understand how you web page will get interpreted by that version of browser. Conditional comment which mostly gets used to include particular css or js if such browser version gets detected works on the basis of document mode.

So I hope you are now clear about the difference between Document mode and Browser mode. I will recommend you to read following MSDN articles to have more clarity.

• Understanding User Agent Strings
• Testing sites with Browser Mode vs. Doc Mode

If you want to test your site for old versions of IE then it is best to change document mode and browser mode both to the appropriate version. It will give you an approximation to the actual behavior of the older version but if you want to confirm whether a site works properly in older version then it is recommended to test with actual browser or using the free virtual machines provided by the Microsoft

One more point that if you are writing some JavaScript code with a browser detection then you should consider writing your code by feature detection rather browser detection. To know more about it you can read this post about “How to Detect Features Instead of Browsers”.

I hope you have benefited by reading this post. Do share your thoughts in comment section below. If you have anything positive to add this post then do share that too.