Hide Text with CSS, Best Practice?
Can't you use simply display: none;
like this
HTML
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span class="webname">Website Name</span>
</a>
</div>
CSS
.webname {
display: none;
}
Or how about playing with visibility if you are concerned to reserve the space
.webname {
visibility: hidden;
}
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.
the way most developers will do is:
<div id="web-title">
<a href="http://website.com" title="Website" rel="home">
<span class="webname">Website Name</span>
</a>
</div>
.webname {
display: none;
}
I used to do it too, until i realized that you are hiding content for devices. aka screen-readers and such.
So by passing:
#web-title span {text-indent: -9000em;}
you ensure that the text still is readable.
you can simply make it transparent
{
width: 20px;
height: 20px;
overflow: hidden;
color:transparent;
}