News
News
8/24/2007
09:40 AM
Connect Directly
Google+
Twitter
RSS
E-Mail
50%
50%

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.

3
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.)

Solution:
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 Cross-Browser.com 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.

Previous
3 of 5
Next
Comment  | 
Print  | 
More Insights
The Business of Going Digital
The Business of Going Digital
Digital business isn't about changing code; it's about changing what legacy sales, distribution, customer service, and product groups do in the new digital age. It's about bringing big data analytics, mobile, social, marketing automation, cloud computing, and the app economy together to launch new products and services. We're seeing new titles in this digital revolution, new responsibilities, new business models, and major shifts in technology spending.
Register for InformationWeek Newsletters
White Papers
Current Issue
Flash Poll
Video
Slideshows
Twitter Feed
InformationWeek Radio
Archived InformationWeek Radio
Join InformationWeek’s Lorna Garey and Mike Healey, president of Yeoman Technology Group, an engineering and research firm focused on maximizing technology investments, to discuss the right way to go digital.
Live Streaming Video
Everything You've Been Told About Mobility Is Wrong
Attend this video symposium with Sean Wisdom, Global Director of Mobility Solutions, and learn about how you can harness powerful new products to mobilize your business potential.