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
IT's Reputation: What the Data Says
IT's Reputation: What the Data Says
InformationWeek's IT Perception Survey seeks to quantify how IT thinks it's doing versus how the business really views IT's performance in delivering services - and, more important, powering innovation. Our results suggest IT leaders should worry less about whether they're getting enough resources and more about the relationships they have with business unit peers.
Register for InformationWeek Newsletters
White Papers
Current Issue
InformationWeek Must Reads Oct. 21, 2014
InformationWeek's new Must Reads is a compendium of our best recent coverage of digital strategy. Learn why you should learn to embrace DevOps, how to avoid roadblocks for digital projects, what the five steps to API management are, and more.
Video
Slideshows
Twitter Feed
InformationWeek Radio
Archived InformationWeek Radio
A roundup of the top stories and trends on InformationWeek.com
Sponsored 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.