CSS: SEO-friendly text replacement

On many forums, mailing lists and blogs a simple question seems to haunt developer's nights: what are the text replacement CSS techniques allowed by search engines? To answer this question, we have to get back to the source of the problem, namely the reasons behind search engine's actions against abusers. First, text can be hidden for several reasons. The only reason that is not tolerated by search engines is when you try to get an higher ranking by injecting in your pages a lot of hidden content to be delivered to robots. Conversely, if you hide your text just on skip links or other non relevant content, then there's nothing wrong with your choice, because this choice has to do with proper and legal motivations, not with some attempt to appear on top results.

However, two CSS techniques are considered potentially suspicious by search engines, especially when they're repeated several times:

1. display: none
2. visibility: hidden

The fact is that such techniques are also very popular among malicious users who inject some third-party code into a compromised web site just to spread some malware infections or for other illegal reasons. Typically these declarations appear as inline styles especially on elements such as iframes. So, to be on the safe side, it's better to avoid them. But what are the alternatives?

There are two main alternatives, which are also useful for screen readers users, because they don't suppress the proper reading of your text by these user-agents:

1. negative absolute positioning
2. negative text indentation

An example of the former:

#branding {
 background: url(logo.png) no-repeat 0 0;
}

#branding h1 {
 position: absolute;
 top: -1000em;
}

Variations of this technique include left: -1000em and left: -9999px. An example of the latter is:

h1 {
 background: url(logo.png) no-repeat 0 0;
 text-indent: -1000em;
}

Anyway, always remember this: it's the abuse, not the use that makes a CSS technique harmful. So if you're motivated by proper intentions, there's nothing wrong with using a particular CSS technique. On the contrary, if your intentions are illegal or abusing, then a CSS technique can actually be considered as harmful.