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>
<style>
h1
{
background: url("myimage") 0 0 no-repeat;
text-indent: -9999px;
}
</style>
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.
Until now.
A new technique has been discovered by Scott Kellum and promoted at Zeldman.com:
#replace
{
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
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?
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.