Cross-Browser Compatibility Blues

October 25, 2008 · by Brian Getting

I was reminded today of one of my most beloved of annoyances– hacking CSS to make sure that a website displays consistently on each of the major browsers. Though everyone seems to have accepted it and moved on, cross-browser compatibility will ever remain one of the most frustrating things to a web designer. You spend all your time working on the perfect web layout, only to find that it isn't displaying the way that you thought it would for most of the people that view it.

In my experience, there are only three major groups of browsers that you need to accommodate. I'm sure that not everyone agrees, but essentially you have your Internet Explorer group, your Firefox group and your Safari group. Why do I group them like this? The reason is that even though there are many "brands" of browser out there, many of them utilize the same rendering engines. For example if you can get something to look correct in Firefox, odds are pretty good that you will get a consistent look in Camino, Flock and other Mozilla-based browsers. Getting a site to look right in Safari means that it will render correctly using Google Chrome, since both use the Apple Webkit to render pages.

As usual, Internet Explorer is the exception to the rule. The only commonality that you can count on within the Internet Explorer group is that each version will display things very differently. This group usually generates the most headaches and the strongest urge to drink.

So here's how I tackle this kind of thing. I typically design using Safari until I have the site ready, short of doing the cross-browser thing. From there, the first (and easiest) step is to compare between Safari and Firefox, which usually isn't too bad. There are some differences though, so it's an important step. The CSS hacking is actually for Safari, so I identify each CSS directive that needs to be adjusted, and then I put copy each one into a block at the bottom of the CSS file (after all other directives) that is intended only for Safari browsers. For example:

@media screen and (-webkit-min-device-pixel-ratio:0) {

  .class { font-size:11px; }

}

Anything that needs to be changed for Safari is copied into where the "class" directive is. From there, I can go back through each original directive again in the CSS file to make the changes I need to make for Firefox browsers. Once I am done, my CSS formatting will be consistent between Safari and Firefox browsers.

Then it's time for Internet Explorer. I find that the easiest way to tackle the IE problem is to use a separate CSS file just for IE browsers by inserting the following line into the head of my HTML document:

<!--[if IE]><link rel="stylesheet" href="/stylesheets/ie.css" type="text/css" media="screen, projection" /><![endif]-->

This is a special commented line that IE browsers will read correctly, but other browsers will ignore it. With this file in place, it's time to just dive headlong into finding each directive that needs fixing and going from there. I generally don't worry about any versions of Internet Explorer prior to version 6, and we're getting to the point where there aren't any compelling reasons for supporting version 6. However, for each version that you want to support, you'll need to fire up the browser and go hunting for layout problems. Generally they aren't too hard to find with IE.

I tend to use the * html hack for most things, which will get at nearly all versions of IE (although version 8 may be immune to this hack). Starting there I go through and do as much as I can for the version that I am testing for. In order to target CSS directives to be applied only in Internet Explorer 7, I use the following type of directive:

html>body .class { font-size:11px;  }

Version 6 will ignore this directive, and version 7 will render it as intended. I find that there are usually more changes that need to be made between versions of Internet Explorer than there are that need to be made between Safari and Firefox.

Supposedly there is going to be a (fictitious) end to the problems with browser consistency. But for now, it appears that there is no end in sight to having to hack CSS in order to get a site to display properly to all visitors. On the plus side, if you design with compliant code the job of normalizing across browsers is much reduced.

Category: Developers' Corner | Tags: css, design, internet explorer, safari, firefox