The -9999px image replacement technique has been popular for the best part of a decade. To replace a text element with an image, you use the following code:
<h1>This Text is Replaced</h1>
background: url("myimage") 0 0 no-repeat;
The element’s background is displayed and it’s text is moved off-screen so it doesn’t get in the way. Simple and effective. It was often adopted to show graphical titles — that’s rarely necessary now we have webfonts, but you’ll still find it used all over the web.
A new technique has been discovered by Scott Kellum and promoted at Zeldman.com:
The code indents the text beyond the width of its container but it won’t wrap and the overflow is hidden.
While it’s a little longer and more difficult to remember, performance can be improved because the browser’s no longer drawing a 9,999px box behind the scenes. It will also prevent the weird left-extended outlines you’ll see around links using hidden text.
I haven’t been able to discover any downsides — only than I wish I’d discovered it first. Have you adopted the technique? Have you experienced any issues?
And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.
Comments on this article are closed. Have a question about CSS? Why not ask it on our forums?