Quirks Mode Detection

The companies that produce web browsers usually have to deal with a big problem, if they implement new standards in their new releases, it would break backward compatibility with the nonstandard websites that were built for older versions of their browsers.

Fortunately old and nonstandard websites usually use older versions of doctype, so doctype can be used as a good method to determine these websites.

When web browsers detect these websites they simply switch from standard mode to quirk mode. When a browser is in quirks mode it tries to render the page similar to older browsers to make certain that it is rendered properly.

In recent years it’s becoming less common to encounter a website in quirk and most website now use proper doctype in their documents. But doctype is not the only thing that causes a website to be rendered in quirks mode. Henri Sivonen has compiled a list of various document types, showing whether pages are rendered in Quirks, Standards, or Almost standards mode.

Standard-compliant websites are faster since browsers don’t have to figure out nonstandard markup in Quirks Mode. Fortunately, the doctype in HTML5 was designed to activate standards mode in almost all of browsers and It’s short and simple.

To test whether a page is in quirks mode or standards mode, simply save the following JavaScript code as a bookmark on your browser and hit it while viewing  any page that you want to find out its rendering mode:

javascript:m=(document.compatMode=='CSS1Compat')?'Standards':'Quirks';window.alert('You%20are%20in%20'%20+%20m%20+%20'%20mode.');

Learn more:

Documentation for quirks mode in Mozilla-based browsers

Opera Software’s explanation of quirks mode in their browser

w3.org ‘Standards’ vs ‘Quirks’ modes

Leave a Reply