1. Technology

Quirks Mode—Using the DOCTYPE Element

Leave Out the Doctype to Put Browsers into “Quirks Mode”

By

If you've been designing web pages for more than a few months, you are most likely aware of the difficulty in writing a page that looks the same in all browsers. In point of fact, that's impossible. Many browsers were written with special features that only they could handle. Or they have special ways of handling things that are different from how other browsers handle them. For example:

  • Layers were created for use in Netscape browsers. They don't work in any other browser, and in fact have been deprecated in Netscape 6.x+.
  • Inline frames were originally created for Internet Explorer only, and have since become part of the HTML specification.
  • Internet Explorer 6.0 adds an additional space (like a <br>) surrounding <div> tags, unless you write the contents of the div all on one (long) line. (IE 6 has many more quirks as well as this one.)
  • Netscpe 4.7 will not display tables that are not written in correct HTML - it shows a blank page instead. This was fixed in Netscape 6.

The problem for browser developers is that they have to create web browsers that are backwards compatible with web pages built for older browsers. In order to deal with this issue, browser makers created modes for the browsers to operate in. These modes are defined by the presence or absence of a DOCTYPE element and what that DOCTYPE calls.

DOCTYPE Switching and “Quirks Mode”

If you put the following DOCTYPE in your web page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Modern browsers (Android 1+, Chrome 1+, IE 6+, iOS 1+, Firefox 1+, Netscape 6+, Opera 6+, Safari 1+) would interpret this in the following fashion:

  1. Because there is a correctly written DOCTYPE, this triggers standards mode.
  2. It's an HTML 4.01 Transitional document
  3. Because it's in standards mode, most browsers will render the content compliant (or mostly compliant) with HTML 4.01 Transitional

And if you put this DOCTYPE in your document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

This tells modern browsers that you want to display your HTML 4.01 page in strict compliance with the DTD. These browsers will go into "strict" or "standards" mode and render the page in compliance with the standards. (So, for this document, tags such as <font> might be completely ignored by the browser, as the FONT element has been deprecated in HTML 4.01 Strict.)

If you leave the DOCTYPE out completely, the browsers are automatically kicked into “quirks” mode.

The table below shows what the common browsers do when presented with different common DOCTYPE declarations.

Microsoft Makes It Harder

Internet Explorer 6 also has the feature that if you put anything at all above the DOCTYPE declaration, they will go into quirks mode. So, both of these examples will put IE 6 into quirks mode, even though the DOCTYPE declarations say to be in strict standards mode:

<!-- any comments at the top of the HTML will result in quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

and the XHTML 1.1 DOCTYPE:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Plus, if you get past IE6, then you have the “feature” that Microsoft added in IE8 and IE9: META element switching and website blacklisting. In fact, these two browser versions now have up to seven(!) different modes:

  • IE 5.5 quirks mode (IE 8 and 9)
  • IE 7 standards mode (IE 8 and 9)
  • IE 8 almost standards mode (IE 8 and 9)
  • IE 8 standards mode (IE 8 and 9)
  • IE 9 almost standards mode (IE 9)
  • IE 9 standards mode (IE 9)
  • XML mode (IE 9)

IE 8 also introduced “Compatibility Mode” where the user could choose to change the rendering model back to IE 7 mode. So that even if you set the mode you want to set using both the DOCTYPE and META elements, your page could still be pushed back into a less standards-compliant mode.

What is Quirks Mode?

Quirks mode was created to help deal with all the strange rendering and non-compliant browser support and hacks that web designers were using to deal with those things. The concern that browser manufacturers had was that if they switched their browsers over to full specification compliance, web designers would be left behind. By setting up DOCTYPE switching and “Quirks Mode” this allowed web designers to choose how they wanted browsers to render their HTML.

Quirks Mode Effects

There are several effects that most browsers use in Quirks Mode:

  • In some browsers, the box model changes to the IE 5.5 version of the box model in quirks mode.
  • Some browsers don't inherit styles into tables
  • Quirks mode affects the parsing of CSS and CSS layout dramatically, if you are converting pages to standards mode from quirks mode, be sure to test your CSS layout and parsing extensively.
  • Watch for changes to scripting when in quirks mode. Firefox changes the way the id attribute works, for example. IE8 and IE9 have very dramatic changes to scripting in quirks mode.

There are also a difference in “Almost Standards Mode:”

  • The height of table cells with only images inside is computed differently from standards mode.

How to Choose a DOCTYPE

I go into more detail in my article DOCTYPE List, but here are some general rules of thumb:

  1. Always choose standards mode first. And the current standard you should be using is HTML5:
    <!doctype html>
    Unless you have a specific reason to avoid using the HTML5 DOCTYPE, this is what you should be using.
  2. Go to strict HTML 4.01 if you need to validate legacy elements or want to avoid new features for some reason:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. If you have sliced images in a table and don't want to fix them, go to Transitional HTML 4.01:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. Don't write pages deliberately in quirks mode. Always use a DOCTYPE. This will save you on development time in the future, and really has no benefit. IE6 is rapidly losing popularity and by designing for this browser (which is essentially what designing in quirks mode is) you are limiting yourself, your readers, and your pages. If you must write for IE 6 or 7, then use conditional comments to support them, rather than forcing modern browsers into quirks mode.

Why Use DOCTYPE

Once you're aware of this type of DOCTYPE switching going on, you can affect your web pages more directly by using a DOCTYPE that indicates what the browser can expect from your page. Also, once you start using DOCTYPE, you'll be writing HTML that is closer to being valid (you should still validate it). And by writing valid XHTML, you encourage browser makers to build standards compliant browsers.

Browser Versions and Quirks Mode

DOCTYPE Android
Chrome
Firefox
IE 8+
iOS
Opera 7.5+
Safari
IE 6
IE 7
Opera 7
Netscape 6
None Quirks Mode Quirks Mode Quirks Mode
HTML 3.2
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> Quirks Mode Quirks Mode Quirks Mode
HTML 4.01  
Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Standards Mode* Standards Mode* Standards Mode
Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Quirks Mode Quirks Mode Quirks Mode
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Standards Mode Standards Mode* Standards Mode
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
Standards Mode Standards Mode* Standards Mode
HTML5  
<!doctype html> Standards Mode Standards Mode* Quirks Mode
*With this DOCTYPE, browsers are close to standards compliant, but have some issues—be sure to test. This is also known as “Almost Standards Mode.”

©2014 About.com. All rights reserved.