Question

When coding new javascript heavy websites, which order or web browser do you code for?

I can see these possible orders, but I am not sure which I like best:

1. Code for one first and get it working well, then start testing with other and fix errors as I go.
   • This will allow for the most rapid development (with Firefox at least) but I’ve learned from experience that debugging IE with so much going on at once can be a pain!
2. Code for both at the same time. In other words, for each new feature, ensure it works with both browsers before moving on.
   • This seems like it will actually take more time, so maybe do several features in Firefox then move to IE to patch them up.

What do you all do?

Edit 1: To respond to a couple of answers here.: @JQuery usage: For some reason I was not expecting this kind of a response, however, now that this seems to be the overwhelming accepted answer, I guess I should tell everyone a few more things about the specifics of my app. This is actually the DynWeb that I started another question for, and as I’m developing, a lot of the important code seems to require that I use document.whatever() instead of any JQuery or Prototype functions that I could find. Specifically, when dynamically importing changing CSS, I have to use some similar to:

var cssid = document.all ? 'rules' : 'cssRules';  //found this to take care of IE and Firefox document.styleSheets[sheetIndex][cssid][cssRule].style[element] = value; 

And I expect that I will have to continue to use this kind of raw coding currently unsupported by either JQuery or Prototype in the future. So while I would normally accept JQuery as an answer, I cannot as it is not a solution for this particular webapp.

@Wedge and bigmattyh: As the webapp is supposed to build other webapps, part of the criteria is that anything it builds look and work functionally the same in whatever browsers I support (right now I’m thinking Firefox and IE7/8 atm, maybe more later on). So as this is a more interesting (and much more complicated) problem; are there any sites, references, or insights you may have for specific trouble areas (css entities, specific javascript pitfalls and differences, etc.) and how to avoid them? I’m almost certain that I am going to have to have some sort of isIE variable and simply perform different actions based on that, but I would like to avoid it as much as possible.

Thanks for your input so far! I will keep this open for the rest of the day to see what others may have to say, and will accept an answer sometime tonight.

Answer 1

This is sort of a trick question. In my opinion you need to work in this order:

1: Conform to Standards

This gets you closest to working in every browser without having to test against every browser. Additionally, you gain the huge benefit that your site should work with any new browser that comes along (Chrome is a good example) so long as it’s well made and standards compliant. It also makes it easier to tweak your site to work in specific browsers because the way that the popular browsers deviate from standards compliance is well known.

2: Support the Most Used Browsers (For Your Site)

Note carefully the distinction between the breakdown of browser usage on the internet vs. browser usage on your site. On the internet as a whole IE is the most popular browser with Firefox a close second and Safari, Opera, and Chrome taking up most of the remainder. However, the demographics of your site’s visitors can turn these numbers upside down. On sites that cater to a more technically savvy crowd it’s common for firefox to be the dominant browser with IE in the distinct minority.

3: Support Other Browsers as Needed

You need to be very explicit about the fact that browser compatibility is an operating cost for your site, and you need to decide where you draw the line. Depending on your site’s purpose and business model it may be fine to support only the most popular browsers, or even a subset of them. On the other hand, it may be a vital business concern to support everything under the Sun, including IE5. It’s ok to make a conscious decision to not fully support every browser if you think the cost/benefit ratio is too high to justify it. Indeed, many of the most popular sites on the internet do not work well in older and niche browsers. Though you should strive to make your site still functional in the least popular browsers, even if there are serious appearance or usability problems.