I've been lucky to develop websites for the past 3 years for companies that don't need to support IE 6 in any way.
I've just accepted a development job with a company that works exclusively with IE 6 customers in the financial field. These people may be hemmed in by corporate IT departments or haven't upgraded, or whatever the reason is, we have to support IE 6 (and JUST IE 6).
I have no background in supporting this browser and I used to happily skip over SO questions that dealt with IE lte selectors and all of that. But now that it's going to pay the bills, I want to know as mch as I can about the CSS selectors that work/don't work, how JS may be quirky, and anything else that may help me catch up in the new job.
Is there a good respository of the "quirks" that make up the lovable IE 6 experience, or is it spread piecemeal across the 'tubes?
Is there a good respository of the "quirks" that make up the lovable IE 6 experience
quirksmode.org is an excellent resource for browser compatibility questions. It has great, nicely designed compatibility tables that give you almost everything you need to know. Be sure to take a look.
At hasLayout is an excellent overview of all known IE CSS bugs, most of them complete with solutions. This site is imo better overviewable, a real bug repository. All is summarized in short instead of spread over 100s pages like Quirksmode, which in turn is however excellent as a general reference.
My clients use IE6. The repositories listed above may mention these, but nevertheless I write them here.
If you use https, avoid mixed content messages by avoiding javascript:void(0) and similar constructs.
If you use https, avoid mixed content messages by ensuring all iframes have a valid src attribute.
Find a copy of Microsoft Script Debugger and learn to love it. It stinks, but it seems to be the only game in town.
Ask your company to let you develop using FF and FireBug (I did), develop using these, and test very often in IE6.
I use the following URL to dump the DOM:
javascript:'<xmp>%20+%20window.document.body.outerHTML%20+%20</xmp>'
Quirksmode is an invaluable source of information for this sort of thing.
In particular, take a look at the compatibility tables.
"QuirksMode.org is the prime source for browser compatibility information on the Internet." Specifically, to your question visit the CSS2 page there, and look at the IE6 column on the table.
This is a nice article about the 9 most common IE bugs and how to fix them.
Good suggestions... a couple of things that might help:
"Microsoft Visual Web Developer 2008 Express Edition" is much better than the old "Microsoft Script Debugger": http://www.microsoft.com/express/Web/
There's also Firebug Lite: http://getfirebug.com/firebuglite
A compatibility library for browsers that lack full support for JavaScript 1.6: http://en.wikipedia.org/wiki/MediaWiki:Gadget-JSL.js
MSDN will help too: http://msdn.microsoft.com/en-us/default.aspx
Related
Let me start by saying I really appreciate the work done at QuirksMode.org but in recent experience the content seems a bit dated.
Some pages haven't been updated from anywhere between 6months and a year.
Compatibility tables still only show chrome at version 5.0 (W3C DOM Compatibility) or 1.0 (Event compatibility tables)
In cases where content seems a bit dated I generally refer to Sitepoint's References, but their HTML and Javascript Reference pages are also a bit our of date.
What compatibility reference guides do you all use?
update
I'm aware of sites like CanIUse, which are invaluable reference new feature support like new JS API libraries and CSS3 support. However I'm more interested in things like supported attributes (bad example I admit) and browser events. The more vanilla stuff.
And please, noone mention w3schools (see w3fools why you should never use this site)
http://caniuse.com is quite good and (provided you use the correct keywords) has good search functionality as well.
In addition to the above you might be interested in the ES5 compatibility tables that Kangax maintains at http://kangax.github.com/es5-compat-table/
update
In the meantime there is also the ES6 compat table. Quite red for now (9/2014) admittedly, but getting more and more useful.
I trust Quirksmode, have you any idea how many tests PPK runs? It's not that it's outdated (yet!) it's that CSS support (and Browser uptake) has reached a new level, trust me you will appreciate the experience if you have to support an older browser.
Not every FF or Opera user updates quickly anymore which is what could be relied on for a while! - so yes you're right to question the findings. personally I look for recent sites too but I don't "trust" them nearly as much as the older and even then I tend to test for myself.
There's no replacement for experience IMO often these guys can "guess" at what may be the problem based on their past experience even if the so called "bug" or unexpected display is new to them in that context.
I have a "bug" report detailed on PPK's site - yea it and me are old - but only last week I got asked about something (seemingly unrelated) which turned out to be the same thing and have the same solution, it's IE7 related so will be with us for a while yet. (I see caniuse thinks that's old eeek!) - I am completely in awe of these guys who have kept up these sites for so long, if you can reverse engineer the bugs you get to understand the browsers.. that will never fail you as long as the browsers are on the go - their render engines don't usually change all that much between versions!
but then again this is a new era of Browser wars so who knows what will happen :)
Have a look at this big javascript compatibility table
http://compatibility.shwups-cms.ch/de/home/
Its very big, but checks at the moment only for existenz of javascript properties.
I have just taken over maintenance of a large web application which is over 10,000 lines of Javascript.
At the moment it runs on Firefox 3.5+, Safari 4+ and Chrome and I have to make it work with IE8.
I am a very experienced programmer but I only have a little Javascript experience - although I have been introduced to the dubious pleasure of quirksmode and I have a copy of Javascript The Good Parts.
The Javascript uses a lot of JQuery (and so great chunks of it are good to go).
I want to go about it in a systematic manner and would like advice on how to structure my porting activities.
The general methodology is the old 'OpenBSD generalise' strategy - when a cross-site bug is found systematically search the code base for other places where that might occur and fix them out.
BGerrison has just pointed out that I need to consider CSS compatibility as well, so lets chuck that in the mix too.
So far all I have come up with for a methodology is:
run jslint and fix up any linting bugs
Are there any structured steps I should take or resources I should be familiar with before I plunge in?
Update
I discovered that the console in Opera 10 kinda lints your css and reports any css typos and stuff...
Javascript
JSlint is good for checking syntax and maintaing code quality
BUT browser differences are 99% DOM related
Download and use: Microsoft Script Debugger
In case something is wrong, check Bug Reports for Explorer Windows
CSS
W3C CSS validator
CSS Differences in Internet Explorer
I want to determine the best javascript framework to use in order to maintain IE 6 compatibility.
Specifically I want to know which best supports IE6 - Dojo or JQuery.
I determine compatibility based on the amount of work you have to do to make the framework work with IE6 (framework may have features that need special coding to enable them to work with IE6, or there may be features that are incompatible altogether).
Are there any benchmarks, or compatibility matrices, for the various javascript frameworks that quantify the work you would have to do to maintain IE6 compatibility?
Both jQuery and DOJO claim they support IE6:
http://docs.jquery.com/Browser_Compatibility
http://o.dojotoolkit.org/support/faq/what-browsers-does-dojo-support
DOJO does seem to have quite a grandiose claim:
... 100% of the available
functionality works, that
accessibility is handled correctly,
and that all internationalization and
localization is supported. This is a
very high bar, ...
And jQuery claims they test regularly in IE6.
Personally, I would let other requirements dictate which framework you use. One of the fundamental jobs for a JavaScript library is to be cross browser compatible, so any decent library is going to be good at it.
"Better" in your question indicates subjectivity, so I'd probably change this to a community wiki.
The best thing to do in each case is to look at what the libraries say they support. I know that he following frameworks handle IE6 well:
Prototype
jQuery
I don't have up-to-date personal experience with Dojo or ExtJS, but they supported IE6 well a couple of years back when I looked into them — I'd be surprised if they don't still support it (for now). (ExtJS's "learn more" page says IE6 and up; the "supported" list on the Dojo front page is not, shocking, a link to a list.)
The Closure team originally said they supported IE6 (although they have no official list), but that may have changed with Google's recent decision to drop IE6 support from their web apps.
Amongst other things, the main priority of a javascript library is to solve the cross-browser issues. Having said that, I personally use jQuery and yes it overcomes the IE6 issues too other than other later versions of IE.
Netscape fails to read a lot of jQuery written. What steps do you take to overcome these, and how much of the market do netscape users take up?
Steps I would take:
Let it fail
Wait for Netscape users to notice they are using a long dead browser with security holes in it
The market share for Netscape is as close to zero as makes no matter.
Umm, 0%?
Having said that, I have to admit that jquery fails on a lot of sites while prototype works, in my ancient Konqueror 3.5.10, so maybe there's a pattern here.
Although I grew up on Netscape ;-) ...its no longer maintained (R.I.P)
Thus as much as I'm all for the "support all browsers" mantra - supporting users of a now "dead" technology seems like a tall task.
IIRC, the jQuery support matrix is based on supporting the latest supported major version of a major browser (and 1 level previous). Netscape 7 and 8 are both excluded from this list.
I would suggest a simple "Please Upgrade" notice for the site... and since the users are on Netscape, Firefox would be a very compatible path to upgrade on since the concepts and layout are very similar (e.g. bookmarks, context menu options, etc.)
Thus providing a Download link for Firefox 3 would provide users a smooth guided path to upgrade.
Maybe just a simple iframe with this would work well.
It's the year 2009. Internet Explorer 8 has finally been released, and Firefox is coming up to 3.5. Many of the large browsers are starting to integrate features from CSS3 and HTML 5, or have been doing that for quite a while now. Still, I find myself developing web pages exactly the same way I did back in 2005.
A lot of progress has been made since then, and I think the reason that I haven't started taking advantage of these new possibilities is that it's so hard to know which of the new features that work in all major browsers. Since I'm mostly a backend developer I just don't have the time to keep up these developments anymore. Still, I feel like I'm missing out on a lot of cool stuff that actually would make my life a lot easier.
How can I quickly determine if a feature of CSS3 or HTML5 is supported by all major modern browsers?
Can I Use is a website which tracks browser support for current and upcoming web standards. Check it out if you would like to know whether or not a given feature is widely supported.
Font embedding through CSS, using #font-face. Webkit/Safari has been supporting it since version 3.1, Microsoft since IE4, Mozilla since Firefox 3.5 (browser support overview).
Also, the varied implementations of the Selectors API, which provides a browser-native CSS selector engine for use in DOM scripting.
For other examples, When Can I Use... seems to be a very good reference.
I would say display:table and a range of CSS2.1 selectors are the big wins for designers. display:table solves some unsolvable or difficult layouts like 100% height and inside borders without breaking semantics and using actual tables.
Multiple classes (.c1.c2)
I use min/max-width/height a lot.
Also working :hover and !important are awesome.
I would have liked to add SVG support to that list but naturally Microsoft messed that up.
BTW, big warning to those getting excited about HTML5 features. There is no official date for the adoption of this spec. It's even been implied it could take another 10 years (though I doubt that). The point is anything you do with HTML5 now is subject to breakage when the official spec does arrive and in the meantime you can expect plenty of browser inconsistencies, bugs and API changes (not to mention browsers that don't support the features at all).
Browser support for local storage should enable a bunch of new ideas now that some content can be saved on a user's machine.
Reference docs:
Mozilla Firefox
Internet Explorer