- Posted On 24 August 2014
- In Programming
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.
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.
In newer versions of IE such as IE11 this option has been renamed to User Agent String for more clarity.
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
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.
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.