All you need is <!doctype html>
Posted Nov 29th, 2008 by David Calhoun in htmlOne of the first things I learned at my internship over the summer was the difference between Standards and Quirks mode. Basically, the idea behind quirks mode is for browsers to be backwards-compatible. If a webpage is missing a DOCTYPE tag or has some sort of “transitional” doctype tag, the page will be rendered according to the previous version of the browser. So say we’re using IE7 and we run across a page that has no doctype specified. IE7 will assume it’s an old, outdated page, and will render the page just as it looked in IE6. That’s quirks mode.
So obviously it’s pretty important to have a doctype tag if you want your webpage to display in Standards mode, as expected. For instance, it’s mostly recommended to use this this code right before the <html> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Dustin Diaz at Google, taking into account the fact that “every byte matters”, chopped down the doctype to the following:
<!doctype html>
After using the huge ugly doctype declarations for years, I can see why someone would be skeptical that this simplified doctype achieves the same results. I was skeptical myself, so I tried it out. With the help of Browsershots and a little Javascript property called document.compatMode, I was able test out the doctype in various browsers.
The test I used: when a document is in Standards mode, document.compatMode is equal to ‘CSS1Compat’. Otherwise, the document is in quirks mode and document.compatMode is equal to ‘BackCompat’. I wrote a little script that simply tests for this property.
Ok! So does our shortened doctype actually force pages into Standards mode, as we hoped? Yes, for 100% of browsers I tested.
Based on my own tests and thanks to BrowserShots, I was able to see that all of the A-grade browsers are forced into Standards mode. That means IE 6.0 and 7.0, Firefox 2.x and 3.x, Opera 9.5x, and Safari 3.1x. That’s the majority of web browsers right there.
But the test also passed on other browsers. In my opinion, Google Chrome and IE 8.0 should both be A-grade by now, but aren’t officially listed as such by Yahoo (yet). But don’t worry, they both passed, as well as a host of other crazy browsers I’ve barely heard of or never heard of (mostly *nix-based): Navigator 9.0.0.5, Mozilla 1.7.8, SeaMonkey 2.0, Avant 11.7, Flock 2.0, K-Meleon 1.5.0, Epiphany 2.22, Galeon 2.0.6, Minefield 3.1, Iceape 1.1.10, Iceweasel 3.0.1, Shiretoko 3.1.
So did anything fail the test? Well, as it turns out, IE 5.5 and below don’t define the Javascript property document.compatMode. So they simply leave it undefined. In other words, they have no Quirks mode. They are the older browsers. For them, there is no Standards compliance mode.
That’s it. Nothing outright failed. It’s perfectly safe to use that simple doctype if you want Standards compliance mode.
Related:
Link to my test script
Simplified doctype now in use in Google search (view the source code)
(Ajaxian via Dustin Diaz’s blog)
Leave a Reply
Categories
- accessibility (1)
- browser bugs (2)
- css (6)
- html (6)
- javascript (10)
- jquery (4)
- performance (2)
- php (1)
- regular expressions (1)
- rss (3)
- seo (1)
- Site News (1)
- table (1)
- Uncategorized (4)
- videos (2)
- wordpress (1)
- xml (2)
- yui (0)
Subscribe to RSS
Haha. I forgoet to mention that we’ve ran all those tests before. But then again, I did prompt everyone to “try it out”
I’ll go ahead and link to your tests in the meantime.
best,
Dustin Diaz
[...] David was kind enough to share his results using the skinny doctype on his blog. The results, as expected, keep your browser [...]
@Dustin Diaz: Cool, thanks for the link! Yeah, I had a feeling the “skinny” doctype worked in common browsers but I was most interested to see how it would work in lesser-known browsers. Surprisingly well!
[...] If a webpage [...] has some sort of “transitional” doctype tag, the page will be rendered according to the previous version of the browser. [...]
@David: the above statement is not totally accurate. You may use a transitional DOCTYPE and have the browser render the page in “almost standards” mode — document.compatMode property yields ‘CSS1Compat’ but rendering of images inside table cells is effectively handled in “quirks” mode.
@Michaël Guitton: Ah, good catch. Hopefully people using the “skinny” doctype will be state-of-the-art enough not to use tables for layouts! But there might be legit cases of tabular data using images. I’ll have to run some further tests soon - I’ll be sure to credit you for the observation!
[...] All you need is <!doctype html> - David’s Web Development Blog <!doctype html> (tags: themaingate.net 2008 mes11 dia17 doctype HTML desenvolvimento_web) [...]
[...] Diaz explained Google are using <!doctype html> as their doctype to save on some bytes and David Calhoun proved that it is working across the browser board right now. Fine and in the case of Google or Yahoo this does make quite a difference. However, a DOCTYPE is [...]
Thanks for this sweet blog-in………………
Browser go in standard mode if you declare an unrecognized doctype. Fot this, <!doctype html> is not so small, you maybe declare <!doctype g>, is the same and more small.
Hi all,
I have designed a web page using table in which I have a problem
** In each row I have taken an input type as text and the below row’ height kept as 9px (<td height=”9px” colspan=”2″></td>, but when you look in IE7 it shows 11px where as in Mozilla FF it works fine. **
Please give me the solution for it.
Thanks in advance.