[dev] The importance of DocType and Browser Modes

[dev] The importance of DocType and Browser Modes

dev the importance of doctype

DocTypes are very important for your HTML document, its the first line of code which is read by the browser and this determines the structure of the page. If you choose the incorrect DocType, this can have a negative effect on different browsers and the layout of the site.

Choosing a DocType

Standards mode, cutting edge validation

<!DOCTYPE html>

This is what you should use. With this doctype, you can validate new features such as <video>, <canvas> and ARIA. Please be sure to test your page in the latest versions of the top browsers.
Standards mode, legacy validation target

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

This doctype also triggers the Standards mode, but lets you stick to less precise legacy validation that doesn’t know about new features in case your organization has silly policies that require targeting legacy validation. But you really should be using <!DOCTYPE html> and get the policies of your organization revised.

You’d like to use the Standards mode, but you use sliced images in table layouts and don’t want to fix them

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

This gives you the Almost Standards mode. Please note that your layouts based on sliced images in tables are likely to break if you later move to HTML5 (and, hence, the full Standards mode), so it’s better to make your designs Standards mode-compatible right now.

You willfully want the Quirks mode

No doctype.

Please don’t do this. Willfully designing for the Quirks mode will come and haunt you, your coworkers or your successors in the future.

If you frustrated by the differences between old IE versions and still need to support them due to client requirements, it is better to apply specific hacks for legacy versions using conditional comments than seek commonality in the Quirks mode.

I am not recommending any of the XHTML doctypes, because serving XHTML as text/html is considered harmful. If you choose to use an XHTML doctype anyway, please note that the XML declaration makes IE 6 (but not IE 7!) trigger the Quirks mode.

Source: http://hsivonen.iki.fi/doctype/

IE Complictations

There is a neat trick to force the IE behaviour to emulate that of another version of IE. This is very useful if the IE version is not behaving like the previous version. You can use the following META Tags to define the behaviour.

Your domain is not on Microsoft’s blacklist and you care more about not having to have browser-specific cruft than about making sure users can’t regress the rendering to IE7 behavior.

You don’t need to include an X-UA-Compatible HTTP header or meta tag.

Your domain is on Microsoft’s blacklist, your domain (like iki.fi!) has other authors whose broken sites may induce users to enable Compatibility View for the whole domain, you are concerned about Google or Digg framing your site or you want to make sure users cannot enable the Compatibility View

Include either the following meta element (which in invalid in HTML5) on your page <meta http-equiv="X-UA-Compatible" content="IE=Edge"> (before any script elements!) or set the following HTTP header on your page: X-UA-Compatible: IE=Edge

Your site worked in IE7 but breaks in IE8 or IE9

First, include either the following meta element (which in invalid in HTML5) on your page <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> (before any script elements!) or set the following HTTP header on your page: X-UA-Compatible: IE=EmulateIE7

Then fix your site not to rely on non-standard IE7 behaviors and migrate to IE=Edge.

Your site worked in IE8 but breaks in IE9

First, include either the following meta element (which in invalid in HTML5) on your page <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> (before any script elements!) or set the following HTTP header on your page: X-UA-Compatible: IE=EmulateIE8

Then fix your site not to rely on non-standard IE8 behaviors and migrate to IE=Edge.

Your site worked in IE9 but breaks in IE10

First, include either the following meta element (which in invalid in HTML5) on your page <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> (before any script elements!) or set the following HTTP header on your page: X-UA-Compatible: IE=EmulateIE9

Then fix your site not to rely on non-standard IE8 behaviors and migrate to IE=Edge.

For further information on this resource you can consult the following website: http://hsivonen.iki.fi/doctype/