Doctype and Quirk modes and HTML 5

StackOverflow https://stackoverflow.com/questions/19023897

Question

I am having quite a horrible time. We have a massive site that has no <DOCTYPE> and when I run it with IE10 it goes into quirks mode and after some CSS changes looks ok. As soon as I add echo "<!DOCTYPE HTML>";

The complete site looks terrible and the CSS is not looking as it suppose to. It turns the browser mode to IE10 and docmode to standard. Is there a way to keep HTML 5 functionality but use IE5 Quirks mode or just Quirks mode so the CSS will look correct?

Was it helpful?

Solution

No. The whole point of quirks mode is that it's a compatibility mode for IE5. This means that in addition to changing the layout mode, it also switches off most of the browser features that have been invented since IE5.

Therefore the blunt answer is no, you cannot mix Quirks mode and HTML5. It just can't happen.

However there is some good news for you: switching from quirks mode to standards mode is actually easier than it looks at first glance.

You don't have to go through your whole site changing all the CSS to suit the different box model, because standards mode does have a CSS feature that allows you to use the quirks mode box model while still remaining in standards mode.

Simply add the following to the top of your CSS code:

* {box-sizing:border-box;}

This will change all your elements to use the quirks mode box model, but your page will still be in standards mode.

This should sort out most (if not all) of the layout issues you've been having.

Hope that helps.

OTHER TIPS

No, there isn't. The modern engine that includes the new features and the engine for emulating ancient, buggier browsers are separate entities and you can't mix and match parts of them.

As far as browsers other than IE are considered, you can add tags and attributes introduced in HTML5, without using any <!DOCTYPE>. The page will not conform to HTML5 then, but this is just a formality as such. Browsers do what they do, interpreting tags and attributes as they have been programmed to. There is no “HTML5 mode” in browsers that you would need to trigger with a <!DOCTYPE> or otherwise. Just try it. Throw in some HTML5 novelties like <input type=email> or <details>, and you will see that they work if the browser supports them in the first place, no matter whether there is a <!DOCTYPE> or not.

You would then have difficulties when using a markup validator, but that’s a different issue.

Quirks Mode is a real mess, with dozens of undocumented and poorly documented phenomena. If a page works in Quirks Mode and you then make browsers render it in Standards Mode, literally anything may happen, ranging from no effect to total disaster. So such a change is usually pointlessly risky. Keep using Quirks Mode for old pages developed to use it, and create new pages to work in Standards Mode (and possibly to be HTML5 conformant).

Quirks Mode affects styling and to some extent scripting. It marginally affects the interpretation of some old HTML attributes. But in most browsers, not the way new HTML5 features work.

However, IE is particularly quirky. On IE 10, the above seems to apply. On IE 11 Preview, deviations have been reported. And on IE 9, some of HTML5 novelties that it would otherwise support are not supported in Quirks Mode, such as the canvas element. So if you intend to add substantial use of new HTML5 features to an old page that now works in Quirks Mode, you may need to consider changing the page to Standards Mode first. Depending on the impact of Quirks features, this might be best done by rewriting the page, or it might be “only” a matter of redesigning the use of CSS to conform to CSS specifications.

[Answer corrected Oct 15, 2013.]

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top