Блог almlex’a

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

Они не имеют никакого отношения к напитку Sprite™ и не имеют особого отношения к спрайтам из компьютерных игр, это картинка которая содержит несколько, логично связанных (иногда и не очень) изображений.

Зачем?

Спрайты помогают экономить траффик. Причём как траффик клиента, так и траффик сервера. Согласитесь один запрос к серверу намного лучше ста.

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

И плюс, который для меня является, пожалуй, самым важным — логичные файлы.

Яркий пример экономии траффика — YouTube. Его сервера итак очень сильно нагружены видео и превьюшками этого видео. И спрайты серьёзно экономят им в запросах. Но выглядит их спрайт, правда, монструозно.

Как?

Можно делать спрайты ручками и отсчитывать пиксели самому. Иногда это даже удобно. Но всё же в большинстве случаев нужно использовать Генератор CSS-спрайтов. Он вам позволит и изображение делать, и классы генерировать.

В ручную удобно работать, если у вас картинки одинакового разрешения, 16×16 например. Тогда отсчитывать будет не так сложно. Хотя сам я привык спрайты делать руками. Мне так легче, чем когда мне нужно доделывать что-то за генератором

Проблемы?

Действительно, есть несколько незначительных проблем. В частности с Opera, она не признаёт позиции фона более 2042px или менее -2042px. А Safari имеет проблему с повторением фоновых изображений.

Однако, обе эти проблемы уже любимый нами генератор спрайтов учитывает.

Спрайты бывают разные: чёрные, белые, красные.

Не стоит себя ограничивать спрайтами в ряд или в столбик. Я, например, использую спрайты для иконок голосования:

Или другой пример — иконки bb-кодов:

Первый спрайт я использую для логики, а второй для одновременной подгрузки.

И в заключение привожу вам пример спрайта в действии (три состояния).

.sprite-ex {
 display:block;
 width:138px;
 height:58px;
 background: url('/files/img/css-sprite-example.png') no-repeat 10px 10px;
 text-decoration:none;
 cursor:default;
 margin:0 auto;
}

.sprite-ex:hover { background-position: -168px 0; }

.sprite-ex:focus {
 background-position: -346px 10px;
 outline:none !important;
}