15 июля 2011, 13:25

Спрайты через <img>

Хорошая статья про то, почему нужно делать спрайты через <img>, а не через background:
http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

В двух словах: если вы хотите, чтобы при печати, сохранении на жёсткий диск и в контрастном режиме Виндоус ваши спрайты не потерялись, нужно подключать их через <img>.

Кодовые отличия двух подходов я показал на картинке:
Спрайты через &lt;img&gt;, а не через background

На тестовой странице обыкновенные спрайты действительно отваливаются при выше указанных условиях:
Спрайты через background работают не везде
Поделиться
3 комментария
Андрей Гурылёв
Именно с этой целью и делаются спрайты через background. Чтобы при печати этих картинок не было. Иначе говоря — бестолковая инфографика.
Случай, указанный вами вполне подходит: Яндекс Деньги, справочник и директ. Если я вижу эти надписи — смысл мне понятен. Иконки уже не очень-то нужны.
Другой вопрос уже в формировании их таким образом, чтобы при их исчезновении не испортился макет страницы.
Однако, бывают и другие случаи. Когда изображение либо вообще без текста, либо текст теряет смысл без изображения (например отображение графической стрелочкой активной страницы в навигации), в таком случае, не поспоришь, нужно использовать <img> (html5 — без слэша)

p.s. интересно, кто-нибудь пользуется контрастным режимом?
Коля Митин
Андрей Гурылёв, html5 допускает использование одиночных тегов и со слешем и без него. Так что это — дело вкуса.
Я всегда склоняюсь к валидному XML-синтаксису, просто на всякий случай.
Андрей Гурылёв
Зато на слэшах можно сэкономить уйму байт :D ну, это, конечно, не существенно в больших проектах, но, скажем, на сайтах-визитках я бы учитывал. Ну, на то она и свобода выбора :)
Артём Поликарпов
Я убрал слеши из статьи, чтобы выглядело лаконичнее. Спасибо за идею, Андрей :-)
Популярное