Autonomous Machine

GIF, the PNG fallback

About a year ago I was working on the front end of one of those new fangled Web 2.0 websites, with pages full of curvy drop shadowed gradients. I stumbled into a fairly obvious technique for dealing with IE6's lack of proper PNG support- replace said PNGS with the closest possible GIF in my IE6-specific stylesheet. Yes, this means that the edges of some page elements aren't going to look as nice, but most of the time, it's close enough for such an old browser.

My typical CSS skeleton construction process is now:

  1. Semantic markup
  2. CSS and optimal background images (PNG if needed)
  3. IE Compatibility Check for layout
  4. IE Compatibility Check for PNG/GIF substitution

Step 4 is where I go through and replace any trouble PNGs with GIFs. I no longer use any of the various filter/IE specific PNG hacks; all of the ones I've tried don't work correctly with tiled background images, which something I end up needing frequently.