Использование и применение CSS спрайтов на сайте

Это моя очередная статья о css-спрайтах. Решил написать её после модернизации своего сайта на основе Cascade Framework. Статья предназначена для пользователей, которые решили попробовать метод css спрайтов для размещения графических элементов на своем сайте или блоге. В статье попытаюсь осветить практическое применение css спрайтов на примере моего сайте. На нём используется 80 спрайтов. Как уже описывалось в предыдущих статьях, спрайты применяются в качестве графических элементов часто повторяющихся на страницах сайта. На моём ресурсе css-спрайты используются в качестве элементов управления, идентификаторов абзацев, кнопок социальных сервисов и логотипов. Все эти элементы действительно часто повторяются на моих страницах, их можно вживую увидеть и «пощупать» те из них, которые несут некую функциональность, чтобы убедиться в их работоспособности.

Внизу каждой страницы есть кнопка возврата к началу страницы для удобства вертикальной навигации. Выполнена она в виде двойной оранжевой стрелки, направленной вверх. На эту кнопку «повешен» скрипт плавной прокрутки страницы в духе модных ныне тенденций. Кроме этого к кнопке применен эффект замены на стрелку большего размера при наведении курсора (rollover). Эффект замены изображения сделан на CSS без применения скриптов. Обе картинки-стрелки – это спрайты. В подвале некоторых страниц расположены кнопки быстрого перехода к некоторым социальным сервисам. Это тоже спрайты, сделаны они без всяких эффектов и служат для удобства гипотетических пользователей, которые как-то вдруг решили поделиться ссылкой на мой сайт в соцсетях. Все идентификаторы абзацев – это также css-спрайты, сделанные из картинок в виде различных списков. На страницах загрузки русификаторов можно увидеть картинки-спрайты, которые обеспечивают скачивание русификаторов, просмотр скриншотов русифицированных программ и просмотр или загрузку дополнительной информации. К этим кнопкам-спрайтам тоже применен rollover-эффект для наглядности. В шапке каждой страницы расположена кнопка-логотип моего сайта. Логотип также сделан из css-спрайтов с эффектом замены изображения.

Глобальный спрайт

А теперь о том, как используются и применяются перечисленные спрайты. Я не буду повторяться и говорить о преимуществах применения css-спрайтов на сайтах и блогах, об этом можно почитать в моих предыдущих статьях на эту тему. Их список я приведу ниже. А пока покажу применяемые мной стили и разметку для размещения спрайтов на страницах моего сайта. Все спрайты, используемые на сайте, сведены в один глобальный css-спрайт. Вот он, на картинке слева. Для наглядности я обвел его рамкой.

Прокрутив страницу, можно отметить, что спрайт состоит из нескольких вертикальных линеек изображений, причем эти изображения преимущественно одного размера. На старом сайте эти линейки картинок представляли собой отдельные спрайты, которые были сделаны мной в генераторе css спрайтов Instant Sprite. Можно увидеть две линейки ярлыков программ, русифицированных мной, линейку элементов управления, линейку идентификаторов абзаца и прочие. При обновлении сайта я объединил исходные картинки в один глобальный спрайт в Windows-версии бесплатного графического редактора Gimp по образу и подобию тех линеек, которые были на старом сайте. Почему в этом редакторе? Потому, что в нем это делать достаточно удобно. Кроме всего прочего у меня в этом редакторе установлен модуль оптимизации веб-графики Riot. Поскольку я стараюсь обеспечить поддержку старых браузеров, то сохраняю и оптимизирую спрайт в 8-битовом формате PNG. Таким образом я убил двух зайцев – в одной программе и создал, и оптимизировал спрайт.

Самый простой способ создания мастер-спрайта – это добавление нужных картинок на прозрачный холст определенного размера в графическом редакторе. Но этот способ трудоемок и нудноват. При реконструкции сайта я сделал несколько иначе. Были использованы уже использовавшиеся на предыдущем сайте готовые линейки иконок программ. В редакторе Gimp с помощью плагина Web Sprites были сделаны еще несколько тематических спрайтов. Потом все эти спрайты были сведены в один глобальный спрайт. Затем были получены координаты (background-position) и размеры css-спрайтов в программе Sprite Cow.

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

1. Создаем несколько тематических спрайтов. Вместо утомительной ручной расстановки нужных картинок в графическом редакторе можно воспользоваться следующими возможностями (любой из перечисленных):

  • Создать тематические спрайты (желательно из картинок близких размеров) в графическом редакторе Gimp с помощью плагина Web Sprites.
  • Или сделать тоже самое с помощью генераторов css-спрайтов Instant Sprite или DoHTMLSprite.
  • Или сделать тоже самое с помощью программы Sprite Sheet Packer.
  • Или сделать то же самое с помощью опции «Создать ленту изображений» в бесплатном просмотровщике графических файлов FastStone Image Viewer или программе FastStone Capture.

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

  • Можно использовать Gimp.
  • Можно использовать Paint Net.
  • Или любой другой редактор, работающий со слоями.

3. Завершаем работу – с помощью калькулятора Sprite Cow определяем координаты спрайтов (значения свойства background-position) и создаем стили для наших спрайтов.

