Monday, August 11, 2008

Quirks Mode Strikes Again

This Stuff Never Goes Away

The other day I was helping out a friend with a JavaScript driven control that animated a panel and did some show/hide behavior. The control itself was great, it painted a wonderful user interface and had very few dependencies (just a .js and a .css file).

When it came time to deploy however the panel wasn't rendering correctly. We started doing diff's of the .css and .js in production and they were literally the same as the styles and JavaScript used in development and stage, so why the difference?

Two Words

Quirks Mode.

Way back in the day during the midst of the browser wars, Netscape and Microsoft gave birth to arguably their worst browsers of all time (NN4 and IE4). Not in the sense that these companies had never done worse, but in the sense that they had never strayed so far from a W3C standard. As a result web developers started to do some pretty funky stuff with CSS to get documents to render in these browsers.

When standards compliance became a little more important browser manufacturers had some interesting choices to make. If they moved closer to the W3C standards they risked breaking a lot of sites, but if they kept down the track they were going, authoring a web site that leveraged any of the growing CSS features would become increasingly frustrating (and it was already pretty bad).

The solution was two fold.

  1. Allow web developers to specify a document type which would dictate the rules that should be used to render their html document. An example of a document type would be:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. If there's no document type available, or if the html that's given breaks the declared document type then render in the old way (quirks mode).

Because of the above quirks mode is slightly different on most browsers, mostly because there's no spec for quirks mode. There's a whole web site dedicated to Quirks Mode. You can also get a fuller story on Quirks Mode history here.

Back To Our Story

The short version of our story is that the document that our web application (SharePoint in this case) was handing out htmls that was breaking the doc type and because of this the page was rendering in quirks mode.

One of the worst things about Quirks Mode is that you can't always see it coming. If you download the Web Developer Tools extension, FireFox will tell you when a document is rendering in Quirks Mode, but IE is a little harder to catch.

Below is what FireFox will do to alert you to a document rendering in Quirks Mode (if you have the Web Developer extensions).HTML document rendering in Quirks Mode.

I've taken to putting the following JavaScript in a bookmark to check any given page in FireFox/IE.

javascript:var mode=document.compatMode,output;if(mode){if(mode=='BackCompat')output='quirks';else if(mode=='CSS1Compat')output='Standards';}else output='an unknown';alert('The document is being rendered in '+output+' mode.');

The above relies on the JavaScript document.compatMode proprietary property which is found in some but not all browsers. Safari for instance doesn't have this property.

So How do You Fix It?

When it comes to Quirks Mode you can really only do two things to get it back into Standards Compliance Mode.

  1. Ensure that there's a doc type at the beginning of the document and that you're familiar with the rules of that doc type.
  2. Ensure that the markup you're building up is compliant with the declared doc type.

When it comes time to troubleshooting and finding the delinquent html you can try SharePoint Designer or Visual Studio which will inspect a document and throw warnings when they find tags that break a document type that you can choose. That being said I've really yet to find a silver bullet for these issues. It's most frustrating when the markup is coming from a control or a page section that you don't even have control over!

Well at least we know WHY the document is rendering funny. Maybe that'll help someone sleep at night.

Hope That Helps,
Tyler

No comments: