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.
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
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