Is there a way to show on a web page which browser mode and which document mode is set?
Is this generally possible and is it possible to show/hide some content depending of which mode is switched on?
I would like to use a function to allow upload by drag and drop (see http://blueimp.github.com/jQuery-File-Upload/) but I noticed that this works only when IE is in a specific Document Mode. In case this mode is not switched on I would like to disable the Option to upload by drag and drop.
var j = jQuery.noConflict();
j(document).ready(function(){
/* detect usage of IE Developer Tools using different Mode for Browser and Document */
if(j.browser.msie) {
var browserVersion = j.browser.version.slice(0,j.browser.version.indexOf("."));
var documentVersion = document.documentMode;
if(browserVersion != documentVersion) {
alert("ERROR:\nBrowser Mode and Document Mode do not match!\n\nBrowser Mode: IE"+ browserVersion +".0\nDocument Mode: IE"+ documentVersion +".0");
}
}
});
Courtesy: http://my.opera.com/Schalandra/blog/2012/02/29/how-to-detect-different-browser-mode-and-document-mode-in-ie
Maybe you'll find this answer helpful too.
https://stackoverflow.com/a/623071/903454
You can detect the document-mode:
var mode = document.documentMode;
If the mode is Internet Exlporer 5, it returns five, if it's IE6, it returns 6, and so on.
However, you can force a specific document mode:
<meta http-equiv="X-UA-Compatible" content="IE=[IEVersion]">
Where [IEVersion] is one of the following:
Edge Always the newest version
EmulateIE9 If the doctype is set, the mode is IE9, otherwise IE5
EmulateIE8 See EmulateIE9
EmulateIE7 See EmulateIE9
9 Alway IE9
8 Always IE8
7 Always IE7
5 Always IE5
PS: Your plugin should recognize the mode automatically.
You can use document.documentMode in IE to find out html document
5 The page is displayed in IE5 mode
7 The page is displayed in IE7mode
8 The page is displayed in IE8 mode
9 The page is displayed in IE9 mode
Related
I'm working on a legacy system that has a mishmash of browser dependent features (don't ask). The plan is to revamp everything to be current, but in the meantime, I need to figure out a way to make the following happen:
If the user has Browser Mode set to compatibility mode for this site or in general, I need to make the Document Mode IE8. This specific case I'm looking into, I'm using IE10. When you switch to IE10 Compatibility mode, the "page default" for the Document Mode is Internet Explorer 7. If I could just make the page default Internet Explorer 8, I think that would solve my case for now.
When I try to use in the header, it ALWAYS forces to IE 8 compat mode.
I realize this is a very strange way to do things, and it's only temporary until I can properly fix the insanity....
Which IE8 mode do you want? IE8 Standards mode or IE8 "use the <!doctype>" mode? If the former, set x-ua-compatible to IE8. If the latter, set it to EmulateIE8. (The various options, in gory detail, can be found here.
(The first value specifically chooses IE8 standards mode as the target mode; the second will pick IE8 standards mode if the page contains a standards mode <doctype> or IE5 quirks mode if the page doesn't contain a <doctype>.)
The key is knowing which legacy document mode that you need for the page. Figure that out and target that mode specifically. (Use the Emulation tab of the Developer Tools to switch between modes until you find the one that works.)
Note that if you deploy the page to an Intranet (right click, choose Properties, and then check out the Zone value), you may wish to add a Mark of the Web to the page so that it opens in the Internet zone and avoids the various defaults that behave otherwise.
I am working on a site that is using the following:
Doctype: <!DOCTYPE html>
Meta tag: <meta http-equiv="X-UA-Compatible" value="IE=EmulateIE9">
When I run the site in IE > IE9, I am expecting the site to render in IE9 standards mode. This is not happening.
This is the behavior I am seeing:
Internet Explorer 11 -> Document mode 11
Internet Explorer 11 in compat mode -> Document mode 7
Internet Explorer 10 -> Document mode 10
Internet Explorer 10 in compat mode -> Document mode 7
Internet Explorer 8 -> Document mode 8 (this probably makes sense...)
Why is this happening? I have a reasonable doctype so it should render in IE9 standards. The MSDN page on the topic says that if I use IE=EmulateIE9 then the doctype will be choosen as:
IE9 mode (if a valid declaration is present)
Quirks mode (otherwise)
Just to be clear, I am not asking how to make the document render in IE9 standards mode. I know that I can just use IE=9 instead of IE=EmulateIE9. My question is: Why isn't the document rendering in IE9 standards?
Please check the Internet Explorer Standards Support Documentation Overview:
https://msdn.microsoft.com/en-us/library/ff405771(v=vs.85).aspx
Inside it states:
2.1.2.5 Compatibility View
Compatibility View settings can also impact the document mode
selection:
If a webpage is retrieved from a website in the Local intranet zone (see "About URL Security Zones" at [MSDN-SECZONES]), IE7 mode is
used.
or
If the webpage is retrieved from a site in a domain on the Compatibility View list (and the list is active), IE7 mode is used
(see "Understanding the Compatibility View List" at
[MSDN-UnderstandingCompViewList]).
So most likely, this matches your case
I noticed something interesting about my website. It displays correctly when I have the meta tag <meta http-equiv="X-UA-Compatible" content="IE=9"> in IE 8 and 7, but in IE 9 and 10, it does not display correctly. However, they are seen correctly when I go to Developer Tools and set the browser mode to IE 10 or IE 9 Compatible mode.
I was wondering, is there a way you can force IE 10 or IE 9 to automatically view the page in Compatibility mode without changing the mode in Developer Tools? If so, is there a Doctype or meta tag that can do this for me? I've done some research and I've only found Doctypes that allow you to view things in only standard mode, but I haven't found any Doctype that can allow you to view something in Cmpatability mode. Any help would be appreciated! Thanks!
There’s a couple of settings in IE 8 that can cause pages to render in Compatibility Mode, regardless of the page’s HTML content or HTTP headers:
Page > Compatibility View Settings
If “Display intranet sites in Compatibility View” is checked, then IE will render all sites on the local network in compatibility view. (This has happened to me a few times during development.)
If “Include updated website lists from Microsoft” is checked, then IE will download a list of websites from Microsoft and render them all in compatibility view.
If “Display all websites in Compatibility View” is checked, then, well, you can guess what happens.
Tools > Internet Options > Advanced > Browsing
If “Automatically recover from page layout errors with Compatibility View” is checked, then IE will sometimes switch to compatibility view if it thinks a page’s layout is broken.
And, finally, if you navigate to a page and then click on Page > Compatibility View (or click on the compatibility view icon in the address bar), then that page will be rendered in compatibility view.
So, although it’s worth putting X-UA-Compatible in there and using a doctype like the HTML5 one (so that your intentions are clear), always check these settings first when testing.
Source: The HTML5 doctype is not triggering standards mode in IE8
I found a lot of links that said adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
or an older version of DOCTYPE forces the browser into compatibility mode. But after repeated attempts with many combinations, seems to me that all it does is alter the Document Mode and NOT the Browser Mode
I bet if you just remove your DOCTYPE tag completely or make it invalid that IE will be forced into compatibility view. Broken markup of some sorts will force this mode. However, this will surely have other negative consequences for non-IE browsers.
You would like to force IE into compatibility mode?
Also, I don't believe IE will display compatibility mode in the console window.
Are you sure you don't mean quirks mode?
The browser mode function (as I understand it) in IE isn't exactly compatibility mode.
I'm just going to copy/paste from the official documentation below.
Browser Mode
Description
IE9
IE9 reports a UA string, version vector, and document mode to match the default browser behavior, which is the most standards-compliant mode in IE9. Use this mode to test how IE9 users experience your site.
IE9 Compatibility View
IE9 reports a UA string, version vector, and document mode, as if it is IE7; however, the UA string also includes the Trident/5.0 token indicating that the browser is really IE9. Use this mode to test how IE9 users experience your site if they click on the Compatibility View button.
IE8
IE9 reports a UA string, version vector, and document mode as if it is IE8. Use this mode to test how IE8 users experience your site.
IE7
IE9 reports a UA string, version vector, and document mode as if it is IE7. Use this mode to test how IE7 users experience your site.
The only way to force this to change no matter what, is to set it on the virtual directory level through IIS in the 'HTTP Headers' section of the properties menu. Changing it here will force the browser into whatever mode you set it to, 100% of the time.
Changing the setting here overrides whatever browser mode is specified at the web page level.
You can't. The Browser Mode is intended to be used by developers to see what their browser would look like with new features disabled (for instance, if I put my IE10 into the IE8 Browser Mode, it will no longer support border-radius, or anything else that was added).
Since it's a developer tool, there is no need for it on the regular user's side.
The Document Mode, on the other hand, involves how the document is rendered, not how it is supported. I can have my document in IE8 mode and still have rounded corners because the browser mode supports it.
That being said, you should ALWAYS use this:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If I see a site with a X-UA-Compatible header that contains anything else, I assume that the developer is a lazy bastard.
Can someone please explain the difference between IE8 browser mode and document mode in simple terms?
What causes the browser mode to change?
What causes the document mode to change?
If a user changes the mode(s) via developer tools, does the change remain even if the page is refreshed?
I am asking this because we are doing some IE8 testing here, and different people have different combinations of the modes, and i want to try to figure out how this is happening.
From this article on the IE8 blog, entitled How IE8 Determines Document Mode
The Developer Tools settings override all Document Modes for pages displayed in a tab.
The X-UA-Compatible meta tag and then header override Compatibility View Settings and the doctype unless the X-UA-Compatible value is EmulateIE7 or EmulateIE8.
The user’s Compatibility View Settings override the Microsoft Compatibility View List.
If none of the above rules apply, the doctype determines whether the webpage renders in IE8 Standards, IE8 Almost Standards or Quirks Mode.
So from that we get the following answers to your questions:
Q. What is the difference between browser mode and document mode in simple terms?
A. Browser mode is set in the developer tools to emulate different IE browser version behaviors while document mode is defined on the web page to tell IE to render the site differently for compatibility purposes.
Q. What causes the browser mode to change?
A. The user changes the browser mode in the dev tools.
Q. What causes the document mode to change?
A. The Doctype and the X-UA-Compatible meta tag and header set by the web developer.
Q. If a user changes the mode(s) via developer tools, does the change remain even if the page is refreshed?
A. The Browser Mode will stay, but if you change the Doctype and X-UA-Compatible, they will go back to what is defined on the page.
UPDATE: As Adrien Be points out below, IE9+ adds the ability to change the document mode in the dev tools via a setting which will persist on refresh.
See your answer in this page.
The documentMode property returns the mode used by the browser to render the current document.
IE8 can render a page in different modes, depending on the !DOCTYPE or the presence of certain HTML elements.
This property returns one of following values:
5 - The page is displayed in IE5 mode
7 - The page is displayed in IE7 mode
8 - The page is displayed in IE8 mode
9 - The page is displayed in IE9 mode
Note: If no !DOCTYPE is specified, IE8 renders the page in IE5 mode!
Browser Mode: Specifies the user agent sent by the browser to the Web Server. Rendering differences can occur if your JavaScript or back-end code renders differently based on the user agent string. For example, you may see JavaScript that checks navigator.userAgent. (Mozilla/5.0 (compatible; MSIE 8.0...) This value is also used to to process conditional comments ([if lte IE 9], [if gt IE 8], etc.). The Emulation tooling in IE 11 does not have a browser mode. It has a user agent drop-down instead.
Document Mode: Specifies the rendering engine used to process the markup. This is typically where we see rendering issues and browser incompatibilities. The original goal (for better or worse) was website owners could choose a document mode for their site via a meta tag. In IE 11, the emulation tools are less confusing.
Testing:
If your goal is to emulate an old IE8 browser, you should change both browser mode and document mode. The emulation is not perfect, so a more thorough option is to download free test VMs from Microsoft where you can test with a *real" version of IE 8, 9, etc.
What causes these values to change?
The Browser mode will not change. (Unless you change it in Dev tools.) It is set before making the request to the web server.
The document mode can change based on web server response. It can be changed via a X-UA-Compatible HTTP response header, the doc type, meta tags, Intranet sites, markup issues, etc.
There is a little button in top left , in IE dev tools -> emulation (tab) that says "Persist emulation settings"
see this :
"Settings persistence and reset
A Persist Emulation settings icon is added to the Emulation tool. This will maintain your current emulation settings until specifically disabled, allowing you to work, close the browser, and come back with your emulation settings intact. To its right is a Reset Emulation settings icon, which quickly resets the tool back to default values."