Writing cross-browser CSS and Javascript used to be fairly easy, as there was little real difference in the level of support that the mainstream browsers provided.

Today, the amount of time we spend on feature development is approximately the same that we spend on normalizing the presentation. This may sound like an overstatement, but consider this:

Approximately 83% of our members uses Windows, with a further breakdown of 34% using Firefox + XP, 25% using IE6 + XP, and then a whole range of other combinations, each comprising 3% or less of that 83%.

That leaves 17% of our members using Linux, OSX and other OSes for their platform. Of those, some variant of Firefox is the most popular browser, with Safari on OSX barely registering at a bit over 1%. Many combinations exist at less than 1%, so I won’t consider them for the remainder of this discusssion.

We have under development now a new menu system. There are numerous features that are now crowding the text-based menu in the application, and we plan to add more with the new premium editions we’re releasing. As a result, we’re moving to a more easily navigable tabbed menu, and we had expected to use one of the publicly available ajax libraries for implementation.

Here’s where the issue develops. Using the old text-based menu, which is 100% html and very little (in fact very basic) CSS, it is virtually guaranteed to be cross-browser compatible. Refactoring the text-based menu to a tabbed menu introduces at least four issues that manifest in the different mainstream browsers.

In IE 6 (and 7 Beta 2) on XP SP2, the ajax library throws errors about (non-existent) widget collisions. IE also renders both horizontal and vertical scrollbars. The same code happily and properly renders the menus in Firefox 1.5, Camino, Flock and Safari on OSX (PPC). Opera 9, no matter that it is a slick, beautiful browser, has no love with the ajax library: an error message informs us that Opera is not supported for the forward & back mechanism, which means that the ajax library breaks the back button in Opera. Oh, and the menu doesn’t actually render either, but I suppose that is a given at this point.

If Javascript and CSS were uniformly supported at some minimal level, a browser could assert itself to be “CSS 2.5 Compliant”, which would mean that it fully supported everything that was listed under CSS 2.5. Designers could then be guaranteed that a minmum level of support – and thus design-ability – existed with the targeted browsers. Take the same idea and apply it to Javascript.

Standards are critical to design, development and construction of buildings, bridges and aircraft. Imagine how rapidly things would collapse (literally and figuratively) if each architectural firm implemented its own interpretation of a one-meter scale.

Why are we so accepting of loose standards when we are dealing with information?

Either we are unwittingly developing non-compliant code, or the level of support for the various portions of the w3c spec are widely divergent between these browsers. We’re pretty sure we know the answer. So here we are, with a nice, needed feature that will work as designed and coded for only 17% for our members. Time to refactor for lack of standards-compliance.

The browser wars sucked – we all lost.

Tags: freepository, ajax, css

Popularity: 70% [?]