30+ Tips, Tools and Resources for Taking the Pain out of Cross-Browser CSS

no more css pain

We’re all familiar with the often long, headache-inducing process of testing and correcting our code to get it working cross-browser.  Wouldn’t it be nice if we didn’t have to go through so much pain to achieve a good-looking result?

Actually, you don’t! With the right knowledge, tools, and smarts, you can tackle a CSS design and get it working quickly and painlessly. With this in mind, we’re going to look at some of the excellent tools, articles and resources that will help you work smarter and cut the pain out of writing cross-browser CSS.

Part 1 – Figuring out What’s Wrong

I’m going to start by covering some of the great testing tools out there, because I believe the testing & diagnosis phase is your biggest and best opportunity for saving time. You can slash hours off your development time by being able to quickly and efficiently view your design in multiple browsers, and then knowing how to rapidly diagnose any problems. Here are some of those excellent tools than can make the difference:

Spoon Browser Sandbox

spoonThe Spoon (formerly Xenocode) browser testers are abolutely wonderful if you’re on a PC. They allow you to to easily test quite a few major browsers – completely free! And the advertising isn’t even that bad. The biggest drawback is that the browser sandbox doesn’t work on Macs, but it’s still a worthy tool.

Adobe Browser Labs

browserlabThis is one of my personal favorites – you can sign up and test tons of different browsers for free, and the app is very fast. The drawback to this one is that it only gives you a static view of the page, so unless you’re an expert CSS coder who can see a problem and tell right away what’s causing it, it’s probably more efficient to use a tool that gives you a live preview and debugging tools.

Browsershots.org

browsershotsBrowsershots is quite famous as well as notoriously slow. If you’re looking for a huge variety of browsers to test in, however, or you want to test in an uncommon browser, this place can’t be matched. They have a enormous selection of Mac, Linux and Windows browsers to choose from. Again, though, all you get is a static screenshot, so it’s not the best for debugging purposes.

IE Tab

ietabThe IE Tab is another trusty solution- it’s a Firefox plugin that allows you to easily render pages the way IE would straight from Firefox. There is also an IE Tab extension for Chrome, if you’d rather use that. Since IE is by far the buggiest browser, this is an excellent tool for quickly and easily fixing bugs in Internet Explorer.

IETester

ietesterI haven’t tried this tool yet, but it has been rapidly gaining popularity (its website claims over 1 million downloads!), so it’s definitely worth a mention. It is a desktop application with a very nice MS Word style interface, and has tons of capability for testing all versions of IE and lots of interesting tools and options.

MultiFirefox, Multi-Safari, and Multiple IE

browsers
Of course, the best and most straightforward way to browser test is to simply have several browsers installed on your machine and test right in them. This is a great solution, except for the fact that you can usually only have one version of a particular browser installed a time.

Thankfully, these three tools allow you change that. They are all exactly what they sound like – native apps that enable you to run multiple versions of a browser on the same machine. I’d recommend this as the smartest option for browser testing, since it’s fast and straightforward.

Firebug

firebug
Firebug is definitely the leading and most awesome debugging tool. The power in that thing is really astounding. If you’re wanting to cut your debugging time and quickly diagnose code problems, this is THE way to go. Definitely something you shouldn’t be without.

Hopefully you’ve already been using it and know what it is, but if not you can go check out the website, GetFirebug.com. They have some great explanations, resources and forums over there. There’s even a Chrome version available now, which I was real excited about.

Web Developer

webdeveloper
Web Developer is another famous Firefox add-on that needs no introduction. Of course, you shouldn’t have too many bugs to fix in Firefox, but it’s still a great tool, particularly for debugging Internet Explorer in conjunction with the IE Tab.

Safari 3 Debug Tools

web-inspector
Image from MacDeveloperTips.com

For diagnosing & debugging in Safari, Apple provides a neat set of Debug Tools. They aren’t complete yet, but they do show some promise. You can read about how to enable and use them here.

Developer Toolbar

It ain’t Firebug or Web Developer, but thankfully Microsoft does at least provide a developer toolbar for debugging code in Internet Explorer. It’s better than nothing, I can tell you that!

Further Reading
Here’s some further reading on great testing tools:

Now that we’ve covered testing, you should be able to quickly and efficiently test your designs and figure out what is keeping them form working. By mixing and matching these tools, you can develop your own process/system that will save you tons of time. Once you can figure out what’s keeping a design from working, it’s time to learn how to modify your code to fix the problem(s).

Part 2 – Fixing those Bugs

fix

