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

Оригинал: sitepoint.com/new-css-image-replacement-technique

Перевод: Влад Мержевич

Техника замены изображений через -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 за сценой. Метод также поможет избежать странных контуров, которые видны вокруг ссылок, использующих скрытый текст.

Я так и не смог обнаружить никаких недостатков — только, что хотел бы найти их первым. Приняли ли вы этот метод? Возникли какие-то вопросы?