Попытка уменьшить HTTP-запросы с помощью CSS-спрайтов, но теперь изображения не отображаются должным образом - PullRequest
Новая
       10

Попытка уменьшить HTTP-запросы с помощью CSS-спрайтов, но теперь изображения не отображаются должным образом

0 голосов
/ 23 ноября 2011

Чтобы попытаться уменьшить количество HTTP-запросов, я объединил группы связанных изображений в спрайты.

Я понимаю методологию, лежащую в основе этого, но я не могу заставить ее работать правильно для тех, на которых я работаю, и хотел бы получить некоторую помощь.

Вот новая разметка и css (предыдущая разметка только что имела отдельные теги img, обернутые в тег привязки): 

<div id="footer-flags">
    <ul>
        <li class="countryName">Region: </li>
        <li class="active countryFlag" id="uk"><a title="United Kingdom" href="javascript:void(0);"></a></li> 
        <li class="countryFlag" id="us"><a title="United States" target="_blank" href="http://www.us-site.us"></a></li> 
        ... 5 more
    </ul>
</div>

CSS как показано ниже: 

#footer-flags {
    float:right;    
}
#footer-flags ul {
    list-style-type: none;
    margin:-3px 0 0 0;
    overflow:hidden;
    padding:0;
}
#footer-flags ul li {
    background-image: url(/img/flags/flags-sprite.jpg);
    height: 11px;
    width: 14px;
    float:left;
    padding-left:5px;
    padding-top:3px;
}
#footer-flags #de {
    background-position: 0px 0px;
}
#footer-flags #fr {
    background-position: 0px -11px;
}
#footer-flags #hr {
    background-position: 0px -22px;
}
#footer-flags #ie {
    background-position: 0px -33px;
}
#footer-flags #nl {
    background-position: 0px -44px;
}
#footer-flags #uk {
    background-position: 0px -55px;
}
#footer-flags #us {
    background-position: 0px -66px;
}

#footer-flags ul li.active {
    background:url("/img/flags/flag-highlight.png") no-repeat scroll left top transparent;
    margin-right:-5px;
    padding:3px 5px 5px;
}

Изображение спрайта имеет размер 14 x 77 пикселей (поэтому флаги расположены друг над другом).

Вот скрипка, если кто-то ее предпочитает: http://jsfiddle.net/WNXNz/4/

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

Из того, что я вижу, я думаю, что реализовал это правильно, но, скорее всего, мой CSS - это кошмар, потому что раньше мне приходилось использовать только спрайт, и это было только для одного изображения.

1 Ответ

2 голосов
/ 23 ноября 2011

CSS-спрайты не должны использоваться для HTML img. Теперь у вас есть пустые ссылки : это плохо для доступности и SEO.

Доступность: вы можете проверить соответствующую методику WCAG 2.0 H30: Предоставление текста ссылки, описывающего назначение ссылки для элементов привязки
Люди, которые отключают изображения, CSS, используют программу чтения с экрана или используют режим высокой контрастности в Windows, не смогут узнать, есть ли там ссылка, или не будут знать, что она может сделать.

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

Тем не менее, CSS-спрайты отлично подходят для фоновых изображений:)

...