Sunday, January 8, 2012

How to detect rendering mode (Standard, Quirks) of a web page using Javascript or jQuery


Often, there will be times when you want to detect the rendering mode of the web page, especially when you are dealing multiple web projects. This can be easaily done using Javascript by checking for the documentMode property available for the document object.

If you are using jQuery, just use:

alert(jQuery.support.boxModel);

Using raw JavsScript, you can use any of the below methods:

alert(document.documentMode);

alert('You are in ' + (document.compatMode==='CSS1Compat'?'Standards':'Quirks') + ' mode.');

Here is a method provided in MSDN article, more tended towards Internet Explorer.

var engine;
if (document.documentMode) // IE8 or later
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
      // There is no test for IE6 standards mode because that mode  
      // was replaced by IE7 standards mode; there is no emulation.
   }
   
   alert(engine);