There are a billion different tricks and fixes out there, but when it all boils down there are really only 2 basic strategies for dealing with cross-browser differences:

  1. Adapt Your CSS - often the cleanest, simplest way, adapting the actual CSS is the common-sense place to start when squaring up your code. Some tricks in this category (like adding display:inline to fix the double margin bug) are valid, while others (like applying a period or underscore before a property name) do not validate.
  2. Use Javascript – the second strategy is to use a script to fix the CSS (or more correctly, a browser’s rendering of it). Javascript is such an incredibly powerful tool that it makes rendering issues very easy to fix. The downside is that scripts quickly increase your page size, and Javascript is often considered the cheater’s way – pure CSS has a better reputation.

Keeping these in mind, let’s look at some great tools and techniques from both categories. I guarantee these will improve your productivity (if you’re not already using them, that is).

Use a CSS Reset

Using a CSS reset (like Eric Meyer’s) is a wonderful preventative technique – it resets a whole bunch of CSS styles to eliminate, or at least mitigate, browser discrepancies. It’s kind of like providing a uniform default that will apply in all browsers.

This can prevent a lot of problems ahead of time, because you’ve stripped everything back, so to speak. You’re starting with a level playing field.

CSS3 Pseudo Selectors for IE

ie css3

Keith Clark released this excellent script (called IE CSS3), which emulates psuedo-class selectors for IE. If you’re aching to get going with CSS3, this is a very good way to help your interface carry over a bit better to Internet Explorer.

HTML5 Rendering for IE

This script was released by Remy Sharp, and boy is it cool! It actually forces IE to render HTML5 correctly. You can imagine the possibilities this creates! If you’d like to learn more about how it works, NetTuts+ recently published a great tutorial called How to Make All Browsers Render HTML Mark-Up Correctly – Even IE6.

Fix Those PNGs

pngfix

As we all know, IE6 fails to render png images correctly. A few rendering differences aren’t worth sweating over, but improperly displayed png images can really mess up a page’s good looks. The good news is, there is an ample amount of resources for fixing this problem:

CSS Hacks & Conditionals

I use this term to refer to the general category of tricks that change CSS style rules based on the user agent. Some in this category do not validate, so it’s better to stay with the ones that do. They are all based on the idea that there are some expressions that only one browser will render, for example:

IE is the only browser that renders this:

and this (not valid):

body{
    .color:#000; /*rendered by all IE's*/
    _color: #222; /*rendered by IE6 only*/
}

Opera is the only browser that can render this:

@media all and (min-width: 0px){
    input {border:0px;}
}

This will be rendered by only Safari:

html:lang(en)>body p{
   color: #202020;
}

And Chrome is the only browser that will render this:

body:nth-of-type(1) li.nav{
   display:inline;
}

When you can’t get multiple browsers to converge on the same markup, it can be very helpful to be familiar with these quirks that will allow you to set different style for different browsers. Some purists will argue that just because a browser is quirky doesn’t mean our code should be. I’m tempted to agree with them. At any rate, CSS hacks are something you should be familiar with even if you don’t use them.

Browser Detection

browser detection

Browser detection is the scripting equivalent of CSS hacks/conditionals – using PHP or Javascript to add classes to elements (usually the body). Then, you can write styles that will be applied only when the page is accessed by a particular browser. Some great browser detection resources:

Personally, I shy away from this technique because it doesn’t seem as semantic and clean as I would like. However, it’s definitely a great quick and dirty technique for fixing bugs without spending hours on it.

Further Reading
Again, here are some excellent article that have been written on this topic:

Wrapping Up

Hopefully the tools and articles presented here have got you off on a good start toward making cross-browser CSS painless, but there’s one more helpful thing that you should always remember: websites don’t have to look exactly the same in every browser. Should you ensure there are no usability problems and that everything is presentable in the major browsers? Absolutely. But does every little touch and flourish have to be present in sub-standards browsers? My answer would be, “No.”

I think that realizing this opens up a lot of freedom for all of us web designers. We can work on finishing fast, designing well, and doing our best without tangling ourselves up in gritty details. The web is an exciting place, so let’s make the most of it.

Written By Nick Parsons

Nick is the editor of Webitect and a developer + designer from Houston TX.

2 Comments

  1. Andy

    February 8th, 2010 at 01:35 pm

    I have used IE Tester and found it very good for testing how pages render and behave, especially for undying ie6

  2. Andreas

    February 10th, 2010 at 03:15 am

    Thanks for your List. I’m testing a lot with IETester too, especially to have a look for IE 6 (still used by many people). Pretty nice Tool.

What Do You Think?