13

I know that modern browsers generally have two render mode: standard mode and quirk mode. The browser detects the heading DocType.

The question is how to detect render mode of current page at runtime. Is there any Firebug tool to do that?

Morgan Cheng
  • 73,950
  • 66
  • 171
  • 230

2 Answers2

22

Before IE8:

alert('Page was rendered in ' +
  ((document.compatMode == 'CSS1Compat') ? 'Standards' : 'Quirks') + ' Mode.');

For IE8:

var vMode = document.documentMode;
var rMode = 'IE5 Quirks Mode';
if(vMode == 8){
  rMode = 'IE8 Standards Mode';
} else if(vMode == 7){
  rMode = 'IE7 Strict Mode';
}
alert('Rendering in: ' + rMode);

Be aware that to gain the benifits of IE8's new "standards mode by default" behavior you'll need to be rendering in IE8 Standards Mode.

This mode affects the rendering of your HTML+CSS as well as the fixes to JavaScript methods like document.getElementById( id ); and .setAttribute( name, value );

scunliffe
  • 62,582
  • 25
  • 126
  • 161
  • 1
    Tip: Create a favourite using the following code as url: _javascript:(function(){var vMode=document.documentMode;var rMode='IE5 Quirks Mode';if(vMode==8){rMode='IE8 Standards Mode';}else if(vMode==7){rMode='IE7 Strict Mode';}alert('Rendering in: '+rMode);})();_ If you have created your favourite using this code you can name it like "detect rendering mode". Only by clicking on it you'll get the message-box. – SimonSimCity Sep 29 '11 at 13:42
  • @SimonSimCity funny you should mention that - that's exactly what I have except mine's called "Render Mode" – scunliffe Sep 29 '11 at 14:23
  • but what about IE 9 and IE 10? Why not just look at `document.compatMode` to see whether it is `BackCompat` (Quirks mode) or `CSS1Compat` (Standard Compliant mode) – nonopolarity Apr 25 '13 at 01:23
  • when this was written IE9 and IE10 didn't exist yet ;-) I'll update the code accordingly because there is now a full matrix of modes it can be running in on IE. – scunliffe Apr 25 '13 at 13:18
1

You should also have a look at jQuerys jQuery.support . It will tell you what standards are supported by the browser (boxModel, opacity, etc.)

http://docs.jquery.com/Utilities/jQuery.support

i.e.

jQuery.support.boxModel; //false in IE when in quirksmode, true otherwise.
Pim Jager
  • 31,965
  • 17
  • 72
  • 98