Необходимое дополнение. При создании спрайтов необходимо обязательно обеспечить промежутки (смещения, отступы) как между картинками, так и между рядами картинок. Промежутки предохраняют визуализацию спрайтов при пользовательском изменении масштаба просмотра веб-страницы. Но не только – промежутки также необходимы для нормального выделения спрайтов в Sprite Cow при получении их координат. Я обычно делаю промежутки 4–6px.

По мере наполнения сайта контентом иногда возникает необходимость в новых спрайтах. В моем случае это ярлыки программ, для которых я делаю русификаторы Как добавить новый спрайт? Почти также как создается мастер-спрайт. В графическом редакторе я увеличиваю размер холста своего глобального спрайта и помещаю на свободное место новую картинку. Затем на сохраненном мастер-спрайте с помощью калькулятора координат css-спрайтов Sprite Cow определяю координаты картинки (значения свойства background-position) и прописываю необходимые стили и разметку.

Согласно спецификации CSS свойство background-position применяется для блочных и заменяемых элементов. На практике спрайты часто применяются в строчных элементах, который делают блочным при помощи свойства display:block, чтобы задать ширину и высоту. Для этих элементов и задаётся свойство background c необходимыми координатами (background-position). На своём сайте я чаще всего использую спрайты в контейнере <span></span> и в ссылках. На старом сайте спрайты использовались ещё в ячейках таблиц. Многие пользователи используют css-спрайты в списках при создании навигационных меню, основанных на спрайтах.

В заключение приведу несколько конкретных примеров использования css-спрайтов на моём сайте. На скриншотах будут показаны стили, разметка и соответствующие им результаты. Желтым цветом выделены соответствующие участки кода и результата. Особых вопросов здесь возникнуть не должно.

Спрайт в ссылке

На верхнем скриншоте приведен пример использования спрайта-логотипа в шапке сайта. К нему применен эффект замены изображения, выполненный на CSS. Это видно по координатам спрайта в обычном состоянии и при наведении (псевдокласс hover). Можете подняться к шапке и попробовать спрайт и ссылку в действии. Ссылка ведет на страницу «Об авторе».
На скриншоте, расположенном ниже, показано использование спрайта для графического выделения абзаца. Здесь особых пояснений не требуется.

Спрайт в ссылке

На обоих скриншотах видно, что для компактности кода я использую однострочное написание стиля. Это один из способов оптимизации CSS (более подробно об этом я написал в статье «CSS спрайты и программы (генераторы) создания css-спрайтов». Кроме этого я задал ширину и высоту картинок только в мастер-спрайте, а не для каждой картинки. Дополнительно в стиле убраны лишние пробелы и необязательные точки с запятой перед закрывающей фигурной скобкой (для наглядности убраны не все точки с запятой, см. второй скриншот – стиль одинаково работает и в том и в другом случае).

Хочу отметить одну особенность калькулятора координат Sprite Cow. Эта программа определяет фактические размеры спрайта и, соответственно, его координаты. Более подробно это освещено в статье «Калькулятор координат css-спрайтов Sprite Cow». Рекомендую прочитать раздел статьи об этих особенностях. Потом продолжим. Прочитали. Тогда идем далее. Так вот, если фактический размер картинки (без фонового окружения) меньше заявленного, могут возникнуть накладки.

Спрайт с накладкой

Посмотрите на рисунок. На нем изображена часть страницы с иконкой программы Flash2X EXE Packager. Все иконки программ, расположенные на этой странице имеют размер 32x32 px. Соответственно эти размеры прописаны мной в стиле для мастер-спрайта и наследуются его дочерними селекторорами. Фактический же размер этого значка 30x23 px. Таковым его и показывает Sprite Cow. Естественно эта разница отражается и на координатах спрайта, особенно по высоте. В результате на странице появляется кусочек нижележащей картинки, что и видно на рисунке. Для того, чтобы все отображалось нормально, я не стал прописывать реальные размеры спрайта в его селекторе, а просто на 3 px изменил его координату по оси Y. Все сразу встало на свои места, можете убедиться в этом перейдя на страницу «Русификаторы 2». Во избежание подобных случаев рекомендую внимательно просматривать страницы, где используются css-спрайты. И не просто просматривать, а просматривать при различном масштабировании страницы в разумных пределах.

Кажется, все. В заключение привожу обещанный список моих статей на тему css спрайтов.

Вот ссылки на них в порядке публикации:

Если статья вам понравилась, поделитесь с друзьями.

Чуть не забыл. Настоятельно рекомендую ознакомиться с обучающим руководством по использованию и применению css-спрайтов на сайте с говорящим названием Tutorial Republic. Статья на английском, написана очень четко и внятно. Если вы знаете английский в пределах школьного курса, то затруднений не будет. Можно также воспользоваться услугами Яндекс- или Гугл-переводчика. Причем первый из них переводит с большей ясностью. Рекомендуемое руководство – одна из лучших статей, которые я видел на тему css спрайтов. Никакого соплежевания и размазывания – все по делу и по существу. Статья изобилует множеством конкретных примеров, которые можно не только посмотреть, но и потренироваться на них. Для этого есть переход с каждого примера в онлайн-редактор сайта, где можно внести в код свои правки и тут же увидеть результат содеянного. Не сочтите за рекламу (я никак не связан с этим сайтом), но с тех пор как я наткнулся на него, он стал моим советчиком по многим вопросам. На сайте есть справочные материалы и туториалы по HTML, CSS, PHP, жаль нет по JS.