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.
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 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).
We have a site that works fine with any latest browser including ie8.
But it has lots of issues with ie6, ie7 and ie8(Compatibility mode).
We are using following doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
So it is not using quirck mode.
Before i start digging into individual issues, just want to known if i am missing something or doing something wrong to go ie in some different mode other than standard?
I tried to find list of known issues with ie6 and ie7 when using w3c standards but didn't find much useful, but found just enough to confuse me.
Any known site where i can find known issues with old ie's when using w3c standards?
By specifying what type of HTML document you are using at the top of your document you are taking the browser out of quirks mode. Now, the newer browsers are much more standards compliant and therefore easier to code with. Here are some tips that might help you out:
Use DIV instead of TABLE for layout
Watch out for Document Object Model or DOM differences between browsers
Here is a site with CSS compatibility info: http://www.quirksmode.org/css/contents.html
Run your code through W3C's Validator
Instead of W3C's free validator, consider purchasing a HTML validator which you can run on your machine. In my opinion a programmer wouldn't run a C# program without compiling, and web development shouldn't be done without some sort of validation program. It will save you oodles of time.
Sorry I can't post more links. Stack overflow will only allow me to post one.
Here is one link that has a few fixes I used to use: http://hublog.hubmed.org/archives/001515.html
There are more conflicts and non-implementations than one should ever have to know. If you write standards-compliant websites, your websites will not work in IE6 or IE7. Most people special case IE6 and IE7 with special stylesheets to fix the breakage.
The IE6 PNG fix is especially common.
Here's a good overview of IE related CSS bugs.
Also, if you're not doing it already I strongly suggest you use a CSS reset (here's an example of one CSS reset there are others out there e.g. YUI CSS Reset) - bringing all browsers down to the same baseline and then working up will elminate a lot of inconsistencies without having to track them down individual and hunting for causes if they later appear.
To find out whether you are correctly picking up Standards Mode, enter:
javascript:alert(document.compatMode)
in the browser's address bar whilst your page is loaded. If you get ‘CSS1Compat’ you're sorted. If you get ‘BackCompat’, you're in quirks. This can happen in IE when you've put some stray bytes before the <!DOCTYPE declaration, for example a spurious <?xml declaration.
I tried to find list of known issues with ie6 and ie7
It would be quite long. Yes, even in Standards Mode. Anything in particular?
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.
Does using an HTML 5 Doctype cause Quirks mode in modern browsers, since HTML5 isn't out yet?
(That is Modern Browsers were out before HMTL5 started spreading, so they don't properly support it.)
If yes, does this mean that the HTML 5 Doctype is tentatively like none at all?
EDIT: If not, what does it do in browsers that don't support and the like?
No it doesn't, see this article.
What's nice about this new DOCTYPE, especially, is that all current browsers (IE, FF, Opera, Safari) will look at it and switch the content into standards mode - even though they don't implement HTML5. This means that you could start writing your web pages using HTML5 today and have them last for a very, very, long time.
According to Wikipedia table (that I love) HTML 5 DOCTYPE triggers full standard mode for:
FF, Chrome, Opera 7.5+, Safari, Konqeror 3.5+ and also IE8!!!
and triggers Almost standard mode [*] for:
IE6 and IE7
So it's definitely the best DOCTYPE ever created!
"One DOCTYPE to bring them all and in the darkness bind them..." [Lords of the rings]
[*] "Almost standards" does NOT make such a big difference to full standard mode, in the same Wikipedia link above you can find more details.
No it does not.