Doctypes and CSS Support
A "Doctype" or to give its full name "Document Type Declaration" (DTD) should be the first line of your HTML document, right before the opening <html> tag. No white space no comments no nothing else should appear before it.
Should I use One?
Absolutely, if you don't the page will go into into "Quirks Rendering" mode also called "compatibility mode" - that's BACKWARDS compatibility - which is probably the biggest source of "Why does my site look different in [insert non-ie browser name here]? queries on many forums.
recommended reading: FAQ: Choosing the best doctype for your site [webmasterworld.com]
|Highlighted point from above post |
|Important note: the doctype should always be placed on the very first line of the document, with no comments, white space or XML prolog preceding it. This is so that Internet Explorer 6 can select the correct rendering mode. |
The xml prolog triggers Quirks Mode even when used with a Standards Compliant Doctype - this is bug in IE6 - please be aware when choosing your Doctype
You'll see from that great post that you can choose to use a 'quirky' Doctype - but at the very least you should know that you are and why you are, and be aware of it's limitations if CSS Support is important for your pages - Be Informed! ;)
What is "Quirks Mode"?
Quirks Mode vs. Standards Mode - overview [webmasterworld.com]
Why is this post in the CSS Forum?
because I'm constantly surprised with the amount of CSS rendering questions that start out differently but all lead to the same answer? :o
Seriously as far as CSS is concerned the biggest reason to
a: have one
b: choose a Standards Compliant Rendering one
is IE's CSS support!
IE's CSS support has a notoriously bad reputation but actually it has been improving since IE6 and with IE7 out now it's becoming more apparent, likely because IE still has the largest market share and CSS has become more mainstream.
Standards Compliant Mode
Standards Compliant Mode is sometimes called "Strict rendering Mode" but that should not be confused with the actual word 'strict' in some of the Doctypes.
The word 'strict' in the actual Doctypes relates to the different benchmarks of W3C (X)HTML validation.
All you might be concerned about as far your CSS is concerned is whether your page is in [backwards] Compatibility mode or Standards Compliant mode, you can choose either and still have a "transitional" or "strict" Doctype
The Doctype Switch choice
IE introduced the Doctype Switch [msdn2.microsoft.com] when IE6 came out, this meant that not only did it help to bring a standard (actually getting authors to use a Doctype in the first place!) into the mainstream, they gave IE developers a way to choose whether they wanted their applications to be backwards compatible or not.
What the Doctype Switch means for CSS
What it meant and still means for CSS is that any improvements or enhancements are only available in pages that are in Standards Compliant mode CSS support wasn't necessary for backwards compatibility - the "switch" simply gave Microsoft a junction where they could keep backwards compatibility for applications for a while and then move on.
in short Authors had a choice.
That choice has lead to three apparent camps imo.
1. Those who don't care about other browsers as long as it works in IE - they will be in quirks mode (unwittingly or otherwise) - they might ask "why does [insert CSS Property] not work when it should?"
2. Those who do care about other browsers now but don't use a doctype or use a 'quirky' one because their editor produces it or because the pages where orginally built to be backwards compatible - their pages will possibly have lots of different IE workarounds in order to keep the "good" as well the "bad" IE's under control - They may ask about hacks to fix for other browsers
3. Those who are using a Strict Doctype and are aware that the need for backwards compatibility has been diminishing over the past 5 years or so. - Their CSS workarounds will be minimal, if any at all! and could be possibly even be in a separate file, already forgotten about - their pages are in the right place to enjoy the benefits of IE's improved CSS support :)
Have the Goalposts moved for you?
Group 2 are the ones on the cusp and the ones who possibly don't even realise that not only can a change in Doctype bring added benefits in CSS support, in all likely hood they will reduce the amount of workarounds they are using at present!
Way back when, there may have been compelling reasons for choosing "Quirks Mode" as backwards compatibility was a larger issue. Nowadays with the WEB moving forward at its rapid pace - Is better, more consistent CSS support helping to tip the balance in the Doctype choice?
If CSS Support is important for your documents - they need a Standards Compliant Doctype!
Go on pamper them ;)
the following are all examples of Standards Compliant Doctypes - see encyclo's post [webmasterworld.com] again for help with your choice and how to make them into Compatible (quirky) ones!
|<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
|<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" |
|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" |