Sprite 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>