Barra de pesquisas do Google

Google

sábado, 1 de novembro de 2014

Doctype... The history behind Internet explorer issues

There’s a long history — and a black art — behind the doctype. While working on Internet Explorer 5 for Mac, the developers at Microsoft found themselves with a surprising problem. The upcoming version of their browser had improved its standards support so much, older pages no longer rendered properly. Or rather, they rendered properly (according to specifications), but people expected them to render improperly. The pages themselves had been authored based on the quirks of the dominant browsers of the day, primarily Netscape 4 and Internet Explorer 4. IE5/Mac was so advanced, it actually broke the web.
Microsoft came up with a novel solution. Before rendering a page, IE5/Mac looked at the “doctype,” which is typically the first line of the HTML source (even before the  element). Older pages (that relied on the rendering quirks of older browsers) generally didn’t have a doctype at all. IE5/Mac rendered these pages like older browsers did. In order to “activate” the new standards support, web page authors had to opt in, by supplying the right doctype before the  element.
This idea spread like wildfire, and soon all major browsers had two modes: “quirks mode” and “standards mode.” Of course, this being the web, things quickly got out of hand. When Mozilla tried to ship version 1.1 of their browser, they discovered that there were pages being rendered in “standards mode” that were actually relying on one specific quirk. Mozilla had just fixed its rendering engine to eliminate this quirk, and thousands of pages broke all at once. Thus was created — and I am not making this up — “almost standards mode.”
In his seminal work, Activating Browser Modes with Doctype, Henri Sivonen summarizes the different modes:
Quirks Mode
Standards Mode
Almost Standards Mode
In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.
In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”
Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.”
(You should read the rest of Henri’s article, because I’m simplifying immensely here. Even in IE5/Mac, there were a few older doctypes that didn’t count as far as opting into standards support. Over time, the list of quirks grew, and so did the list of doctypes that triggered “quirks mode.” The last time I tried to count, there were 5 doctypes that triggered “almost standards mode,” and 73 that triggered “quirks mode.” But I probably missed some, and I’m not even going to talk about the crazy things that Internet Explorer 8 does to switch between its four — four! — different rendering modes. Here’s a flowchart. Kill it. Kill it with fire.)
Now then. Where were we? Ah yes, the doctype:
That happens to be one of the 15 doctypes that trigger “standards mode” in all modern browsers. There is nothing wrong with it. If you like it, you can keep it. Or you can change it to the HTML5 doctype, which is shorter and sweeter and also triggers “standards mode” in all modern browsers.
This is the HTML5 doctype:
That’s it. Just 15 characters. It’s so easy, you can type it by hand and not screw it up.
Source: http://diveintohtml5.info/semantics.html#blank-space-gotcha

How Quirks mode works

A document is always set to one of three modes: 
  1. no-quirks mode, the default; 
  2. quirks mode, used typically for legacy documents; 
  3. limited-quirks mode. 
Unless stated otherwise, a document must be in no-quirks mode.

The mode is only ever changed from the default if the document is created by the HTML parser, based on the presence, absence, or value of the DOCTYPE string. [HTML]

No-quirks mode was originally known as "standards mode" and limited-quirks mode was once known as "almost standards mode". They have been renamed because their details are now defined by standards. (And because Ian Hickson vetoed their original names on the basis that they are nonsensical.)




Quirks Mode
In the Quirks mode, browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s.

Standards Mode
In the Standards mode, browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser. HTML5 calls this mode the “no quirks mode.”

Almost Standards Mode
Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “Almost Standards mode,” that implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. HTML5 calls this mode the “limited quirks mode.”

Possible Impacts:
There are several effects that most browsers use in Quirks Mode:
  • In some browsers, the box model changes to the IE 5.5 version of the box model in quirks mode.
  • Some browsers don't inherit styles into tables
  • Quirks mode affects the parsing of CSS and CSS layout dramatically, if you are converting pages to standards mode from quirks mode, be sure to test your CSS layout and parsing extensively.
  • Watch for changes to scripting when in quirks mode. Firefox changes the way the id-attribute works, for example. IE8 and IE9 have very dramatic changes to scripting in quirks mode.

These information are the result of a study I made while working in a legacy product, to understand the behavior why the browser was running under quirks/compatibility mode and find the best solution, considering possible impacts... I strongly recommend to use the latest doctype declaration (i.e. for HTML5) and replace deprecated CSS styles for the html5 equivalent ones).

References:

Sign by Dealighted - Coupons & Discount Shopping