Прощай -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 за сценою. Метод також допоможе уникнути дивних контурів, які видно навколо посилань, що використовують прихований текст.
Я так і не зміг виявити жодних недоліків - лише хотів би знайти їх першим. Прийняли ви цей метод? Виникли які-небудь питання?