Скрыть текст с помощью CSS, передовой опыт?

Скажем, у меня есть этот элемент для отображения логотипа сайта:

<div id="web-title">
  <a href="#" onclick="location.href='http://website.com'; return false;" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>

#blog-title будет в стиле background:url(http://website.com/logohere.png), но как правильно скрыть текст Website Name? Как показано здесь: Скрыть текст с помощью css или здесь qaru.site/info/133136/..., я видел различные методы, чтобы скрыть текст, например:

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

или

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

или

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

Я также видел, как некоторые объединяют эти три метода. Но на самом деле, какая из них лучше всего скрыть текст?

Ответ 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.

Ответ 2

вы можете просто сделать его прозрачным

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

Ответ 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;
}

Ответ 4

как это сделает большинство разработчиков:

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

.webname {
   display: none;
}

Я тоже делал это, пока не понял, что вы скрываете контент для устройств. aka screen-reader и т.д.

Итак, передавая:

#web-title span {text-indent: -9000em;}

вы убедитесь, что текст по-прежнему доступен для чтения.

Ответ 5

Добавить класс .hide-text в ваш диапазон, который имеет текст

.hide-text{
display:none;
 }

или сделать текст прозрачным

.hide-text{
 color:rgba(0,0,0,0);
 }

использование в зависимости от вашего использования.

Ответ 6

Если вы согласитесь разместить это в своей разметке (как вы в своем вопросе с удержанием текста), я бы пошел с любым интерфейсом jQuery UI в Помощники CSS:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

Способы замены изображений хороши, если вы абсолютно отказываетесь добавлять дополнительную разметку для текста, который должен быть скрыт в контейнере для изображения.

Ответ 7

То, что требуется Google (поисковому роботу), - это тот же контент, который должен быть отправлен боту, поскольку он предоставляется пользователю. Отступы текста (любой текст) заставляют бота думать, что он является спамом, или вы обслуживаете другой контент для пользователя и бота.

Лучший способ - прямое использование логотипа в качестве изображения внутри вашего якорного тега. Дайте "alt" вашему изображению. Это будет идеально подходит для чтения бота, а также поможет в поиске изображений.

Это прямо из устья лошади: http://www.youtube.com/watch?v=fBLvn_WkDJ4

Ответ 8

По состоянию на сентябрь 2015 года наиболее распространенной практикой является использование следующего CSS:

.sr-only{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}

Ответ 9

Я делаю это так:

.hidden-text {
  left: 100%;
  display: inline-block;
  position: fixed;
}

Ответ 10

Я понимаю, что это старый вопрос, но структура Bootstrap имеет встроенный класс (только sr) для обработки скрытого текста на всех, кроме программ чтения с экрана:

<a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>