Potential Problems

Browser detection is not bulletproof since users can change their browser name string, firewalls may prevent browser data from passing through, and software builders change their browser ID formats. Since these are the exceptions and not the rule-it’s worth attempting to customize the page presentation to your visitors’ browser.

Approach

1. Create individual stylesheets for different browsers and browser versions
2. Use PHP to detect the current browser and browser version
3. Load base stylesheets first
4. Load browser-specific styles after the base styles

The order of steps 3 and 4 are critical. We’re trying to overwrite the base styles so they must be included first in the HTML header.

Detecting the Browser Version

At the very least you’ll need to retrieve the browser name. If compatibility requirements are strict you’ll want the version and revision numbers too. Once you’ve chosen a detection script you’re ready to move on.

Instead of retyping source, I will now point you to this site which uses PHP’s get_browser() function. This page has a dedicated author and a history of updates dating back to 1998.

I recommend using get_browser() but if you don’t want to modify your PHP setup you are in luck. There are enough open-source detection scripts on the web to save you the trouble of writing your own. When you find a script be sure to check its release date.

An open-source script will have the same approach as the browser capability approach linked above.

Suggestions

• If you’re aiming for IE and Firefox it’s probably simpler to keep all your files in one ./css/ directory
• Use a folder structure like the one below if you have many browser-specific CSS files.
  

• If you’re switching approaches mid-project be sure to add relative paths to your CSS files!

References

http://www.hudzilla.org/phpbook/read.php/16_5_0

What is a Browser Testing Suite?

A browser testing suite captures screenshots of web pages as they appear in different browsers and different operating systems. Visit this site to see a list of available browser testing suites. I use browsershots because of its price point (free).

Testing Procedures

1. Start with an HTML-based page
2. Create two standards compliant CSS files:
   • css/screen/layout.css
   • css/screen/site.css
3. Include the default layout and site CSS files in the HTML header
4. Test your work with a browser testing suite
5. If there are display differences between browser versions following the steps outlined below

Fixing CSS for a Specific Browser

IE6 is the culprit in the following example:

1. Duplicate the compliant layout CSS file and rename it layout_IE6.css
2. Modify the layout_IE6.css files for IE6 compatibility
3. Use a scripting language to inject the IE6 links after the standards compliant links. Refer to this post for details
4. Test your changes with a browser testing suite. You’ll only need to run tests for IE6
5. Don’t delete unchanged styles from the IE6 CSS file

References

• http://www.smashingmagazine.com/2007/10/02/
  browser-tests-services-and-compatibility-test-suites/
• http://www.melbournechapter.net/wordpress/web-accessibility/
  cman/2006/05/12/css-ie-hacks-recommendations/