Preparing To Make Website Internet Explorer 8 Compatible - javascript

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

Related

is it possible to use Google-Chrome-Frame to save development time/money making application work for IE?

Let's say I outsource the development of an HTML/JS/CSS/AJAX web app targeting ONLY modern browsers. If it matters, assume there are 20 unique templates used in creating the application (to give an idea of the size of this application). My understanding is that much time/money is spent hand tweaking the code to make it consistent among browsers. I'm interested in ways to minimize this expense.
As of June 2011, Google Chrome Frame is advertised to not require administrator privileges for the user to download and install for IE 6-9, which essentially runs Chrome as a plug-in inside IE to avoid browser incompatibility issues with IE (substituting potential compatibility problems with Chrome, which should be much less than IE).
If I were to direct the developers to target only modern browsers minus IE, requiring all IE users to download Chrome Frame instead, would this path translate into any significant development cost/time savings? (My users are engineers and may be willing to accept this tradeoff since this application is not offered elsewhere.) I just don't have a feel for how much effort is made for IE versus other (modern) browsers, and wondered if anyone with experience could comment whether this makes cents (pun intended) or is simply crazy.
Also, any downside to doing this?
You will save time and money. I have done something similar for our in-house application. The site runs only on webkit browsers (chrome and safary).
We save a log of time, because the css and JavaScript can be more efficient, and most importantly, we do not have to test every change on 6 different browsers. This is very liberating.
If your users allow you to exclude IE, i recommend it.
It all depends on your application and developers. With enough knowledge it's possible to write code without even checking in IE until the end but only keeping it in mind and have 99% of things as expected in ie8-9, 80% in ie6-7.
If your users are engineers I can hardly imagine them using ie in the first place and even if so definitely not ie6/7.
Even if you don't go with Chrome-frame, given above points, if you're willing to go with slight to mild visual design degradation you can get away without specifically targeting ie...
Here's a little ie9 promo for ya :)
http://varonasf.com/ie69/
(only works in decent browsers)
This is the design decision behind Google Frame. You always have the choice of either designing for the lowest common denominator, i.e. IE6, and having a limited function site, or designing for a reasonable HTML 5 standard and forcing users to upgrade.
...allowing users to access modern web technologies like HTML5 on
legacy browsers.
http://blog.chromium.org/2010/09/google-chrome-frame-stable-and-speedy.html

Cross-browser JS

I am working on a project to convert a web site that is fully functional in Internet Explorer 8 and lower, but does not work well in Firefox or Safari.
A lot of what will need to be changed is going to be javascript-related (aka methods that exist in IE but not in other browsers).
What I want to know is whether anyone is aware of a fairly comprehensive list of common things that have to be changed to work accross all browsers.
I am starting with quirksmode.org but I don't think it will have quite everything I'm looking for. If anyone knows of a list please let me know.
Your best option here is to go with a Javascript toolkit/library like jQuery, MooTools or Prototype. Such a decision will save you a monstrous amount of work, and all three are constantly being updated which gives you a large degree of safety against future compatibility issues. Especially for DOM manipulation or AJAX, a library is the way to go.
If you absolutely mustn't use one, quirksmode is a good start. I've never found any single source that is comprehensive enough to keep me from running back to Google for each problem area.
Quite honestly, if you don't have lots of experience doing cross-browser development, I suspect the best way to fix your app is to set up a good test environment on each target browser and starting finding where it breaks. You're eventually going to have to test it on each target browser anyway, so you might as well start there. Once you find out what code is failing you for a particular bug, you can do more targeted searches for how to work around that issue in a cross browser way.
You will, over time, build up a good internal knowledge base of what is safe to use in a cross browser way and what is not. Even experienced developers still run into new issues on every project that are only found with testing. One advantage of experience though is that you start to learn when to suspect that something might or might not have cross browser issues and either avoid it (find a safer way) or explicitly test it in several browsers before you use it.
I find that http://jsfiddle.net is awesome for creating very efficient self-contained test cases to either proactively try something in other browsers or to troubleshoot something that's been giving you a problem.
As others have said, one huge advantage of the various browser libraries like jQuery or others is that they have solved a lot of these compatibility issues for you and, in general, if they document a function in the library and don't explicitly warn you about cross-browser issues, then they've already done their homework to make it safe for you.
You may also find out that using a javascript framework such as jQuery, ExtJs, Prototype, Mootols, ... would be very beneficial in writing cross browser javascript.
a web site that is fully functional in Internet Explorer 8 and lower,
but does not work well in Firefox or Safari
I would strongly recommend to develop with a browser that meets the standards (e.g. CSS3).
The process should rather be: to develop with FireFox or Chrome - and fix all IE versions later on.
Well, this is my daily bread... and ordinary it's IE b*tch which makes me loose time...

