Разные методы Image Replacement для разных браузеров
13 Oct. 2006Из всех видов IR на сегодня мне больше всего нравится метод с использованием CSS-свойства content с псевдо-классом :before. Этот метод работает в современных браузерах, примерно у 20% пользователей. По-моему, достаточно для начала. Что делать с остальными восьмидесятью — ниже.
В самой минимальном варианте CSS выглядит так:
h1 {
overflow: hidden;
width: 300px;
height: 30px;
}
h1:before {
content: url(example.png);
}Шрифт заголовка желательно уменьшить, чтобы он умещался в блоке, если картинки отключены, и чтобы больше походил на альтернативный текст
font: normal 80% sans-serif;Opera, при отключении картинок, показывает вместо сгенерированной графики слово “Image”. Чтобы оно не мешалось, достаточно задать псевдо-классу размер шрифта поменьше и цвет, совпадающий с фоном. Никакого вреда юзабилити или другим браузерам от этого не замечено.
color: #FFF; /* for Opera */
font-size: 1px; /* for Opera */В результате получаем:
h1 {
overflow: hidden;
width: 300px;
height: 30px;
margin: 0;
padding: 0;
font: normal 80% sans-serif;
}
h1:before {
content: url(example.png);
color: #FFF; /* for Opera */
font-size: 1px; /* for Opera */
}Для поддержки MSIE используем другой CSS-метод Image Replacement, например Phark Method. Без JS, без лишней HTML-разметки. Он прекрасно работает в MSIE. Главный недостаток: при отключении картинок, но с включенным CSS, вообще никакого текста не видно. В остальном, Phark Method — простой и надежный метод. Часто используется.
Дополнительный код должен подключаться с использованием Conditional Comments, чтобы его увидел только MSIE.
h1 {
background: url(_h1.png) 0 0 no-repeat;
text-indent: 5000px;
}Благодаря тому, Firefox не видит этого кода, не проявляется, связанный с ним недостаток Phark Method-а. Теперь они просто не пересекаются.
Итак, без всякого вреда для пользователей IE, незаметно для них и начальства, мы легким движением руки улучшаем жизнь пользователям современных браузеров. Которых с каждым днем все больше и больше.
Вот это я и называю: сделать на все 100% для одних, и на 120 — для других.
Что еще почитать о замене текста картинкой (Image Replacement)
29 May. 2008 at 20:05
отличный способ… вот только пытаюсь расширить применение, но получаю кучу вопросов:
* а как насчёт заголовок-ссылка?
* или графическое меню-роловеры? (делать 2 картинки, само собой – но тогда в ИЕ будут “мерцания” по ховеру… а делать роловеры одной картинкой ещё и для ИЕ — не кошешерно)
буду благодарен ответу!
30 May. 2008 at 13:05
Честно говоря, не вижу препятствий для реализации того и другого. Заголовок-ссылка ничем не отличается от ссылки в элементе списка и т.п. Используются другие селекторы и всё.
Бороться с мерцанием можно разными способами. Проще всего, используя технику css-sprite.
Что то подобное я делал на этой странице. Там span-ы использованы, но это просто осталось с предыдущей реализации, можно обойтись без них.
Немножко не понял что такое “роловеры одной картинкой ещё и для ИЕ”. И что значит “некошерно” в отношении CSS. Работает? Значит все нормально.
03 Jun. 2008 at 16:06
04 Jun. 2008 at 14:06
Почему “никак”? Можно использовать margin-left с отрицательным значением.
Я добавил к коду примера следующий код:
h1:hover:before {
margin-left: -300px;
}
И модифицировал картинку.
Всё работает. Естественно можно использовать другой селектор, не h1.
04 Jun. 2008 at 16:06
вах!!! молодца!!! респект :)
будем модифицировать… сейчас юзаю NIR (он же BIR), а вообще переходить на твой метод собираюсь, он прошёл все полевые испытания, (и уже!) включая sprites. TNX!
04 Jun. 2008 at 17:06
Пожалуйста. Буду рад, если пригодится.
06 Oct. 2008 at 14:10
[...] кроссбраузерная вставка Flash-анимации. Разные методы Image Replacement для разных браузеров. Световые кисти для [...]
15 Feb. 2009 at 04:02
Для оперы сделал:
font-size:0;
в результате чего получил при выключенных изображениях рамку без надписи.
Так как у нас имеет место быть overflow:hidden; то от рамки избавился с помощью
.fn:before{
…
position:relative;
left:-2px;
}
Проверял в опере 9.63
Работает.
Какие то подводные камни кто то видит?
16 Feb. 2009 at 15:02
Надо посмотреть. Что-то подобное я делал. Но отказался, как раз из-за того, что в будущем может создать проблемы на новых браузерах. Ну, еще и потому, что Опера зря эту рамку показывает, а следовательно сама себе злобный буратино. Ну и еще :) потому, что правильнее серфить не только с отключенными картинками но и стилями. В общем, клубок причин.
11 Apr. 2009 at 20:04
помогите как будет выглядеть решение для схемы
текст
не понимаю
спасибо заранее за помощ!
11 Apr. 2009 at 20:04
…в html превратилось
в общем в h1 вложенна ссылка!
заголовок ссылка -)
09 May. 2009 at 03:05
использовал line-height для IE 6
заголовок ссылка решилась -)
Есть вопросы
header-left address a {display: block; overflow: hidden; width: 104px; height:12px; }
header-left address a:before {content: url(/images/telefonLink.png); color: #FFF; font-size: 1px;}
При выключенных картинках текста почти не видно в таком блоке!
тк размеры блока маленькие – текст чуток вылезает как бы снизу
Как решить?