My Books

Text Processing with JavaScript

Solve complex text validation, extraction, and modification problems efficiently in JavaScript.

Modern Async JavaScript

Delve into async features of JavaScript from ES2020 through ESNext. Start building custom asynchronous iterators and generators, and more for fast, lean code.

JavaScript Brain Teasers

Ready to test your JavaScript skills? Challenge yourself with these brain-teasing puzzles, supercharge your learning journey, and emerge as a JavaScript pro.

Quirks Mode Detection

Creating standard-compliant websites is principal aspect of our work. To test if your page is in quirks mode mode you can simply bookmark this JavaScript code on your browser and hit it while viewing the page that you want to find out its rendering mode.

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

Have your say