Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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 за пределами экрана.

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

Применение этого способа сокрытия текста графического заголовка на веб-странице объясняется в статье Zeldman.

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

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

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

Автор урока Paul Underwood

Перевод — Дежурка

Смотрите также:




Комментарии