Testing CSS Against Multiple Browsers

In the past, my website design work has either been so basic that the formatting would appear similar on any browser, or I was using something like BEA's AquaLogic web portal system or Joomla! templates; in those cases the templates took care of the differences in multiple browsers for me. But now, most recently, I've landed projects in which I had to go back to hand coding CSS without the assistance of a template that is supported by an entire team of website design professionals.

This current experience has landed me smack dab in the middle of designing and coding web pages, by hand, and wanting them to look as close to the same as possible in a myriad of browsers and browser versions. A colleague said to me the other day, "Is this a field you really want to get into?" I thought to myself, 'I thought I was already in the field…' But technology travels at warp speed and even browsers that you thought was safe to design for can easily throw you curve balls. For example, you probably knew that Firefox 3.6 does not support the </ br> tag, but Firefox 4.0 and Internet Explorer do.

Because of this, if you have FF 4.0 installed, you could start using the </br> tag to add a break in a line without the extra space that a <p> tag does. However, if a visitor hasn't upgraded to FF 4.0 yet, they are not going to see those breaks. Hence, your design is broken. Suddenly, performing cross-browser testing becomes extremely important. And it is not a simple process, but here are tips to simplify the process.

Clients and Browsers

For my particular project, the first question I asked was, "What browser is the client using?" I thought that would be a great way to start; by coding specifically for the person that was going to use it and test it first. However, that would be short lived. Eventually, the site will be in the wild and any number of browsers will be used to view the site. For example, in the office that I work in, I use Firefox 4, Internet Explorer 9 and Chrome 11. My boss uses IE 8 and can't upgrade to 9 because he has Windows XP installed; I have Windows 7.

Meanwhile, a consultant down the hall has Firefox 3.6 installed. Because of these different browsers, the three of us all see different things when I send around the link for a preview of the latest updates. For the client, we just send him screenshot images taken from the browser that looks the best, which is Firefox 4. However, if he's using IE 8, he could be in for a rude surprise when the final site goes live. Therefore, we have some work to do on cross-browser designing. Luckily, there are several tools and code that you can use to get around a potentially disastrous scenario.

Test With Multiple Browsers

To get started, you need an environment in which you have available several different browsers. To gain an idea of which browsers your visitors use most, consult your analytics. Google Analytics provides this information for free. It's a safe bet that you're going to want to code your CSS for Firefox 3.6 and 4.0, Internet Explorer 9, 8 and 7, Chrome (version doesn't matter much here in that Google provides automatic updates and does not force the user to manually install new versions) and Safari.

The problem here is that to install multiple versions of Internet Explorer, you'll need to set up an emulator that allows you to run another copy of Windows within your existing set up. Sounds like a pain, doesn't it? Another problem is that Firefox won't even allow you to download 3.6 anymore. So, unless it's already installed and you haven't upgraded yet, you're kind of out of luck. This brings us to the availability of online tools such as crossbrowsertesting.com and browsershots.org.

These are two different sites that allow you to perform browser testing. I cannot vouch for the paid versions of these sites, but I believe I'm going to be approaching my boss soon about buying a professional license for about $50 per month. But first, I'll experiment with the free trial version. I played around with the free version of browsershots.org and came away mostly frustrated.

The results are not instant, they give you a range of five minutes to an hour as to when the results are ready, and the results will quickly expire if you don't view them the instant they are made available. Interesting enough, browsershots.org has a link to crossbrowsertesting.com, which may or may not be a paid advertisement link, it's too hard to tell for sure. According to the crossbrowsertesting.com site, they have over 31,000 happy customers, which include Sony and the Los Angeles Times, so if those testimonials are to be believed, they must have a good, working service. At the very least, you now have a means to test your CSS across multiple browsers.

Then there's the W3C CSS Validator. This is a useful tool if it's important for your code to be compliant with W3C standards. To use the validator, you simply plug in the URL you want to test, or upload a file, or submit a direct input and it spits back the results to you, showing where the errors are. Just for kicks, I entered the URL of a well-established design site. I figured, these guys are in the design trenches day in and day out. It's a good bet their code is up to standards.

Imagine my surprise when the validator returned well over 100 errors. This just goes to show that not all professional designers adhere to W3C standards. It's up to you and your clients if that's important to you. However, one good use of using this tool is to find any possible errors if you're stuck on trying to fix something.

Using CSS for Cross-Browser Compatibility and Graceful Degrading

Now that you know which browsers you want to design for, and you know about possible tools for testing, you'll need to know how to set up your web pages to allow for different CSS files to be used with different browsers. It's my current understanding that it's best to first code for Firefox and Chrome, as these two browsers allow for the most CSS3 and HTML5 and they don't have the hang ups like Internet Explorer. When you're done with the coding, then test it in Internet Explorer 9 and then 8, possibly even 7. Hopefully, when you ran your analytics report you did not see IE 6 and you can put that monster to bed.

When you learn which differences you need to account for Internet Explorer in your design, most likely spacing issues and any vendor-specific code you might have used, create a special new style sheet that incorporates your updates. Then in the <head> tag, add in the following code:

In the first line of that code, gte, stands for greater than or equal, which means the special style sheet will work for any version of IE 7 or higher. If you want to account for a specific version of IE, then you can omit the gte portion of the code:

This code will work only for version 6 and no other versions. The order in which you list your style sheets is important. The browser will run through them in order, with each preceding style sheet overriding any tweaks from the previous. Therefore, if you initially styled your page for FireFox and made tweaks for Internet Explorer, then list the main style sheets first and then list the Internet Explorer sheet last with the extra code. For example:

In the above example, the main and secondary style sheets will appear in Firefox, but the tweaks for IE will only appear in IE browsers. Probably the best, easiest and quickest way to test this is to change the color of a border or text in the special IE style sheet. Then view the page in Firefox and then in Internet Explorer to see if the changes take place. And yes, of course you can install FF, IE and Chrome all on the same machine at the same time. It's just the different versions that cause a headache. And that's why a tool like crossbrowsertesting.com can come in handy. Hopefully, you can charge the monthly fee back to the client.