Why isn't my site proper on IE but fine on Firefox?

have a look at my site : http://www.searchr.us.
Its loading fine with all the effects in FF and Chrome but not in IE ..Whats the problem ?
You can also have a look at my CSS : http://www.searchr.us/css/style.css
Please tell me what the problem is.
Thanks
You have no Doctype, therefore you are entering Quirks mode in which browsers treat the code as "Rubbish from beyond the dawn of standards" and engage in deliberate misinterpretation of the specifications. IE deviates from the standard the most (going quite a long way towards emulating IE 5.x).
1) declare your doctype
2) Reset styles helps a lot for x-browser stuff. (although if you already have your styles laid out it would probably be more of a headache than it's worth)
3) Isolate any functionality that is breaking in IE in an effort to debug any IE specific JS that is not supported. Also, I just found out NetBeans has AMAZING support for JS. You can even test browser compatibility on a line-by-line basis.
Also, your question would be more answerable if you provided more specific details and did a little bit of debugging in an effort to isolate your problem. X-browser (ex: coding for every other browser... than IE) is painful enough.
IE is not the best browser when it comes to implementing standards. What you're experiencing is the something that probably causes a lot of premature balding in web development.

Is there a good repository of IE 6 considerations?

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

Porting a web application to work in IE7

I'm developing a web application that uses lots of Javascript and CSS, both of my own creation and through third-party libraries. These include jQuery and Google Maps & Visualization JS APIs.
I've been testing everything in Firefox 3. Things are peachy until it turns out the main target of this webapp is (cue sad trombone) IE7. I'm looking for caveats, advice, libraries, or other references to help make this transition as easy as possible (not that it's actually going to be easy).
I've already tried IE7.js though it hasn't yet shown itself to be the silver bullet I was hoping for. I'm sure that it works as advertised, I think it's just not as all-encompassing as I'd like (example: colors like #4684EE and #DC3912, which are correctly rendered in FF3, are rendered as black in IE7, with or without IE7.js). Are there other libraries out there to help bring IE7 (more) in line with FF3?
A corollary question: what debugger would you recommend for IE7? I'm currently using Firebug Lite, but it runs painfully slowly. Is there anything out there with similar features that I might have missed?
As far as libraries go, jQuery is compatible across all major browsers, so at least you've got that going for you. Without knowing exactly which plugins/modules/libraries you're using, I can't recommend alternatives that are cross-browser compatible.
You could take a look at the Internet Explorer Developer Toolbar. It isn't nearly as good as Firebug, but it's better than nothing.
Get the IETab add-on for Firefox so that you can fire up IE right inside the same tab you test Firefox in. Get the FULL version of Firebug. It will be perfect for you to deal with HTML, CSS, and scripting. HTMLValidator for validating your HTML and CSS. The Web Developer toolbar is a MUST if you don't have it. I can't even go into a fraction of the benefits it has, from images to source viewing to validating scripts it has a lot.
I use a separate stylesheet for IE7. It doesn't have many changes from the original stylesheet, but enough to make viewing in IE7 close to FF. I try not to do ANYTHING for IE6. In fact I encourage the "downfall" of IE6. It's almost ten years old, and full of bugs, and unsupported now!
Unfortunately, Microsoft doesn't really want to be on the same page as the W3C and developers that want web standards so that you don't have deal with what you're going through right now. Regardless of what they SAY, they're still "competing" against the other browsers for control, and it's hurting the developers.
Writing cross browser code is a big topic - you can't really generalize it into "don't float left and padding-left" statements and be done.
Separate stylesheets for ie are messy and not needed IMO.
Generally speaking, firefox fixes broken code in a good bit of cases, so there is a chance that at least some of your stuff looks bad in IE because of open tags that firefox is fixing for you.
Re-slicing a site that's already done might be your easiest way. You should be able to completely redo the CSS from scratch in a few hours tops.
But all this is advice that may not apply - it would be easier to see the code you're talking about.

Categories

Resources