Example of quirks rendering mode

Example of quirks rendering mode

Way back when we were putting square pegs into square holes, everything worked well.  Then one day the keeper of the holes into which the square pegs were placed realized the holes were made incorrectly and were not conforming to specific standards. To remedy this situation and ensure holes and pegs would work far into the future, the keeper made a new set of holes. Unfortunately, the pegs wouldn’t fit, because they, too, were not conforming to the same specific standards. Since these pegs were very popular, by peg standards, the keeper was forced to create a way for the square pegs to fit into the now round holes.

This is a really simple explanation for the existence of “Almost Standards Mode.” In reality, the pegs were web pages and the holes were browsers. In 2002, Netscape was ready to release a new version of their browser which would render HTML more closely to W3C standards. Conforming to standards is good – it ensures more universal access to the web. However, in testing, Netscape discovered sites whose design was based on images inside tables would be utterly broken, and that was a large portion of the web.

Example of standards rendering mode without table border

Example of standards rendering mode without table border

To illustrate how the pages were broken, let’s look at some before and after examples. I’m using screenshots of a page created using tables for layout purposes. I’ve mentioned previously that I have made pages using tables for design, and it’s true. So did most everyone else at the time.

The example page I’m using is similar to a file I used to teach table creation in Dreamweaver 4. The source code has no DOCTYPE defined. This was in 2000, before DOCTYPEs were universal. I have added a 1 pixel border to the table to make it easier to see what’s going on. In actual use, god forbid, this would appear as a seamless picture.

The first image shows the page with without a DOCTYPE specified. With no DOCTYPE specified, the browser automatically renders the page in Quirks mode. This means that non-standards compliant HTML will render properly. The images in the table will be displayed without any white space around them because the table cells automatically shrink to fit the images.

The second image shows the same page with a DOCTYPE of HTML 4.01 STRICT in place, which results in standards-based rendering. Standards-based rendering means that the images will sit on the text baseline by default resulting in white space below the images inside the cells. (You can read a well-supported explanation of that here.) For pages which rely on sliced images butting up against each other to create a seamless picture, this creates an utterly broken page. In the example, you can see there’s a beautiful white line in the middle of the picture. The third image shows the table border displayed again and the white space in each cell.

Example of standards rendering mode

Example of standards rendering mode

Eric Meyer is the hero who saved the day by creating Almost Standards Mode and has a lovely, detailed post about how the new mode came about here. And, this page has a great explanation of how and why to implement the different modes.

So, what’s the upshot of all this? Use round pegs from now on and you’ll not have to worry about it. But, when someone comes to you with an antiquated square peg, you’ll know what to do.

Advertisements