Subscribe - It's FREE!!

Stay Connected Here

Stay Updated With Us Here



Google

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


Share with WhatsApp


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.

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.



If you enjoyed this post take 5 seconds to share it! Be Socialable. :-)

Share with WhatsApp

Posts To Read Next

Top 10 Visual Studio things which can boost developers coding speed

Visual Studio 2012 provides some coding features by which you can code faster if use them properly. This post will cover top 10 things among them to boost your development speed.


Visual Studio 2008 Shell and TFS integration

Visual Studio 2008 Shell and TFS integration is the problem for all newbies of BIDS and TFS. Here is the solution.


How to call click or any event only once in jQuery

Know how to execute an click event or any event only once for any element in jQuery. Perform action only once and even not required to unbind event.


Assembla - Free and private repository to manage your source code online with SVN subversion hosting

With Assembla you can share source code with others online. Free & Private source code repository with SVN Subversion, Git & Perforce Hosting.


Best CSS Gradient background generator tools online

Here are some best CSS gradient background code generator online tools using which you can create a cross browser css code for gradient backgrounds.


Your opinion is valuable for us! Comments, suggetions are welcome.


Submit your Email Id to stay updated with us and get notified with our new posts. It's FREE!
We know this popup is disturbing you!
But We would greatly appreciate if you share us with your friends below!

It will not take more than 2 seconds but will motivate us greatly to write more,share more!

x