Rendering modes with JavaScript DOM

Standard DOM is extended to provide additional functionality both in a standardised way and proprietary way of each browser (browsere may have their own set of proprietary DOM extensions. A DOM extension is simply the process of adding custom methods/properties to DOM objects. Custom properties are those that don’t exist in a particular implementation.  During extension, methods/properties can be added to objects directly, or to their prototypes (but only in environments that have proper support for it).

The structure and appearance of a web page is described by a combination of two standardized languages: HTML, and CSS, which specify how the page should be rendered. However, older web browsers either did not fully implement the specifications for these languages or were developed prior to the finalization of the specifications. As a result, many older web pages were constructed to rely upon the older browsers incomplete or incorrect implementations, and will only render as intended when handled by such a browser.

To maintain compatibility with the greatest possible number of web pages, modern web browsers are generally developed with multiple rendering modes: in standards mode pages are rendered according to the HTML and CSS specifications, while in quirks mode attempts are made to emulate the behaviour of older browsers.

 document.compactMode

The document.compactMode property returns the rendering mode of the current document, specifically, whether the page is rendered in quirks or strict/standards mode. This method is supported by most of the browsers.

Example of DOM's document.compactMode property

var mode = document.compactMode;

if (document.compatMode == "BackCompat") {

  // in Quirks mode

}

if (document.compatMode == " CSS1Compat’") {

  // in Stricts mode

}

Here if mode is BackCompat, then the document is in quirks mode and if mode is CSS1Compat, then the document is in strict mode

Quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C standards in standards mode.

document.documentMode

The document.documentMode property is a IE8 property that detects the document mode used by the browser to render the current page. Because IE8 can render a page in various different modes depending on the page's doctype plus the presence of certain HTML elements, documentMode returns a different number depending on the mode the page is being rendered in.

This document.documentMode 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
• 10 - The page is displayed in IE10 mode
• 11 - The page is displayed in IE11 mode

Example of DOM's document.documentMode property

var  dm = document.documentMode;

document.write(“The display mode of the browser is ” + dm);

›› go to examples ››