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

Question

[Kukunin]

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

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

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

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

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

Ответы типа «Зачем?» или «Сделай через img alt» не принимаются: семантика и доступность на главном месте.

Comments

[Kukunin]

Вот пример полоски статьи хабра, без картинок. Как видно — ничего не видно:

Answer 1

[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.

Comments

[Kukunin]

интересно… чувствую, что это близко, но… нет масовости. т.е. нужно каждую картинку приспосабливать. Много затрат ради 1% людей с выключенными картинками.

Просто, проблема доволи банальна и распространенная, и странно, что нет решение и никаких разработок в эту тему.

P.S. Я тоже использую логотип гугла, когда нужна любая картинка. Это как использовать ya.ru для пинга =)

[denver]

Хм. Ну если нужно лаконичный HTML, то фоллбэк можно с JS реализовать. Если надо дополнительный CSS, то засунуть его в тот же object можно, с 1x1trans.png в data. Правда это будет невалидно, потому что CSS только в head разрешены, но обычно работает.

Answer 2

[MT]

Если нечто спрятано за пиктограммой, оно, скорее всего, некритично. ;-)

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

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

Размеры изображения и элемента должны совпадать. Тогда, если изображения включены, текст отодвигается изображением за пределы элемента, а если выключены — генерируемый контент имеет нулевую высоту, и виден текст.

Comments

[Kukunin]

Хм. а это кстати идея. Я постоянно думал о том, чтобы спозиционировать под картинкой, а тут просто сдвинуть. И проблема с полупрозрачными пиктограмами будет решена.

[egorinsk]

Для ИЕ придется через 1-shot expression еще код с appendChild() дописать.

[Kukunin]

Пользователей ИЕ7 — ~2%. Я уже его не поддерживаю, и мои заказчики с этим согласны =)

Answer 3

[Fyodor]

А если если слой с текстом поместить под это все через допустим абсолютное позиционирование? пишите там что хотите — картинки если отключат — увидят этот текст.

Comments

[Kukunin]

а если картинка полупрозрачная — тогда будет просачиватся. Так же, можно и цвет указывать, в дополнении к background'у. Пользователь хоть увидить прямоугольник, подведет мышку — и уже title покажет ему, что это.

Answer 4

[Станислав]

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 тоже не подходит?

Comments

[Станислав]

тьфу, не совсем так, но примерно.

[Kukunin]

что ж, подходит. Определяешь, вешаешь клас на body, и доп. CSS для тех, кто в танке. Можна оформить как дополнение к $.support в jQuery.

[egorinsk]

Код кривой и неверный. К моменту вызова кода, возможно, картинка еще не успела загрузиться. Использование jQuery тут неоправданно. (дожили, тащить 200 Кб кода ради картинки) Логичнее было бы создать new Image() и слушать на нем onload и onerror.

[Kukunin]

это концепт. Т.е. показать идею, а не давать 100% готовое решение. Естественно, нужно вешать обработчик на события.

P.S. jQuery весит 32kb.