CSS practices: negative positioning

Question

I'm somewhat of a novice to CSS.

Anyway, I noticed that an extremely common method used in CSS is to have negative or off-screen positioning, whether it be to hide text or preload images or what have you.

Even on SE sites, like StackOverflow and this website, have

#hlogo a { text-indent: -999999em } 

set in their CSS.

So I guess I have a few questions.

• is this valid CSS? or is it just a "hack"?
• are there downsides to doing things this way?
• why is this so common? aren't there better ways to hide content?

Answer 1

1. It's valid, and it's a "hack" only that you are using a large negative indent to hide text, probably not designed with that in mind.
2. Yes, the text cannot be seen.
3. Depends, for SEO purposes the text is there, yet normally replaced by an image or icon.

Answer 2

It is valid, and it's screen reader friendly. However I wouldn't recommend over doing it, because Google may see it as a blackhat technique since a lot of spammers use negative indentation to hide links.

Answer 3

It's a hack used to hide text while using images as backgrounds, mostly seen into practice with site branding. The modern-day websites do it the better way by simply using <img> to display logos.

1. It is valid CSS.
2. The only downside is that the text can't be visible.
3. Don't really know why this is common, but there are better techniques to hide text if you can ignore older versions of web browsers.