As any web designer will know, there are differences between the implementations of CSS accross browser platforms. Before 2000, when the browser wars were in full swing, browsers didn’t adhere to standards very well. Internet Explorer 4 implemented CSS to some degree, and Netscape 4 tried but failed miserably.
However, a lot of webpages were built to take account of these broken standards. As the push for standards compliance started to occur, someone realised that all of these older webpages would break in new standards compliant browsers. To get around this, all browsers have this thing built into them called ‘Quirks Mode’. Quirks mode renders a page including all of these incomplete CSS implementations. Standards mode displays everything correctly.
The way to get a browser to render something in quirks mode or standards mode is through the DOCTYPE declaration. This is the thing that goes before your HTML tag and looks a little like this: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>. We need to ensure that every page we create will be displayed in standards mode. As web designers it’s important that we know that our pages are going to be displayed consistently between broswers. Standards mode is the easiest way to do this.
Doctypes
If you want HTML 4.01, then use the following doctypes:
Strict: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
Transitional: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
Frameset: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>
If you want to use XHTML 1.0, use the following doctypes:
Strict: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
Transitional: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
Frameset: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>
Important notes
With XHTML, you must ensure that you don’t include the XML declaration before the doctype, unless you absolutely have to. There is a bug in Internet Explorer 6 that causes it to revert to quirks mode when the doctype isn’t first.
Annoyingly, Konquerer will not display in standards mode at all for any Transitional doctype. As Konquerer accounts for only 0.01%1 of browser usage, I’d not lose any sleep over it though.
Sources
1: http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
2: http://www.quirksmode.org/css/quirksmode.html
