Hide Text with CSS, Best Practice?

Question

Let's say I have this element for displaying the website logo:

<div id="web-title">   <a href="http://website.com" title="Website" rel="home">     <span>Website Name</span>   </a> </div> 

The #web-title would be styled with background:url(http://website.com/logohere.png), but how to properly hide the text Website Name? As seen here: Hide text using css or here https://stackoverflow.com/a/2705328 , I've seen various methods to hide the text, such as:

#web-title span { text-indent: -9999px; } 

or

#web-title span { font-size: -9999px; } 

or

#web-title span { position: absolute; top: -9999px; left: -9999px; } 

I've also seen some combine those three methods. But actually which one is the best practice to hide text effectively?

Answer 1

Actually, a new technique came out recently. This article will answer your questions: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

.hide-text {   text-indent: 100%;   white-space: nowrap;   overflow: hidden; } 

It is accessible, an has better performance than -99999px.

Update: As @deathlock mentions in the comment area, the author of the fix above (Scott Kellum), has suggested using a transparent font: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.

Answer 2

you can simply make it transparent

{    width: 20px;    height: 20px;    overflow: hidden;     color:transparent; }