Better Foreground Sprites

A while ago I wrote about using CSS Sprites in img tags, calling it Foreground Sprites. Thus you avoid performance-eating HTTP requests, but the page turns really ugly when CSS is switched off because the sprite image will be displayed in its full size. :(

What are the alternatives? Using background-images with off-screen text? Bad code:

  1. <a href="foo" class="button">
  2. <span>Alternative Text</span>
  3. </a>
  1. a.button, button {
  2. background: url(foo.gif) 0 −26px no-repeat;
  3. display: block;
  4. height: 52px;
  5. overflow: hidden;
  6. position: relative;
  7. width: 150px;
  8. }
  9. span {
  10. left: −9999px;
  11. position: absolute;
  12. top: auto;
  13. }

That’s a bad idea with accessibility issues. Screen readers will be able to read the text, but if somebody with low vision has high-contrast custom stylesheets, it is likely that the background-image won’t be displayed. Still the alternative text will be invisible off-screen, so the link or button becomes unusable.

A better solution

Now Google’s accessibility specialist T.V. Raman explained their idea for replacing images with sprites. Here are screenshots of Google search results with images, and with background images disabled:

Screenshot displaying the Google logo Screenshot with text visible instead of the logo

Google puts the alternative text behind the background image simply by attaching it on the span element, not the anchor. So when CSS or background images are turned off, the text just reappears.

  1. <a id="logo" title="Go to Google Home" href="">
  2. Google
  3. <span></span>
  4. </a>
  1. #logo {
  2. display: block;
  3. height: 52px;
  4. overflow: hidden;
  5. position: relative;
  6. width: 150px;
  7. }
  8. #logo span {
  9. background: url(foo.gif) 0 −26px no-repeat;
  10. height: 100%;
  11. left: 0;
  12. position: absolute;
  13. top: 0;
  14. width: 100%;
  15. }

There’s only an issue if you have a lot of alternative text, perhaps combined with text zoom, so that it doesn’t fit in the reserved space. But I can live with that.

Congratulations to Google for this ellegant solution, and it’s so simple! Why didn’t I think of it? ;)

3 Responses to ‘Better Foreground Sprites’

  1. Will

    This has been around a while, and is called the Shea Method, after Dave Shea (css Zen guy). He has a good overview of the methods on his site.

  2. Martin Kliehm

    Will, thanks for the hint. There were indeed people describing this technique five years ago! That explains why this technique can be found in a combination with terrible table layout within the Google search results page. Strange that they waste an incredible amount of bytes, hardware, and energy by using antiquated templates.

    As a side effect I should note that you can also use this technique to set a background color for the span and apply some opacity. That fixes the problem of inherited transparency on the text when your designers just want the background to be transparent.

  3. WEB 3.0 » ¿Así que querías saber (casi todo) de CSS?

    […] Better Foreground Sprites – Martin Kliehm […]