Standards vs Quirks Mode

by Ran Enoch  –  follow on Twitter here

Aaron Webb is an IT professional working for a quickly growing IT services company. You can learn more about him at his website, The Webboy.

Join us in our newest publication:

Web designers have long been plagued by the support (or lack thereof) of standards in the browser. One browser may interpret a CSS property or HTML tag one way while another may have a slightly or even largely varied implementation. Lately, thanks to the efforts of standards advocacy groups, browsers have been moving toward a more consistent support of the web standards. How then do you move into standards-compliance without breaking compatibility with the already billions of pages on the internet that may have not been designed to standards or contain various hacks to overcome deficiencies in the browser? Introducing the Doctype switch!

Doctype and Rendering Mode

First let’s explain doctypes. The doctype is the first thing that appears in a standards-compliant page. This tells the browser which DTD we are going to validate against when rendering our page. The W3C has set forth specifications that lay out the rules of which (x)HTML tags are acceptable and in which places. One of these specifications is called a DTD (Document Type Definition) and may be one of the following:

  • HTML 4.01 Transitional
  • HTML 4.01 Strict
  • HTML 4.01 Frameset
  • XHTML 1.0 Transitional
  • XHTML 1.0 Strict
  • XHTML 1.0 Frameset
  • XHTML 1.1

A doctype has a reference to which DTD this document will validate to. We may specify a doctype in our xHTML page which is targeting XHTML 1.0 Transitional compliance. In this case our doctype will look something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The first part of this string specifies the type of document we are working with. The second part is called a “public identifier” specifying the DTD used and the last part is the “system identifier” which is a URL to the actual dtd used for validation. Below are some further examples of using the doctype with various specifications.

HTML 4.01 Strict

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

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

So now that we understand doctype, what exactly is a rendering mode and how does the doctype effect it? We refer to the rendering modes as simply “quirks” and “standards”. When a browser renders a page in “standards” mode it will validate the code of that page against the chosen W3C specification. If the markup is invalid or not well-formed the page may render incorrectly or not at all. On the other hand, if “quirks” mode is used, the browser will do its best to parse a page even if the markup is not well-formed and will render the page the best that it can even if there is invalid markup.

The doctype comes into play in instructing the browser which mode it should use to render the page. To use “standards” mode, simply specify one of the doctypes we mentioned before. When the browser encounters these doctypes it will enter standards mode and render according to the specified DTD. If we omit the doctype entirely – and many existing pages on the web do not contain one – or specify an invalid one, then the browser will enter “quirks” mode and render the page in the traditional fashion. It may be worth it to note that the use of something other than a Strict DTD, such as a Transitional DTD, does not imply “quirks” mode. A transitional DTD is a valid specification and will be validated to that standard.

Variations and Quirks

So if I use a correct doctype and specify a valid DTD, then all my problems will be solved, and I will code in web nirvana right? Wrong! There are several quirks (no pun intended) even in this. When using standards mode, the slightest mistakes can make for a long time in finding a simple problem. Thankfully most development tools can easily locate these, and the validators show errors in the documents that may point to rendering errors. Let’s take a look at a few nuisances.

Many people writing XHTML markup will insert an xml declaration at the top of their document. When used, this declaration must be the first line in the document. This declaration is not required and will throw IE6 and Opera 7 into “quirks” mode as they require the doctype declaration to be the first line in the document. There have been arguments over the necessity of the xml declaration, but it is easiest to just leave it out and enjoy standards mode across the board.

Another variation is that with Mozilla browsers a third rendering mode, “almost standards”, is introduced. Fortunately the differences are small and the only effected parts of a document are images contained within table cells, but then after this standards-compliant talk the cases of this table-based layout will surely be few and far between :-)

Conclusion

Hopefully you have gained a high-level understanding of how browsers will interpret your markup, and why your rendering results may vary. When writing with standards compliance, you will be able to acheive a greater consistency in the rendering of your pages across browsers. Use the resources below to narrow in on any of the topics mentioned above.

Share and Enjoy !

0Shares
0 0