Before

You have probably not seen my previous post of example image replacement techniques, CSS image replacement part 1. It wasn’t meant to be a guide to existing techniques as there are already at least two awesome overviews of CSS image replacement techniques at MezzoBlue.com and CSS-Tricks.

What I wanted to do was review the concepts and techniques — then iterate through every idea I already knew in the hope of possibly inspiring myself to find a new way to accomplish CSS image replacement. Since my last post I haven’t worked on it much, but the image replacement variation I dubbed “version 4” has stuck in my head. It might be new as I haven’t seen it anywhere, though I’d be surprised to find that it’s never crossed anyone’s mind. So today I took another look and was pleased to find that while I let my image replacement experiment rest, IE 8 had been released and begun rendering the image replacement technique from version 4 correctly.

:after

Pun intended.  My technique involves using the :after pseudo-element in place of an empty span tag. This it has some faults. Although it may not be the best choice for production sites, I think it worth sharing because I think it is interesting: minimalist and possibly someday a worthy successor to my favorite image replacement technique. My preferred image replacement procedure is the one credited to Levin Alexander, which involves nesting an additional empty span. I feel (and the report cards seem to agree) that it is the most robust. Its only downside is that it requires extra markup. I wanted to find a way to duplicate the principle with CSS alone.

<style type="text/css">
#irstyle4,
#irstyle4:after{
	display:block;
	width:600px;
	height:100px;
}
#irstyle4{ position:relative; }
#irstyle4:after{
	position:absolute;
	top:0;left:0;
	content:url("testtitle.jpg");
}
</style>

<h1 id="irstyle4" title="Test Text 4">Test Text 4</h1>

You can see the close relationship to Levin Alexander’s empty span image replacement. The :after pseudo-element is positioned to cover the heading text. A title tag can be added to the heading to create a tooltip.

Problems … Solutions?

There are a few known issues.

  1. One problem is that some browsers, particularly browsers based on earlier versions of the Gecko layout engine, break and display the text above the image. You could use CSS hacks to target Mozilla and apply a tried-and-true image replacement technique such as the negative text-indent to fix this. I disdain CSS hacks 😉 and this is a conceptual demo, so I didn’t apply any workarounds.
  2. Firefox 3.0.11 with the Web Developer toolbar still shows the image with “hide images” set! I’m not sure if this would occur in other “images off” scenarios, but there are possible alternatives–such as applying the image as a background:url() in the :after pseudo-element rather than inserting it using content:url().
  3. This image replacement technique, like the positioned span on which it is based, will not work well with transparent images. An additional way to hide the text (such as the negative text-indent) would have to be utilized in addition to or instead of this technique.

You may also feel, looking at the list below, that the functionality breaks in more browsers than it works–but most of those browsers have either a minuscule market share or are browsers in which you would expect problems. Firefox prior to 3.5 is the most notable failure. Which isn’t to say that it’s a production-ready technique with no drawbacks…

Compatibility Overview

I used browsershots.org to test a large variety of browsers across multiple versions and operating systems.

Broken: Text above Image

  • Flock
  • Seamonkey
  • Galeon
  • Firefox (<= 3.1)
  • Seamonkey (< 2.0)
  • Iceweasel
  • Epiphany
  • Iceape
  • Navigator
  • K-Meleon

Gracefully Degrading: Text Only

  • Avant
  • MSIE 4.01
  • MSIE 5.01
  • MSIE 5.5
  • MSIE 6
  • MSIE 7
  • Dillo

Working! Success Stories

  • Minefield
  • Firefox (> 3.1)
  • Opera (7.54 +)
  • Chrome
  • Safari (3.2.1 +)
  • Shiretoko (3.5)
  • Seamonkey (2.0)
  • MSIE 8
Note that some browsers [Opera, Chrome, and Safari if I recall correctly] will actually replace the content in an element with generated content. So in those browsers you could set the heading’s CSS content property to the banner and get at least partway there. There’s no telling if that behavior (or if :after behavior) will ever become consistent enough in this respect to make a good all-purpose image replacement medium. Obviously for replacement Opera’s behavior is preferred, but it’s been a while since I read that part of the CSS spec, so I don’t know what how the implementation is specified. I hope to check at some point in the near future.