Team LiB
Previous Section Next Section

Hack 58. Pick Display Modes for HTML and XML

Firefox has several display options for web content. Here's how to pick between them.

This hack explains how to specify a display contract between a web page and Firefox. A display contract is an agreement between the content author and Firefox that guarantees that the content will be displayed as the author intended, right down to the tiniest detail. That means no more guesswork about browser behavior. This hack applies to all Mozilla-based browsers, including Compuserve Version 8 and later, Netscape Versions 6 and later, the Mozilla Application Suite Versions 1.x, Camino, and so on.

To make a display contract, put hints and standards references in or near the content. Provided the content author puts these in, Firefox will fall into line with absolute predictability. You'll need to add several types of hints.

6.2.1. Tell Firefox What the Content Is

If content is delivered across the Internet, everything depends on the HTTP Content-Type header, which advertises a MIME type for the content document. Firefox always follows the MIME type, no matter what. Here are the correct headers to use for HTML, XML, and XHTML:

Content-Type: text/html
Content-Type: text/xml
Content-Type: application/xhtml+xml

It's the third line that Internet Explorer (IE) can't always understand. To support IE, you have to fudge a separate type for IE at the server [Hack #27] For complex XML cases [Hack #60] and for Firefox-specific XML such as XUL [Hack #68], use this content type:

Content-Type: application/vnd.mozilla.xul+xml

Images used in HTML documents or CSS documents should not be sent over the Web as text/html. They should be sent with the MIME type that is correct for their file format, so use something like this:

Content-Type: image/gif

If the file resides on the local disk, Firefox will do its best to get a MIME type from the operating system or, failing that, derive one from the filename. Neither is an infallible source of accurate content types.

6.2.2. Tell Firefox Which Parser to Use

Firefox contains two web page parsers: the strict XML parser and the flexible HTML parser. They're used to break the web page up into pieces in preparation for display. Pick the one you want.

If your content matches the Content-Type you advertised it to be, the choice of parser is automatic. The strict XML parser will be used for everything except content advertised as text/html. If your content is ill formed, the parser will halt with an error.

If you put the strict parser in action and the document contains this namespace declaration in the <html> tag or in the <?xml?> processing directive, the strict parser will go into Smart mode:

<html xmlns="http://www.w3.org/1999/xhtml">

In Smart mode , the strict XML parser recognizes that a <button> tag has special meaning, because it is an XHTML tag. It will not be treated as an anonymous piece of content; it will be treated as a form element that you can click.

On a bad day, your web pages might be poorly conceived, older than standards, or merely sloppy. All content, good or bad, that is advertised as text/html is dumped into the flexible HTML parser. That parser can handle ill-formed HTML, ill-formed XML and XHTML, well-formed XML, and well-formed standard HTMLthe whole lot.

6.2.3. Tell Firefox How to Render the Content

Firefox contains a single presentation system called Gecko that is based on and extends the CSS2 presentation standard. Gecko's responsibilities include composition, layout, and rendering. Rendering puts pages on the screen. Gecko can operate in one of several modes: Standards mode, Almost Standards mode, Quirks mode, and other modes. Set normal behavior for correctly advertised content this way:

  • For XML, Standards mode is triggered by a stylesheet directive like this one:

<?xml-stylesheet href="styles.css" ... ?>

  • For XHTML, Standards mode always applies.

  • For HTML 4.01, Standards mode is triggered by this DOCTYPE:

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

If Standards mode is not specified, or if badly advertised content is sent to the browser, or if the content is badly formed, then Gecko will operate in Quirks mode. In Quirks mode, Firefox applies a grab bag of fix-up styles and special cases to the content. These extra styles are an attempt to make the best sense possible of content that is of unknown intent. Such content is also called tag soup. Quirks mode can be enforced by omitting a <!DOCTYPE>, or by supplying this one:

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

Finally, there is another mode called Almost Standards mode. Standards mode (and the HTML 4.01 standard) differs from ancient and widespread HTML practices in one important way. It silently applies this style to images held in table cells:

td > img { vertical-align : baseline; }

The result is a gap underneath the image in the table cell. This is undesirable for older pages that use tiled-image in tables instead of CSS for page layout. If Almost Standards mode is applied instead, an alternate style is silently used and the gap goes away:

td > img { vertical-align : bottom; }

To use Almost Standards mode in Firefox, use this <!DOCTYPE>:

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

Any DTD may be optionally specified in this case.

The other rendering modes that Gecko provides are for XUL [Hack #68], MathML [Hack #61], and SVG [Hack #62] . They're all part of Gecko, but they are used to display non-hypertext documents. The MathML rendering is the one closest to HTML. For more detail on the HTML modes, see this URL:

http://www.mozilla.org/docs/web-developer/quirks/doctypes.html
    Team LiB
    Previous Section Next Section