Альтернативный способ спрятать текст у графического заголовка

4 мая 2015 | Опубликовано в css | 1 Комментарий »

В веб-дизайне широко используется способ, позволяющий спрятать текст у графического заголовка веб-страницы с помощью свойства отступа текста со значением -9999px. При этом текст передвигается со страницы из видимой для посетителей сайта области, но это может повредить поисковой оптимизации. При использовании логотипа на странице веб-сайта понадобиться добавить изображение с помощью тега изображения:

<img src="logo.png" />

Но это создает проблему, так как на странице нет ключевого слова названия сайта, его можно добавить с помощью атрибута alt, всплывающей подсказки, но эффективность этого решения будет меньше, чем если бы название сайта было на странице в теге h1.

А при применении тега h1 нельзя использовать изображение логотипа сайта с помощью тега изображения, в этом случае единственный способ добавить изображение как фоновое изображение тегу h1, чтобы при этом текст был в теге h1. Но тут возникает другая проблема, так как теперь на странице есть и логотип, и текст названия сайта.

Для решения этой проблемы появился способ использования свойства text-indent:-9999px, при добавлении которого в код CSS тегу h1 можно использовать и логотип, и текст в теге h1, при этом текст не будет виден.

Код HTML

<h1>Website Title</h1>

Код CSS

h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:300px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
}

Этот способ работает хорошо, но его минусом является удар по производительности, так как браузер будет рисовать огромный блок на 9999px за пределами экрана.