The Cross-Browser Compatibility Guide – How to Choose The Right DOCTYPE

The Cross-Browser Compatibility Guide – How to Choose The Right DOCTYPE
The DOCTYPE comes first
The first element in every of your HTML pages should always be the DOCTYPE declaration. There are various DOCTYPES out there, but most of them are obsolete today. An example of the current HTML5 DOCTPYE:
<!DOCTYPE html>
and an older HTML 4 DOCTYPE:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>
Why bother?
Nearly all modern browsers know two (or more) rendering modes: Standards and Quirks mode. The DOCTYPE helps the browser to decide which rendering mode to use.
The Quirks mode
In Quirksmode the browser tries to render your page based on old web standards or no standards at all. The Quirks mode is used to display old and legacy web pages and should be avoided nowadays. If the browser renders in Quirks mode you will see some weird CSS and JavaScript effects as well as different (and wrong) BOX-Model calculations.
The Standards mode
In standards mode the browser renders the web page according to current web standards. You can prevent many cross-browser compatibility problems by simply enabling the standards mode in all browsers.
How to get into Standards mode
The browser switches between quirks and standards mode based on (or the lack of) the DOCTYPE. To choose the right DOCTYPE for your page or application can be tricky but I’ll try to explain how you get there.
<!DOCTYPE html>
This is the current HTML5 DOCTYPE. If you want to support all the latest browsers and need to use HTML5 features (like <video>, <audio> and <canvas>) you should use this DOCTYPE.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>
This DOCTYPE triggers the standards mode in all browsers but doesn’t validate new HTML5 features. If you have a valid reason to validate with HTML 4 and don’t plan to use any new feature you can stick to this DOCTYPE.
No DOCTYPE
In nearly every case this is a very bad idea. This will always come back to hunt you (or your coworkers) if you ever plan to switch to a current DOCTYPE (and you will).
The Internet Explorer compatibility modes
So why not just use the HTML 5 DOCTYPE and be done with it? Unfortunately, the Internet Explorer knows more than standards and quirks mode. The Internet Explorer is capable of simulating older versions (also known as compatibility modes). You can toggle these modes by using an X-UA-Compatible HTTP header or meta tag. If you don’t, Internet Explorer 8 and 9 let the user drop there and render to Internet Explorer 7 mode – even if you have declared a proper DOCTYPE. And believe me: The users will blame your web page, not their browser.
Which X-UA-Compatible header/meta tag?
There are 3 possibilities:
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
This meta tag (or similar HTTP header) tells the Internet Explorer to render with the most current engine. Moreover, the user is not allowed to pick an older version.
<meta http-equiv=X-UA-Compatible content="IE=Edge;chrome=1">
This meta tag (or similar HTTP header) adds Chrome Frame.
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8”>
This meta tag (or similar HTTP header) renders the page in Internet Explorer 8 mode.
Now tell me: What should I use?
If you are building a new website I would strongly recommend the use of the current HTML5 DOCTYPE
<!DOCTYPE html>
and the meta tag
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge”>
to toggle the standards mode in every browser. If you have control over the hosting environment you should use the HTTP header instead of the meta tag (the meta tag will not validate as HTML 5 and thus your page will fail validation if you include it).
Photo by Steven Guzzardi
