Question

Short version: What is the cleanest and most maintainable technique for consistant presentation and AJAX function across all browsers used by both web developers and web developers’ end-users?

• IE 6, 7, 8
• Firefox 2, 3
• Safari
• Google Chrome
• Opera

Long version: I wrote a web app aimed at other web developers. I want my app to support the major web browsers (plus Google Chrome) in both presentation and AJAX behavior.

I began on Firefox/Firebug, then added conditional comments for a consistent styling under IE 6 and 7. Next, to my amazement, I discovered that jQuery does not behave identically in IE; so I changed my Javascript to be portable on FF and IE using conditionals and less pure jQuery.

Today, I started testing on Webkit and Google Chrome and discovered that, not only are the styles inconsistant with both FF and IE, but Javascript is not executing at all, probably due to a syntax or parse error. I expected some CSS work, but now I have more Javascript debugging to do! At this point, I want to step back and think before writing piles of special cases for all situations.

I am not looking for a silver bullet, just best practices to keep things as understandable and maintainable as possible. I prefer if this works with no server-side intelligence; however if there is a advantage to, for example, check the user-agent and then return different files to different browsers, that is fine if the total comprehensibility and maintainability of the web app is lower. Thank you all very much!

Answer 1

I am in a similar situation, working on a web app that is targeted at IT professionals, and required to support the same set of browsers, minus Opera.

Some general things I’ve learned so far:

• Test often, in as many of your target browsers as you can. Make sure you have time for this in your development schedule.
• Toolkits can get you part of the way to cross-browser support, but will eventually miss something on some browser. Plan some time for debugging and researching fixes for specific browsers.
• If you need something that’s not in a toolkit and can’t find a free code snippet, invest some time to write utility functions that encapsulate the browser-dependent behavior.
• Educate yourself about known browser bugs, so that you can steer your implementation around them.

A few more-specific things I’ve learned:

• Use conditional code based on the user-agent only as a last resort, because different generations of the ‘same’ browser may have different features. Instead, test for standards-compliant behavior first — e.g., if(node.addEventListener)..., then common non-standard functions — e.g., if(window.attachEvent)..., and then, if you must, look at the user-agent for a specific browser type & version number.
• Knowing when the DOM is ‘ready’ for script access is different in just about every browser. A good toolkit will abstract this for you.
• Event handlers are different in just about every browser. A good toolkit will abstract this for you.
• Creating DOM elements, particularly form controls or elements with attributes, can be tricky with document.createElement and element.setAttribute. While not standard (and kinda yucky), using node.innerHTML with strings that contain bits of HTML seems to be more reliable across browser types. I have yet to find a toolkit that will let you use element.setAttribute to add a ‘name’ to a form element in IE.
• CSS differences (and bugs) are just as important as JS differences.
• The ‘core’ Javascript features (String, Date, RegExp, Array functions) seem to be pretty reliable and consistent across browsers, especially relative to the DOM/CSS/Window functions. There’s some small joy in the fact that the language isn’t entirely different on every platform. 🙂

I haven’t really run into any Chrome-specific JS bugs, but it’s always one of the first browsers I test.

HTH