Using compatMode to Determine the Standards Compliance Mode of the Page on the Client

Have you ever used the compatMode property JavaScript to determine if a web-page is in standards-compliant or in quirks mode directly on the client?

compatMode was first introduced in Internet Explorer 5.5, and later adopted by FireFox and Opera, and is rather convenient for third party component developers. One of its possible uses is if you develop and provide scripts , widgets or layouts that require xhtml mode and are not intended to work in quirks mode – you may display a compatibility warning if your clients try to use your component in quirks mode or in HTML 4.01 or earlier version.

compatMode can return two possible values – BackCompat, if the standards compliance mode is not switched on (the page is missing a !DOCTYPE declaration, the !DOCTYPE is HTML 4.01 or earlier version, or !DOCTYPE is XHTML, but is preceeded by a XML prolog that triggers quirks mode in IE6 (<?xml version="1.0" encoding="utf-8" ?>)), or CSS1Compat– if the standards compliance mode is switched on.

Note that the compatMode property is deprecated in Internet Explorer 8 in favor of the documentMode property.

Here is an example function illustrating the compatMode property:

function checkCompatMode()
{
var cMode = document.compatMode;
if(cMode == 'CSS1Compat')
{
alert('This page is in a standards compliant mode.');
}
if(cMode == 'BackCompat')
{
alert('This page is in a non-standards compliant (quirks) mode.');
}
}

This script is included in the latest version of Acid.JS – The AJAX Tools and Widgets Library .