Image replacement experiment

080812

One of the problems with existing methods for CSS image replacement is that when a user is using a browser with CSS on but images off, the replaced element is not visible at all. There is a solution to that, but it implies using this sort of HTML:
<h1><span></span>Some text</h1>, which I find rather ugly.

Lately I've been playing around with generated content trying to find a solution that solves the above described problem, without the use of any extra markup. Obviously this won't work in IE6, not even 7, but apparently IE8 will support generated content, so why not give it a go?

Unfortunately I haven't been able to find a rock solid method. This one works in FF & Opera (sort of). For the example I'm replacing an H1 with an image called myImage.gif which measures 200x50 px.

<h1>Some heading</h1>

h1 {
  width: 200px;
  height: 50px;
  overflow: hidden;
}

h1:before {
  content: url(myImage.gif);
}

The code is fairly simple: the first statement limits the height of the H1 to the width and height of the image we want to use. Then we use overflow:hidden to make sure that only the image will be visible.

The second statement adds the generated content, using a url for the content property.

It's quite a clean solution, but it has a few problems:

• It doesn't work with IE5, 6 nor 7 (might work or not with IE8).
• If the size of the text is resized a lot, both the image and the text can get cropped. This might not be such an issue now that FF3 has zoom resize by default.
• Opera shows a placemarker for the image when images are turned off, making it impossible to read the beginning of the text.

So not really practical, but fun to try anyway. I think using a JS based solution might be the safest way to go for now. Or if you can afford the luxury, let IE visitors be frustrated with the text version. ;)

Posted in: English, Web, CSS
Tags: css techniques, generated content, image replacement