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

Typewriter - Automatic TypeScript Template generation from C# classes in Visual Studio

Typewriter, an extension for visual studio that generates TypeScript files from C# code files using TypeScript templates. Convert your C# model classes to TypeScript automatically.


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.


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.


Copy changed data in table from one database to another in SQL stored procedure

How to copy or merge changed data in table from one database to another having same schema is the topic of this post.


Swagger - Powerful Opensource Framework for RESTful API

With a Swagger-enabled API, you get interactive documentation, client SDK generation and discoverability. Swagger Editor allows you to generate code, documentation with ease.


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!
Vu 32'' TV Vu 24'' TV
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