I was on vacation without access to my good friend Internet Explorer, and I threw together a pretty complete web app. When I got home, I was surprised and encouraged to see that my site was working in IE... until I threw in any sort of valid doctype. I know it isn't best practice to throw browsers into quirks mode, or it wouldn't be called quirks mode, but I guess my question is... what are the practical ramifications of having a 'quirks mode' site? Is it necessary or even worth it to painstakingly slave away to correct the issues of which I am yet unaware, or can I leave it as is, functioning cross browser? Thanks.
If your site renders wrong in standards mode, but correct in quirks mode, chances are it's errornous. Some current browsers may fix your mistakes even in standard mode, but you have no idea about what future browsers will do with it. With standards mode, you can be absolutely sure that a valid site that looks fine in modern browsers will show up correctly.
Browsers are more interoperable, i.e., have the same behavior as each other, in the no-quirks mode compared to the quirks mode. The no-quirks mode is what most Web standards people and browser developers care about and consider and test. So it's more likely that you run into differences between browsers in quirks mode.
For example, in quirks mode, the body fills the viewport in WebKit/Blink, but does not in Gecko (I'm not sure about Edge). In no-quirks mode, body height works the same in all browsers.
(There's one counter-example, though, where browsers agree in quirks mode but not in no-quirks mode: body being the "viewport scrolling element" for scrollTop etc.)
Some versions of IE (8 and 9?) deliberately had less features in their quirks modes (e.g. the canvas element). So if you care about IE and want to be able to use the features IE actually supports, just not in quirks mode, then that would be another reason to not use quirks mode.
Finally, and maybe obviously, you're likely to run into more "weird" behavior that is the quirks themselves, like color and some other stuff not inheriting into table elements, that top and bottom margins collapse more, IDs and classes being case-insensitive, and so on.
Declaring a proper doctype is technically required for HTML validation by W3; however, lots of people leave their code un-doctyped for browsers to use Quirks mode instead. I've done this many times and it usually works out fine; however, you run the risk of browsers not interpreting your code correctly.
In other words, the cross-browser functionality you speak of could very easily break down into cross-browser hell without valid doctype declarations.
A.k.a., it's up to you as to how robust your site needs to be.
Quirks mode typically is the browsers attempt at fixing your errors in order to render correctly, however it's important to remember that if your site renders in standards compliant mode it will likely render ok with future browsers (at least for the time being).
Related
IE6/7 don't support "box-sizing: border-box" but they render all boxes as a "border-box" on quirks mode.
And I need a css grid(like in bootstrap.css) based on the border-box model which can run in 6/7.
Could any one tell a way to switch to quirks mode ONLY on IE6/7 (doesn't affect IE8 or higher)? Thanks!
Dont provide a doctype and they should switch into quirks mode - if you make it conditional you can screen out those browsers you don't want targeted.
That said, I would strongly recommend you look for a solution which doesn't require this approach.
I'd also recommend giving this article a read, as well as this one
Quote:
Old pages written before (or in spite of) the standardization wave
don’t have a doctype. Therefore ’no doctype’ would mean quirks mode:
show according to old rules.
Contrarily, if the web developer was savvy enough to include a
doctype, he probably knew what he was doing. Therefore most doctypes
trigger strict mode: show according to pure standards.
Any new or unknown doctype triggers strict mode.
The problem was that some pages written in quirks mode did have
doctypes. Therefore each browser has its own list with doctypes that
trigger quirks mode.
Please don't think that Quirks mode is a viable solution here. It does a lot more than simply changing the box model. It switches off a whole range of browser features, and has a number of other changes to rendering as well. It will also make it incredibly difficult to make your site work accurately across different browsers, particularly since we're talking about older IE's here.
My suggested alternative would be to use a polyfill for the border-box feature. There are a number of them available, and they would allow you to use border-box as regular CSS even in IE6. You can find a list of several of them here. Try them out, and pick one that works for you. Problem solved.
Note: I have to be honest here: I've never actually had any need to use these polyfills, but if they're listed on Modernizr's polyfill list, it's probably a pretty safe to say they do the job.
I've created a form that is dynamically created with JavaScript and is added in another website using the <script> tag.
The doctype used by this other website is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> which uses the quirks mode.
I've built my form by taking this in consideration and everything is working as expected in Chrome, Firefox and IE 10. However, when I test it in IE 9 and earlier, the form is not displayed at all. When I open the developper tools, I can see that IE 10 uses the new quirks mode but IE 9 and earlier uses the IE5 Quirks mode.
I was wondering if the new quirks mode can be used to display this page when using IE 9 and earlier. If this is not possible, I would like to force standard mode but only when using IE 9 or earlier and keep using quirks for every other browser.
I can't use the html5 doctype since their website is built with quirks mode instead of standards and their design is all broken when I use this doctype.
You cannot change the mode once the page is loaded. And you cannot change it programmatically. The only way to force a page into quirks mode is to load it without a valid doctype or with serious bugs in the HTML.
If you have a doctype, but your page is still loading in quirks mode, then it means that you have serious bugs in your HTML. This will give you bigger problems than just being in quirks mode. You should definitely fix those bugs. If you really want to be in quirks mode, drop the doctype, but you should really try not to have HTML code that is so bad it triggers quirks mode even with a doctype!
You can validate your HTML to find those bugs by using the W3C validator.
In terms of switching your page at runtime between IE10's two different quirks modes, the simple answer is that you can't do that.
Sorry about that.
However, to be honest, it's probably for the best. Using quirks mode is be a complete disaster anyway. It doesn't just change the layout mode; it also switches off most of the browser's features (ie pretty much everything invented since 1998).
But now for the good news:
Luckily, switching away from Quirks mode is a lot easier than you think.
The main layout issue (the different box model) can be fixed by adding the following to the top of your CSS:
*{box-sizing:border-box;}
This is the standards-compliant way to set the box model to the quirks-mode style layout. Most of the broken layout problems cause by switching from quirks mode to standards mode can be resolved with this simple CSS style.
There are other quirks, but they're relatively minor and shouldn't be too hard to deal with once you've fixed the main issue. A lot of them are actually not quirks mode issues, but bugs in older IE versions that the original coder may have had to hack his way around. There's no guarantee that these will continue working the same in future versions anyway, even if you do stick to quirks mode, so you would be best off fixing them now anyway.
So, to summarise:
Fix your page so it loads in standards mode. Valid doctype and valid HTML.
Use box-sizing to mitigate the main layout gremlins caused by the switch.
Fix the remaining layout issues manually.
It's really a lot less work than it sounds. Honest.
With all the latest browsers like IE9, FF4, ever updating chrome, etc., do we still need quirks mode?
If yes where is it useful? In which scenario?
Quirks mode is designed to allow (much) older websites to work in (comparatively) newer browsers.
New development should never be done in Quirks Mode, but Quirks Mode will stick around as long as there are still old un-updated websites that require it (ie, forever).
No. You should never use quirks mode. It ceased to be of any relevance once IE 5.0 and 5.5 stopped being used.
Those were the last browsers which did not support standards mode, so any sites which needed to include support for them would have needed to be able to work in quirks mode.
However, IE6 along with all versions of all browsers released since then supports standards mode.
Some of them still carry legacy support for quirks mode, but you shouldn't allow them to use it. (it's triggered if you neglect to include a <!DOCTYPE> at the top of your HTML code, which is why you shold always declare a doctype)
In the unlikely event that you need to support IE5, then use quirks mode. Otherwise, avoid at all costs.
If you are maintaining code that uses quirks mode then you should take the time to convert to use standards mode.
If it's a public-facing website, then using quirks mode now should not even be contemplated, as it will look hideous in a lot of modern browsers. Even if it's in a corporate environment then you I would strongly reccommend converting it to standards mode, as even IE6 users will benefit from that (if nothing else, it'll make their eventual upgrade to a newer browser less painful). The only time you won't be able to use standards mode that is if you have a client who is still stuck with IE5. But if you've got that, then you should have run away screaming already.
Quirks mode is definitely still needed in corporate environments where legacy applications are very common. That old 1998 webapp still works and we don't have money to replace it so it has to keep working.
I am working on a project which requires IE6 compatibility. Unfortunately, IE6 and IE7 do not support standards mode. Because of this, I am tempted target almost standards in for all browsers and just ignore standards mode completely, so that I am only targeting browsers running in the same standards mode. I figure that because XHTML transitional is so popular, almost standards most is guaranteed to be supported for a long time to come. Is this a good idea?
No, this is not a good idea.
Its not a good idea because eventually IE6 will be obsolete (sooner rather than later) and you will have a messed up site where you have to jump through hoops to get it to look halfway decent.
A better solution is to use progressive enhancement, in a nutshell support the minimum you need for IE6 and give the modern standards following browsers the goodies.
With progressive enhancement you still get your support for IE6 but you're left with a standards based website that is easier to maintain and develop further.
Using "almost standards" mode is dumbing down other browsers for the sake of IE. IE6/7 doesn't support a standards mode because it's incompetent. You should never write markup aiming at incompetence. Write modern markup with a strict doctype and use "conditional comments" to hack and beat IE into the best compliance you can get out of that thing or you will be doomed to a world of darkness and hurt.
Roughly 40% of the user base of my company's software uses IE6 (down from ~60% a couple years ago).
Our master pages have the XHTML 1.1 doctype set. I do all my design work using the latest version of Firefox and then once I have it all working how I want, I test in IE6 using the App Compatibility VMs for Virtual PC that MS releases, and make any necessary changes to my CSS that IE6 requires.
Most of the time I can just use slightly different CSS and don't have to resort to hacks, although sometimes I still do. But the hacks don't affect other browsers, since they're IE6 specific. I haven't gone to the length of using browser-specific CSS files yet, cause the extent of my IE6 hacks are something on the order of 10 lines out of ~1500 lines of CSS. My modified CSS to "support" IE6 still renders fully standards-compliant in Firefox.
EDIT: thanks to Rob's comment I'll be changing my doctype to "HTML 4.01 Strict with system identifier" (provided testing shows that it doesn't break anything). That Quirks Mode chart on Wikipedia shows my current doctype (XHTML 1.1 with system identifier and without XML declaration) results in the same render modes.
Everything I said above still applies, though. I code for standards-compliance in the latest version of Firefox (the Web Developer add-on is my friend) and then "make IE work" without breaking standards-compliance in Firefox.
I'm working with a Web Application and it's currently rendering in Quirks Mode. My feeling is that we should change this to use Standards Mode.
If were make this change there will be some pain in the short term as I would expect some of the pages that currently render fine in Quirks mode will need tweaking to show properly in Standards mode. If I'm going to do persuade other people this work there will need to be some benefits too.
Whilst easier page layout would be nice I'm not sure it would be enough on its own - as most the design for the app is done - so I was wondering if Standards mode offers any other more immediate benefits. Do pages render quicker? Will the browser use less memory? Anything else?
For what it's worth this application is used almost exclusively on IE6/7/8 but I'd be interested to hear how this applies to other browsers too.
Here are the benefits to standards mode:
1) Correct and accurate code is easier to maintain among a group of developers.
2) Standards mode produces a more reliable rendering of the content, which is important for cross user-agent compliance with regard to assistive technologies.
3) Code that is uniform and valid is easier for accessibility concerns.
4) Your code will have a far longer lifespan without conflict to future changes in the specification.
To add to austin's comment, there's a pretty good read over here about the differing modes: CSS - Quirks mode and strict mode
Yes, some of your markup will probably no longer be valid once you transition to standards mode. Developing under quirks mode targets older browsers that were programmed before CSS was accepted by Netscape and IE.
Since most browsers today are capable of rendering the W3C standards, I'd recommend targeting that as your goto mode. Sure it will be slightly painful now, but in the long run it is well worth it.
I don't know about your user base, but allowing the use of non-IE browsers - that count for over 35% of the global market - will surely please some of your customers. Using quirks mode almost forces your users to stick to IE.
At some point (probably in the distant future, though) IE will drop quirks mode, then you'll have to recode anyway. Better to do it now before your code grows beyond repair. Switching to a strict doctype now will save you development time as soon as you fix the initial problems.
I'd suggest trying the strict doctype and seeing what happens, and how broken the design is. Remember, the HTML doesn't have to be valid for strict mode to work. Font tags and alignment elements/attributes work fine in strict mode, though you should gradually phase them out and replace with CSS.