One of the facts of life for web developers is the issue of solving browser compatibility problems. Compatibility issues are caused by a number of reasons including:

• Differences in the ways browsers handle html code, style sheet rules and JavaScript
• Operating system differences
• Font sizes and availability
• Different screen sizes
• The addition of new features

Thus, there is always the possibility that our web pages or applications will not look or behave the same from one browser to another. But savvy web develops are aware of these concerns and have learned that there are steps that they can take to eliminate the scourge of browser incompatibility.

Determine Which Browsers to Support

The first step in conquering these issues is to determine which browsers our web sites and web apps with support. Sites like Wikipedia and W3counter.com can give us some of idea about which browsers are the most popular:

Web Browser Usage

From the table above we can see that Internet Explorer is still the most used browser, but our experience at GetCS.com is different with Safari being the most common. Yet, for our development, the answer is clear; our sites will need to be able to run correctly with these top five browsers.

A second consideration is which browser to use while developing web sites. The best approach is to use one that is the most compliant to the current standards of the World Wide Web Consortium. The latest versions of either Foxfire or Safari would qualify. We can develop using one of these browsers and later test and correct problems using the other four browsers. It is especially helpful to run multiple browsers at the same time while making browser specific code changes to insure that our pages or applications continue functioning correctly.

Those who are doing JavaScript development should take a different approach due to the fact the some browsers are more forgiving with programming errors while others are more strict. Developers need to test their JavaScript applications frequently in all the popular browsers. Then when problems are discovered then they can review their latest code modifications where it is likely they will find source of the malfunction.

Understand the Importance of the DOCTYPE

Now to insure that our web pages or apps are compliant with the latest standards we need to understand the importance of using the correct DOCTYPE declaration. You see, modern browsers have several modes that they can run in:

• a standard compliant mode
• an almost standard compliant mode
• and a ‘quirks’ mode that allows backward capability for older, non-standard web pages.

And the DOCTYPE declaration at the beginning of a web page informs the web browser which version of the html or xhtml that the page is written in and it determines which mode the browser will use when it displays the page.

The A List a Part Blog list these doctypes for standard mode:

HTML 4.01 Strict, Transitional, Frameset

HTML 4.01 Strict, Transitional, Frameset
XHTML 1.0 Strict, Transitional, Frameset
XHTML 1.1 DTD

For a complete discussion of doctypes see Henri Sivonen article, Activating Browser Modes with Doctype.

Validate the Code

Another technique is to always validate and fix html and CSS errors in our code. Some browsers will try to overlook these errors but others will not. Validating our code will insure each browser will be capable of displaying our pages.

Use a Reset CSS

Because some browsers have different default settings for individual html elements or CSS properties it is a good practice to clear these settings before attempting to render a page. This is accomplished by placing a set of CSS rules at the top of your CSS file that neutralizes these differences. A collection of useful CSS Resets can be found at this site

Use Conditional Comments for Internet Explorer Specific Code

Versions of Internet Explorer since version 5 have had the ability to allow conditional comments with html code with which we can use to write browser specific code:

For a complete list of conditional comments and their usage see About Conditional Comments.

Request the Browser Type

When adding browser specific code for one or more browsers we can determine which browser is currently running. Those using PHP can use the get_user_browser() function posted at the bottom of this page. For C#, it is accomplished with:

System.Web.HttpBrowserCapabilities browser = Request.Browser;

Find out more at this link.

For JavaScript we can discover the browser type by checking the navigator object.

Use the CSS Browser Selector

An innovated approach for dealing with browser incompatibilities is the use of the CSS browser selector. This method uses a JavaScript file that select CSS rules based on the browser and/or operating system. Once a page loads the file, css_browser_selector.js, then we can include browser specific code in our CSS file like so:

// for internet explorer
.ie #copyright p {
  padding: 10;
}

// for firefox 3.6
.ff3_6 #copyright p {
  padding: 0;
}

There is even a plugin for adding the CSS browser selector to WordPress. You can learn more about the CSS browser selector here.

Tools for Detecting Browser Compatibility Issues

In addition to these techniques there are a few tools on the web for testing browser compatibility. One handy too is the IETester, a free emulator program that can display your pages in Internet Explorer Versions from 5.5 through 9. It is available to download here. Another tool is the web-based BrowserShots at browsershots.org. This site offers screen shots of you page in some 65 browsers for free; more browsers are available if you become a member. NetMechanic’s Browser Photo offers a similar service. Another free service is IE NetRenderer that can display a page in either Internet Explorer 9, 8, 7, 6 or 5.5.

There is also the Lunascape 6 browser that allows the users to use any of the three most popular browser rendering engines for displaying pages. The rendering engines included are Explorer’s Trident, FireFox’s Gecko and Safari & Chrome WebKit.

Addons for Fixing Compatibility Issues

Of course, browser addons are extremely helpful in resolving compatibility problems. The HTML Validator will allow developers to see validation errors simply by viewing the current page’s source from the Firefox browser. Firebug and similar addons give developers the ability to modify html and CSS code on-the-fly and debug JavaScript. Besides Firebug for FireFox there is the Web Developer Tool bar for Internet Explorer, Chrome has built in Developer Tools and Safari has the Web Inspector as part of WebKit. Those using Opera can download Firebug Lite.

Thus by taking a proactive approach of applying the proper development, testing and diagnostic practices developers can quickly and easily solve issues caused by browsers differences.