Fallback, если у браузеры выключены изображения

Есть ссылка в HTML с текстом, на которую, через CSS навешали фоновое изображение (текст убрали + фиксированные размеры).

С точки зрения семантики, правильно делать так, а не через тег img, поскольку сама пиктограмма не несет смысловой нагрузки. А бот или поисковик увидит понятный текст ссылки, а не непонятную для него картинку. Естественно, на элементе есть атрибут title, который дополняет (обьясняет) пиктограмку.

Но вот беда, если у пользователя выключены изображения, он ничего не увидит. Даже квадратика. Даже фонового цвета. В случае с тегом img, покажется alt текст, даже кусок (пиктограмка 16х16пикселей, много текста не влезет).

Самое обидное в этой ситуации, что я понимаю, что решения нет: или делай через alt, либо фоновый цвет устанавливай тоже (забудь про полупрозрачные пиктограмки), либо еще какой-то хак.

Может как-то можно отследить, включены ли в браузере изображения, и использовать доп. CSS, если нет (установить сплошной цвет например, а пользователь по тегу title поймет).

Ответы типа «Зачем?» или «Сделай через img alt» не принимаются: семантика и доступность на главном месте.
  • Вопрос задан
  • 2821 просмотр
Пригласить эксперта
Ответы на вопрос 4
denver
@denver
Попробуйте покопать в сторону <object>, это то ради чего данный тег и был придуман:

<a href="http://google.com">
    <object data='http://www.google.com/images/srpr/logo3w.png' type="image/png">
        Turn on images!
    </object>
</a>

Я проверил: в FF при отключении картинок показывает текст, но не в Хроме (хотя если картинка возвращает 404 то текст покажет), в других не тестировал. Возможно это бага хрома, потому что согласно спецификации:
If the user agent is not able to render the object for whatever reason (configured not to, lack of resources, wrong architecture, etc.), it must try to render its contents.
Ответ написан
MTonly
@MTonly
Веб-разработчик с 2002 года
Если нечто спрятано за пиктограммой, оно, скорее всего, некритично. ;-)

А для элементов нормального размера (например, логотипов) можно вставлять изображение как генерируемый CSS-контент:

.example {overflow: hidden; width: 100px; height: 30px; }
.example:before {content: url(example.png); display: block; font-size: 0; line-height: 0; }

Размеры изображения и элемента должны совпадать. Тогда, если изображения включены, текст отодвигается изображением за пределы элемента, а если выключены — генерируемый контент имеет нулевую высоту, и виден текст.
Ответ написан
@Richard_Ferlow
Веб-программист
А если если слой с текстом поместить под это все через допустим абсолютное позиционирование? пишите там что хотите — картинки если отключат — увидят этот текст.
Ответ написан
crackedmind
@crackedmind
web-developer
var image = $('img'); // jquery
var imgObj = new Image();
imgObj.src = image.attr('src');
if ( imgObj.width == 0 || imbObj.height == 0 )
{
	// TODO
}


По крайней мере Opera с отключенными картинками показывает 0 для этих аттрибутов. А в хроме если не удалось загрузить изображение. В других браузерах низнаю как отключить :)

p.s. или вариант с js тоже не подходит?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы