bedlam - 5:26 am on Feb 10, 2009 (gmt 0)

Well, the image replacement problem is tricky. One way or another, you've got to show an image and hide the content. And if it is necessary that there be some fallback from the image when images are disabled but not css, then there are still a couple of alternatives.

Positioned img element with empty alt attribute

The objection to using the image and positioning it over the text is that the content is doubled if images are disabled. However, this assumes that you've used the same content in your header and your alt attribute. In spite of the fact that that's essentially what I did in my sample above, I see no good reason whatsoever for doing so. Given that the text in the h1 (or whatever element) has not been removed from the page, an identical alt attribute must arguably be duplicate content. If an image is included for no other reason than to provide a more aesthetically pleasing version of the text content, then it is decorative. Its alt attribute can therefore be empty.

Using :before pseudoclass with content property

I was thinking about this problem this afternoon when I thought of a different approach. For a few minutes, I was pretty excited thinking I'd discovered a new image replacement method. But then I started searching through my bookmarks and discovered an article on the same method from more than three years ago. There are also numerous other mentions of it on the web [google.com].

The method is essentially to use the :before [w3.org] pseudoclass and the CSS content [w3.org] property to insert a background image before the text in the element. If you also restrict the element's size to the size of the image, it's possible to completely replace the image this way.

This method works well, but in spite of the intervening three or four years since I first read of it (and the almost eleven years [w3.org] since the CSS 2 spec was released), Internet Explorer has still not managed to add support for the content property in any shipping browser (I did not test IE8). Still, the technique might come in handy for any site with sufficiently low IE numbers or intranets.

Aside from IE, browser support is pretty good, though how browsers handle it with images disabled varies.* But given the lack of IE support, it's unfortunately of mainly academic interest. Here's a sample of the code:

<h1>Lorem ipsum!</h1>

h1 { width:200px; height:30px; overflow:hidden; } h1:before { content:url(../path/to/image.png); }

-- b [700!]

*Firefox still shows the image and Opera shows a placeholder that says "Image". Only Safari gets it right and shows nothing at all.