For most of my professional career, I've been developing corporate intranet applications. This means I've been pretty lucky as a web application developer when it comes to cross-browser and cross-platform compatibility because most users at the corporations I have worked for use Internet Explorer on Windows. And indeed, my current project has the same kind of user base, but I have taken it upon myself to at least make my application cross-browser so that it works in both Internet Explorer AND Firefox.
It is now that I would like to line up the developers of Internet Explorer AND Firefox and shoot them all. Just bring back Netscape 0.9 beta (the browser I started developing with) and be done with it. The typical zealot out there will tell me that Firefox is standards-compliant and that IE is the source of all evil, and thus the source of all my woes. That may be true. I don't care. This cross-browser compatibility thing is waaaaaay harder than it should be.
On the one hand, we have the usual CSS compatibility issues. No problem - these are well documented and IE hacks abound to get around this stuff. My beef is with simple JavaScript properties and methods. Holy crap. What a mess. I'm sure this is all IE's fault again, so don't feel like you're going to enlighten me on that one either. But really, would the world end if the Firefox developers implemented the "parentElement" property? Or how about the pixelWidth property? Why the hell do I have to use document.getElementById() to get a reference to anything?!? And what the hell is up with Firefox treating whitespace as a freakin' DOM element?!? I could live with everything else, but the whitespace thing has me absolutely fuming. Using the "nextSibling" property or "firstChild" property is just about frickin' useless now - I have to wrap all these kinds of properties in silly helper functions that walk over the DOM elements looking for one that isn't whitespace! Throw me a frickin' bone here, people!
So, for those of you who follow in my footsteps, here are today's hard-learned lessons:
1. Use "parentNode" not "parentElement" when walking up the DOM.
2. Instead of using "nextSibling", wrap it in a function that does this:
function getNextSibling(previousElement) {
var nextElement = previousElement.nextSibling;
while(nextElement.nodeType != 1){
nextElement = nextElement.nextSibling;
}
return nextElement;
}
3. There is no Firefox equivalent of pixelWidth (if your element has a display style setting of "none"). You have to display the element before you can use offsetWidth which will give you the width of the element in pixels without the stinking "px" added to the end of it.
All this from one page - the application home page. I'm just getting started - I think I'll just sit in the corner and cry now.