使用CSS隐藏文本,最佳实践？

Question

假设我有这个元素用于显示网站徽标:

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

该#blog-title会与设置样式background:url(http://website.com/logohere.png),但如何正确地隐藏文本Website Name？如下所示:使用css或/sf/answers/189372991/ 隐藏文本,我已经看到了隐藏文本的各种方法,例如:

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

要么

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

要么

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

我也看到一些结合这三种方法.但实际上哪一个是有效隐藏文本的最佳实践？

Answer 1

实际上,最近出现了一种新技术.本文将回答您的问题:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

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

它是可访问的,具有比-99999px更好的性能.

更新:正如@deathlock在评论区域中提到的,上面修复的作者(Scott Kellum)建议使用透明字体:http://scottkellum.com/2013/10/25/the-new-kellum-method .html.

Answer 2

你可以简单地让它透明

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

Answer 3

你不能display: none;像这样简单地使用

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;
}

或者如果你担心保留空间,那么如何玩能见度呢？

.webname {
   visibility: hidden;
}