Sunday, February 26, 2006

A Reminder on Modes

As this came up in a recent discussion, I think its prudent to at least briefly list the ideal doctypes to use for the modes you want to trigger in a browser. Keep in mind that there are three termed modes: Quirks Mode, Almost Standards Mode, and Standards Mode. If you want your pages to display in the manner you intended them to, it is vital to trigger the right mode. For instance, if your pages are highly standardized and reliant on CSS, they will not display the same in Quirks Mode as they will in one of the other two modes. This is a quite common problem when trying to pinpoint why a design isn't displaying correctly.

Quirks Mode: If you are planning to use write valid and modern code, you inherently aren't using quirks mode. Quirks mode, by its nature, breaks the W3C conventions. The only use of browsers being able to view things in Quirks Mode is for backward compatibility with old pages. This should not be used for new designs.

Almost Standards Mode: This is a more 'in between' state, though depending on the browser can be more or less close to standards mode as the level of closeness to standards mode varies by browser. For example, Safari has an Almost Standards mode that shows tables without the strict requirements for sizing, while IE6 doesn't do this for their Standards mode. So essentially one browsers' mode may be greater or lesser than anothers.

Standards Mode: This is where browsers will fully implement a standards compliant presentation of the page (or at least within the current capabilities of that browser for support of them).

Doctypes to Trigger Modes:


Quirks Mode

The easiest ways to trigger a fully quirks based mode of a browser is to either present no doctype, or to use one of the following (note the lack of URL):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Standards & Almost Standards Mode

Well, this is as close as it can come. Standards mode, as I mentioned already, isn't standards mode for all browsers. It varies and sometimes the closest you can come is Almost Standards. So, take these as just general guidelines. Use one of the following: HTML 4.01, or any of the XHTML doctypes with the full URL. Do not use (at least at this point in time) the XML declaration in your XHTML pages -- it triggers Quirks Mode in IE6 and Opera 7. The following are fine:

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

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

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

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

For XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


For reference, this article contains a chart that will make it much more clear. However, I will mention that the link to the article about how serving XHTML as text being 'harmful' is highly debated and not to be taken as a definitive point of view.

~Nicole

Cross-posted to take your comments on Beyond Caffeine.