Спрайт Fallback

Question

У меня есть несколько изображений на странице, содержащихся в одном изображении спрайта, эти изображения должны содержаться в одном спрайте из-за других требований сайта.

Хотя в большинстве браузеров это работает нормально, у меня есть проблема с Opera Mini, когда он вообще не отображает спрайт, а просто отображает все изображение.

Есть ли какой-нибудь CSS, который можно использовать для предоставления текстовой альтернативы, когда браузер не может отобразить спрайт?

Answer 1

Немного смущен. Спрайт не рендеринг, а отображение всего изображения? Вы видите все спрайты одновременно или их нет вообще?

Вы можете использовать обнаружение браузера для Opera Mini (и любых других мобильных браузеров, в которых рендеринг не работает должным образом).

Добавьте нужный текст в элемент спрайта и используйте большой отрицательный текстовый отступ, чтобы скрыть содержимое.

Отключить отступ и фоновые изображения для неподдерживаемых браузеров.

allbrowsers.css

div.sprite {
  width:20px;
  height:20px;
  background:transparent url(img/mysprites.gif) no-repeat scroll top left;
  overflow:hidden;
  text-indent:-5000px;
}
#first_sprite {
  background-position:20px 40px;
}

mobilebrowsers.css

div.sprite {
  background-image:none;
  text-indent:0;
}

страница

<div id="first_sprite" class="sprite">Alternate text</div>