First step in throwing your XHTML document into Quirks Mode

Thursday, December 31st, 2009

A lot of websites pursue XHTML as their document type, which is really cool. But a lot of them end up not validating with one little mistake. Even worse, with this mistake, documents that are made to run in “standards mode” are immediately thrown into quirks mode by browsers because web developers don’t know how to do their jobs.

If you want to author XHTML documents, your DOCTYPE declaration must start on the first character of the first line of the source code. No leading spaces or line breaks.

My favorite is how ASP.NET breaks this by following their practices. Take the example from Wikipedia (which I’ve seen used elsewhere as well):

<%@ Page Language="C#" %>   
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

This causes developers to insert 2 line breaks before the DOCTYPE, which is unacceptable if you want to comply with standards.

Because my weapon of choice is CFML, here’s how I handle this situation using <cfsetting> and <cfoutput> tags in my layout files:

<cfsetting enablecfoutputonly="true">
 
<cfparam name="layout.title" type="string">
<cfparam name="otherParams" default="here">
 
<cfset variablesThatNeedSet = "here">
 
<cfoutput><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>#layout.title#</title>
...
</head>
 
</cfoutput>
 
<cfsetting enablecfoutputonly="false">

Because ColdFusion suppresses output until the opening <cfoutput> tag, the DOCTYPE will appear on the first character of the first line, right where it belongs. And browsers will treat the document as standards compliant, not in quirks mode.

Technorati Tags: , , , , , , , , , , , , ,

This entry is filed under Career & Lifestyle, ColdFusion, Design & CSS, Programming. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “First step in throwing your XHTML document into Quirks Mode”

  1. Tony Garcia Says:
    December 31st, 2009 at 11:52 am

    Good tip! Another method is to use <cfsilent> and/or <cfcontent reset=”true”>. See

    http://www.bennadel.com/blog/369-CFSilent-vs-CFContent-Reset-True.htm

  2. Chris Peters Says:
    December 31st, 2009 at 4:40 pm

    Aha, I wasn’t aware of the <cfcontent reset=”true”> tip. Thanks for dropping a note Tony!

  3. freelance web developer Says:
    December 31st, 2009 at 9:05 pm

    Are you sure about this? Here is an example with two line break above the doctype and the page is rendering in SCM.
    https://www.tat-co.com/
    From my experience, you need more than just white space above the doctype to get it into QM. A HTML comment will do. I like to use <!– Ah, Fooey –>
    - Jules
    PS – kudos for using tinMCE!

  4. Chris Peters Says:
    January 6th, 2010 at 11:40 am

    Maybe I was going a bit overboard with the Quirks Mode thing. I thought it was true at least with older browsers.

    Either way, I think my point about not validating still rests. :)

  5. Grant Copley Says:
    January 20th, 2010 at 11:50 am

    For those that may not already know,the  W3c Markup Validation Service is a great tool you can use to validate your documents and make sure they are correct. It’s free and gives you the ability to enter in a page URL, upload a file, or direct input of your code.

    The link:
    http://validator.w3.org/

  6. Chris Peters Says:
    January 21st, 2010 at 8:20 pm

    Aye. And the Web Developer Toolbar for Firefox gives you a bookmarklet for running the current webpage that you’re looking at through the W3C validator in another tab.

Leave a Reply