Quirks mode in browsers

Have you heard of the quirks mode in web browsers? Well I had not until a couple days back when I ran into an issue of a CSS not rendering properly in a web page I was working on.

When I made a request for the page and opened Firebug, I could see requests for the CSS files, and I could also see that they were being properly downloaded. In Firebug's CSS view, I could see that all the CSS classes which I was expecting to be applied were showing up. So, what then was the problem. By pure chance I discovered that only elements from the CSS class were being applied. All inherited elements were not being applied. I also discovered by chance that the tag in the webpage caused this behaviour. If I added a DOCTYPE, everything would render perfectly, but if I removed the DOCTYPE, then inherited CSS elements would not get rendered. Now why would that happen?

I decided to Google a bit, and found out that browsers have a quirks mode which is triggered by the absense of the DOCTYPE in the html page.

To explain very breifly, old browsers did not confirm to W3C standards for HTML as well as CSS. As a result there were a lot of (non compliant) web pages which were rendered by these browsers. Now, when browsers did start complying to web stadards, there was a problem. All these pages which were rendering perfectly would stop rendering. To resolve this issue, browsers decided to have a backwards compatibility mode, which they called the quirks mode. When this mode was triggered, the new (W3C compliant) browser would fall back to old behaviour. Now the question was, what in a web page should trigger the quirks mode in a browser? Browser makers decided to use the DOCTYPE element. So, if the DOCTYPE was present then the browser would funciton in regular mode, whereas if the DOCTYPE was not present, it would function in quirks mode.

For more information on the quirks mode, check out this article on quirksmode.org and the Wikipedia article on quirks mode.

Comments

Five Reasons Why Your Product Needs an Awesome User Guide

Photo Credit: Peter Merholz ( Creative Commons 2.0 SA License ) A user guide is essentially a book-length document containing instructions for installing, using or troubleshooting a hardware or software product. A user guide can be very brief - for example, only 10 or 20 pages or it can be a full-length book of 200 pages or more. -- prismnet.com As engineers, we give a lot of importance to product design, architecture, code quality, and UX. However, when it comes to the user manual, we often only manage to pay lip service. This is not good. A usable manual is as important as usable software because it is the first line of help for the user and the first line of customer service for the organization. Any organization that prides itself on great customer service must have an awesome user manual for the product. In the spirit of listicles - here are at least five reasons why you should have an awesome user manual! Enhance User Satisfaction In my fourteen years as a

Inheritance vs. composition depending on how much is same and how much differs

I am reading the excellent Django book right now. In the 4th chapter on Django templates , there is an example of includes and inheritance in Django templates. Without going into details about Django templates, the include is very similar to composition where we can include the text of another template for evaluation. Inheritance in Django templates works in a way similar to object inheritance. Django templates can specify certain blocks which can be redefined in subtemplates. The subtemplates use the rest of the parent template as is. Now we have all learned that inheritance is used when we have a is-a relationship between classes, and composition is used when we have a contains-a relationship. This is absolutely right, but while reading about Django templates, I just realized another pattern in these relationships. This is really simple and perhaps many of you may have already have had this insight... We use inheritance when we want to allow reuse of the bulk of one object in other

Planning a User Guide - Part 3/5 - Co-ordinate the Team

Photo by Helloquence on Unsplash This is the third post in a series of five posts on how to plan a user guide. In the first post , I wrote about how to conduct an audience analysis and the second post discussed how to define the overall scope of the manual. Once the overall scope of the user guide is defined, the next step is to coordinate the team that will work on creating the manual. A typical team will consist of the following roles. Many of these roles will be fulfilled by freelancers since they are one-off or intermittent work engagements. At the end of the article, I have provided a list of websites where you can find good freelancers. Creative Artist You'll need to work with a creative artist to design the cover page and any other images for the user guide. Most small to mid-sized companies don't have a dedicated creative artist on their rolls. But that's not a problem. There are several freelancing websites where you can work with great creative ar

Adaptive Software Solutions

Search This Blog