JavaScript in Action : Choosing a Doctype
When I first began doing Web development, I had no appreciation of an HTML page’s document type declaration, aka DOCTYPE. I believe I was using HTML 3.2 at the time, and only understood that meant pages must begin with:
The DOCTYPE is a declaration of the version of HTML in use by the page, with each new version of HTML supporting new features (in the form of HTML elements). For example, HTML 2.0 didn’t even support tables and HTML 3.2 had limited support for style sheets. For the past several years, the two most common DOCTYPES have been HTML 4.01 and XHTML 1.0. XHMTL is basically HTML, with tighter adherence to XML syntax (more on this in the next section). Both HTML 4.01 and XHTML 1.0 come in three flavors: Strict, Transitional, and Frameset. Strict is obviously the most restrictive of the three, allowing for the smallest set of elements. The Transitional version is Strict plus deprecated elements and more. The Frameset version is Transitional plus support for frames. If you’re like me, you made a decision between HTML and XHTML, and then probably went with the Transitional option, as it’s the most forgiving:
Taking things a step further, you may have been in the habit of validating your HTML pages, using sites like the W3C Markup Validation Service (http://validator. w3.org/). If so, then you probably knew that such tools perform validation based upon the page’s DOCTYPE. For example, if you used a deprecated element or a frame in a Strict document, that would be flagged. The same goes for not adhering to XML syntax in an XHTML document.
NOTE: the DOCTYPE needs to be the absolutely first thing in your Web page, without even a space before it.
Hopefully you already know all this, but if you don’t, or if you don’t know anymore than this, that’s understandable. The real goal, though, isn’t to just create (X)HTML pages that pass the validation routines, but to have the pages look and function correctly in the Web browser. And here’s where the DOCTYPE also comes into play: Web browsers will choose one of two operating modes based upon a document’s DOCTYPE. If a valid DOCTYPE exists, the browser will run in “standardscompliant” mode (often just called “Standards” mode), in which HTML, CSS, and the DOM are all treated as they are intended to work. If a document does not have a DOCTYPE, or if the DOCTYPE is incorrect, the browser will run in “Quirks” mode, in which the browser will treat the HTML, CSS, and DOM in a way consistent with older browsers. For example, when Internet Explorer 8 gets switched into Quirks mode, it will render a page in the same way that Internet Explorer 5.5 did. (IE5.5 is well over a decade old now, so imagine what it means to view your beautiful new Web page using 10-year-old technology.)
What is the DOM ?
The DOM, first mentioned in Chapter 1, (Re-)Introducing JavaScript, is short for Document Object Model. The DOM is a way to represent and navigate XML data, which includes HTML and XHTML. With respect to Web browsers, the DOM standard is managed by the World Wide Web Consortium (W3C). The current standard is DOM Level 3, released in 2004. Despite the fact that this standard has been around for years, it’s still not consistently implemented across all browsers. To be clear, the DOM is not part of core JavaScript, but JavaScript uses the DOM to interact with the Web browser, a technique often called DOM manipulation.
Confirming the browser mode
Some Web browsers readily show what mode they are operating in for the loaded Web page. For example, Firefox’s Page Info panel, under the Tools menu, shows this information as its “Render Mode.” To view the current mode in Opera, select View > Developer Tools > Page Information. The value is then displayed under “Display Mode.” No other browser shows this information as readily, but in Chapter 9, JavaScript and the Browser, you’ll see how to access the rendering mode using JavaScript.
And if that’s not bad enough, even valid DOCTYPEs will trigger Quirks mode on some browsers, or in situations where invalid elements are encountered in an otherwise- valid document with a valid DOCTYPE. Thus, when it comes to trying to make a Web page that looks and behaves consistently across all browsers, the DOCTYPE plays a significant role. In this web-site, as in your Web development life, a decision has to be made as to what DOCTYPE should be used. And in this web-site, the choice is:
This DOCTYPE has several benefits:
- It’s easier to type and you’re less likely to make a mistake in entering it.
- There are fewer characters, meaning a, perhaps imperceptibly, smaller file is being sent to, and loaded by, the user’s Web browser.
- It’s supported by all major browsers.
- It automatically puts the browser into Standards mode.
If you haven’t come across this DOCTYPE yet, that’s because this is the new DOCTYPE for HTML5. Now, HTML5 isn’t an accepted standard yet—it’s still being discussed, so how is it safe to use? Let’s look at that in detail.
NOTE: not all browsers switch modes in the same way. For example, opera has, for years, defaulted to standards mode, and Mozilla has its own “almost standards” mode.
No comments:
Post a Comment