Прощай -9999px: нова техніка заміни зображень через CSS

Крейг Баклер

Техніка заміни зображень через -9999px була популярна практично десятиліття. Для заміни текстового елемента зображенням, можна використати наступний код:

<h1>Замінюємий текст</h1>
<style>
h1
{
  background: url("myimage.png") 0 0 no-repeat;
  text-indent: -9999px;
}
</style>

Фон елементу відображається, а текст переміщується за межі екрана, щоб він не заважав. Просто та ефективно. Цей прийом використовується для показу графічних заголовків - тепер він потрібен рідко, оскільки у нас є веб-шрифти, - але ви все одно знайдете приклади використання по всьому Інтернету.

До цього моменту.

Нова техніка була придумана Скоттом Келлумом та опублікована на Zeldman.com.

#replace
{
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

У коді текст зсувається вправо на ширину контейнера, але текст не переміщується і приховується за межами контейнера.

Хоча цей метод дещо довший та складніший для запам'ятовування, продуктивність може бути підвищена, оскільки браузеру не потрібно малювати блок в 9999px за сценою. Метод також допоможе уникнути дивних контурів, які видно навколо посилань, що використовують прихований текст.

Я так і не зміг виявити жодних недоліків - лише хотів би знайти їх першим. Прийняли ви цей метод? Виникли які-небудь питання?

SEO текст: Нова техніка заміни зображень на веб-сайтах дозволяє ефективно показувати графічні заголовки без використання устарілої техніки -9999px. Цей метод полегшує використання веб-шрифтів та підвищує продуктивність. Читайте про цю інноваційну техніку заміни зображень на сайті Zeldman.com.

Часті запитання