09:40 AM
Connect Directly
Repost This

Those Cross-Browser Blues: How To Develop Web Sites For Both Internet Explorer And Firefox

If you're trying to develop sites that will be compatible with IE, Firefox, and Opera, watch out -- there are still a lot of speed bumps out there. We examine six of them and let you in on some solutions.

JavaScript And Automation

"Fussy" is the nicest word I have for the way JavaScript can be implemented across platforms. What works fine in one place will simply not work at all in another, or won't work as intended. While there's a common pool of commands that is shared by almost every browser's implementation of JavaScript, there are a few that simply don't exist in one browser or the other.

IE, for instance, doesn't implement the JavaScript function getComputedStyle() or the cssRules[] array, while Firefox doesn't implement the handy innerText function. And up until fairly recently (version 9.2 or so), Opera didn't allow frames to be resized via JavaScript. A small omission, sure, but it drove me up one wall and down another, since I was using a JavaScript-resized frame to accomplish a very specific effect that I had a hard time doing another way. (I eventually found another way to do it, but only after the Opera behavior already had been fixed.)

In the same vein, browsers have different ways of reporting back the size of a given window, which can play havoc with window manipulations. In IE, a window's measurements include the "chrome" (scrollbars, menuing elements, status bar, etc.), but in Mozilla, the window's measurements don't include any of that and just run from one inner edge of the window to the other. This makes it slightly harder to create, for instance, a JavaScript window resize that operates reliably across both browsers without handling each browser as a separate case. (Here's a page that talks about the ways different browsers interpret JavaScript window size functions.)

Three basic solutions present themselves here:

A. Drop back to a common base of JavaScript for all browser projects. This may only be viable if you have the time and effort to rework all the existing JS code from scratch, as it may be a fairly major undertaking. This means insuring that no future code uses JS that isn't supported on the majority of platforms as well. On the plus side, it means you only have one branch of the code to deal with. Sometimes you can implement individual functions that you need by using "spot cheats," like Scot Hanselman's way to implement the innerText function in Firefox.

B. Use browser detection and browser-specific code. This approach requires that you maintain at least two separate branches of code (IE vs. everything else, essentially), so it's that much more work. One way to implement these kinds of changes in CSS itself without using browser-detection per se is to use conditional style sheets, which apply patches to CSS styles that work for IE but not FF (or vice versa).

C. Use cross-browser libraries. If you want to write JavaScript that works cross-browser every time, one way to do that is to use someone else's JavaScript function library that's been designed to do that kind of work for you. Consider the GNU LGPL-licensed libraries, which package a whole host of useful JS functions in ways that work with pretty much every browser out there. You don't have to include the whole gallery of functions on a given site; you can pick and choose what's needed and keep your include files relatively small. Yootools is another cross-browser function library with some fairly advanced features, including a Window.Size function that helps work around cross-browser window-size issues.

3 of 5
Comment  | 
Print  | 
More Insights
The Agile Archive
The Agile Archive
When it comes to managing data, donít look at backup and archiving systems as burdens and cost centers. A well-designed archive can enhance data protection and restores, ease search and e-discovery efforts, and save money by intelligently moving data from expensive primary storage systems.
Register for InformationWeek Newsletters
White Papers
Current Issue
InformationWeek Elite 100 - 2014
Our InformationWeek Elite 100 issue -- our 26th ranking of technology innovators -- shines a spotlight on businesses that are succeeding because of their digital strategies. We take a close at look at the top five companies in this year's ranking and the eight winners of our Business Innovation awards, and offer 20 great ideas that you can use in your company. We also provide a ranked list of our Elite 100 innovators.
Twitter Feed
Audio Interviews
Archived Audio Interviews
GE is a leader in combining connected devices and advanced analytics in pursuit of practical goals like less downtime, lower operating costs, and higher throughput. At GIO Power & Water, CIO Jim Fowler is part of the team exploring how to apply these techniques to some of the world's essential infrastructure, from power plants to water treatment systems. Join us, and bring your questions, as we talk about what's ahead.