I’m really, annoyingly, obsessively anal about browser compatibility in web design. Even if you’re convinced that none of your users will ever touch Opera, there’s no reason to not make sure your site is usable in Opera…or Lynx, or IE 5.5, or anything else.

There are known ways to hack your CSS so that different browsers (most specifically, IE, but also others like Opera and Safari that have little quirks about how they render certain elements) will still display your content exactly as you like. However, such hacks can be unreliable and make for messy code.

A much, much better and more streamlined way to deal with CSS incompatibility across browsers is to use server-side code to identify the browser agent and add the appropriate stylesheet.

For the projects I do for Purdue, I’ve created a reusable file that I include in all the sites I develop. It checks the browser’s user agent (in ColdFusion, this is the CGI.HTTP_USER_AGENT variable; in PHP it’s $_SERVER[‘HTTP_USER_AGENT’]), looks for a specific word in the agent string, and will include an extra stylesheet if that CSS file exists.

To make my life easier, I use a standard naming convention. For instance, a stylesheet to add Opera-specific CSS is called opera.css. I also add an extra option at the end of my IF statement to handle any browser not listed, by way of other.css. This could be a way to handle versions of IE previous to 5, or other old browsers (Netscape Navigator, anyone?).

I use an additional bit of code so that if the browser is any version of IE, a second stylesheet called ie.css can be used, along with ie5.css, ie6.css, and ie7.css. There are certain CSS bugs that IE 6 and/or 7 have fixed, while other bugs are present in all versions of IE. Using an extra CSS file for all versions of IE makes it easier to handle those browser-specific styles.

To keep my code clean, I also used the ExpandPath function of ColdFusion to make sure an extra browser-specific stylesheet exists for the given user agent. If the file doesn’t exist, the code outputs nothing but an empty variable.

Make sense? Writing the code is extremely easy. This example uses ColdFusion, but you could easily adapt this concept to work with ASP, PHP, Java, or ASP.NET.

<cfset #ThePath# = "/yoursitepath/css">
 
<!--- retrieve browser engine information --->
<cfif CGI.HTTP_USER_AGENT contains "Firefox">
  <cfset browser = "firefox">
<cfelseif CGI.HTTP_USER_AGENT contains "MSIE 7">
  <cfset browser = "ie7">
<cfelseif CGI.HTTP_USER_AGENT contains "MSIE 6">
  <cfset browser = "ie6">
<cfelseif CGI.HTTP_USER_AGENT contains "MSIE 5">
  <cfset browser = "ie5">
<cfelseif CGI.HTTP_USER_AGENT contains "Safari">
  <cfset browser = "safari">
<cfelseif CGI.HTTP_USER_AGENT contains "Opera">
  <cfset browser = "opera">
<cfelse>
  <cfset browser = "other">
</cfif>
 
<cfif FileExists(ExpandPath("#ThePath#/#browser#.css"))>
  <cfset browserCSS = '<link rel="stylesheet" href="#ThePath#/#browser#.css" />'>
<cfelse>
  <cfset browserCSS = "">
</cfif>
 
<!---
  this section adds an additional stylesheet to cover all
  versions of Internet Explorer. ie.css is placed ABOVE browser.css,
  so version-specific styles will take priority.
--->
<cfif browser contains "ie">
  <cfif FileExists(ExpandPath("#ThePath#/ie.css"))>
    <cfset browserCSS = '<link rel="stylesheet" href="#ThePath#/ie.css" />' &amp;
      '#chr(10)##chr(9)##chr(9)#' &amp;
      browserCSS
    >
  </cfif>
</cfif>

Implementation couldn’t be easier. Just add the variable containing the path to the browser-specific CSS file directly after your HTML for importing your main stylesheet:

#chr(10)##chr(9)##chr(9)##browserCSS#

Being the OCD person I am, the #chr(10)##chr(9)##chr(9)# adds tab and linefeed characters to the output, so your source will still look generally clean.

The other benefit to this code snippet is that it creates an additional variable called #browser#. You could use this anywhere in your code to do something browser specific – e.g. if the user is in Safari, put a big “Steve Jobs is lame” banner at the top of the site…the options for sarcasm here are limitless!

Overall, this is a much better solution than using hacks. By relying on the server to make your CSS work the way you want, you have more control over your code. You could even go so far as to put your main style in that variable, so that users who don’t have a supported browser only get the other.css, which could allow you to provide a text-only or unformatted version of your site.