The relaunch of A List Apart has gotten FIR on my mind.

The idea behind FIR (Fahrner Image Replacement) is that one can use a block element (e.g. <div> or <h1>) in place of an image, using CSS width, height, and background-image, along with a nested <span>. (I believe it was Doug Bowman who first documented the process in detail.) Using FIR, modern browsers show an apparently normal image: actually an HTML block-level element, with the desired image file as its background-image property. Used with the @import hack, the FIR’d image shows up as its true textual self in non-graphical or non-compliant browsers like Lynx and Netscape 4.x, and screen readers for disabled web users.

The method has drawbacks in the latter browsing environment, as described here, but that doesn’t bother me too much, as my <h1>s mostly mirror my <title>s, so a screen reader which skips over the hidden nested span isn’t missing anything that wasn’t already in the title tags. I continue using FIR partly for the same reason that Dave Shea’s Zen Garden sticks to it: when I return to randomizing blog layouts, FIR will be essential for customizing headers and divs in a single document shared by multiple style sheets. Additionally, FIR’d headers serve a somewhat presentational purpose for users browsing in unstyled visual environments (e.g. Lynx or Opera with styles toggled off, as I occasionally do at work ;) where the nested span is visible at the top as a simple header.

As an added bonus, FIR makes images a bit harder to pirate. The block-level element, while appearing as an image, is immune to right-click saving or OS-based drag-and-drop. Try it on my face up there to the right. You can’t just save or drag; you need to view source, look for the style sheet, and copy the image URL from there: not foolproof protection, but certainly a substantial improvement over user-hostile methods such as disabling mouse functions with javascript.

If you need to use FIR, but the usability/accessibility issues discussed in Joe Clark’s ALA article are of concern to you, Dave Shea has documented several alternative FIR methods, each with its own advantages and drawbacks. Myself, I’m sticking to what works for me.

(The post title is a Dune reference. One of my favorite email sigs was by someone who replaced “fear” with “beer.”)

Update: As Mike points out in his comment, Mozilla has a “Save Background Image” context menu option which saves background images from divs and headers as well as from the page body. That’s worth knowing.