Пользователь
0,0
рейтинг
17 ноября 2012 в 11:54

Разработка → CSS спрайты: основные техники и полезные инструменты tutorial

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.



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



Применение на практике


Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок позволяет увеличить производительность сайта, но это не так — случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. Пример спрайта на сайте webdesign tuts:



Пример кода для использования спрайтов на странице (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>


Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):

<html>
<head>
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites_hover.gif') -91px 0;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
</style>
</head>

<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>


 До или после?


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

Более опытные разработчики готовят спрайты на начальном этапе, это позволяет лучше организовать графику будущего дизайна, а также готовить PSD-шаблон к верстке.

 Организация элементов дизайна


При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) — создать сетку, благодаря которой упростится использование спрайтов на сайте:



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

Полезные инструменты


Compass — отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.



Lemonade — инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.



SpriteMe — букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.



Вот как выглядит рабочий слой букмарклета:



Fireworks CS6 — последняя версия включает функцию генерации спрайтов.

 Полезные сервисы


Spritepad — drag-and-drop сервис для создания спрайтов



Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами



Glue — командная строка для генерации спрайтов

CSS Sprites — еще один генератор, с расширенными настройками

SpriteRight — приложение-генератор для Мака

Использованные материалы и полезные ссылки:
Кирилл @grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (33)

  • +1
    За Compass автору статьи огромное спасибо.)
  • +2
    Кто нибуть, расскажите, как победить глюки спрайтов в вебкит браузерах при зуминге страницы?
    Глюки заключаются в том, что спрайты плавают на 1-2 пикселя или не так масштабируются… это, скорей всего, свяанно с тем, как вебкиты округляют дробные значения.
    Использование em не спасает.

    Открыты следующие баги
    code.google.com/p/chromium/issues/detail?id=153626
    code.google.com/p/chromium/issues/detail?id=145078
    code.google.com/p/chromium/issues/detail?id=8279
    bugs.webkit.org/show_bug.cgi?id=45840
    Баги — древние, как мир.

    Мозилла с этим давно справилась
    robert.ocallahan.org/2008/10/hating-pixels_13.html

    Чувствую, что никак… поэтому пока — обхожу спрайты стороной.
    • +2
      Меня спасают паддинги в 1-2 пикселя.
      • +2
        да, это спасает. Я писал об этом года 4 назад еще
        webo.in/articles/habrahabr/08-all-about-css-sprites/
        webo.in/articles/habrahabr/52-css-sprites-are-evil/
        + data:URI как технология намного проще и позволяет «отложить» загрузку ресурсного файла (получается аналогичный CSS Sprites транспорт, но без всех их минусов)
        • –1
          к сожалению поддержка data:URI не работает в старых версиях браузерах, а также на встраиваемых (например на телефонах без ОС)
          • 0
            старые версии браузеров — сейчас меньше 1%
            • 0
              Ну как, у нас 4% например. Впрочем ничто не мешает сделать такой же ресурсный MHT-файл.
          • 0
            Для старых браузеров можно использовать fallback в виде реальных изображений-файлов.
            • 0
              Для scss + compass пользуюсь таким вот миксином.

              @mixin toDataUrl($url, $position:0 0, $repeat: no-repeat, $bgcolor: transparent, $full: true) {
              	@if ($full) {
              		background: $bgcolor inline-image($url) $repeat $position;
              	} @else {
              		background-image: inline-image($url);
              	}
              
              	.lt-ie8 & {
              		background-image: url($url);
              	}
              }
              


              .lt-ie8 можно поменять на любой удобный класс

              Использую как-то так:

              .selector {
              	@include toDataUrl($imgPath);
              }
              
              .selector {
              	@include toDataUrl('../images/bgs/arrow-right-blue.png', right center);
              }
              
              .img-replace {
              	@include toDataUrl('../images/bgs/social.png', $full: false);
              }
              
            • –1
              Я лично испозую замены через JavaScript на стороне клиента.
    • +2
      Я правильно понял, что это возникает только в случае, когда изображения в спрайте расположены вплотную?
      • 0
        Да.
        • 0
          > Меня спасают паддинги в 1-2 пикселя.

          Черт, я почему-то подумал о отступах в CSS разметке. Очевидно же, что речь идет именно о самом изображении, поэтому и уточнил.
  • +2
    Беда онлайн генераторов спрайтов в том, что они оставляют уж ооочень много места по бокам.
    Пользуюсь на маке программой TexturePacker (ещё пробовал SpriteRight и Sprite Master) и на выходе получаются очень компактные спрайты.
    • +2
      Имхо, на самом деле нет никакой разницы, много или мало места по бокам — PNG сожмет одинаково
      • 0
        А вот браузер памяти выделит разное кол-во.
  • 0
    Вопрос на засыпку: есть css и куча готовых (склеенных) спрайтов, чем автоматически разрезать их?
    Хочу мелкие картинки положить в css data uri
    • 0
      В топике есть
      Sprite Cow — сервис для удобной «нарезки» подготовленного вручную файла со спрайтами

      может это то, что вам нужно?
      • 0
        Да, я видел, но при его помощи разрезать можно «вручную», а хочется автоматики
  • 0
    а я использую TexturePacker, нравится больше всего.
  • +1
    Очень полезно, спасибо!
  • 0
    А чем графический файл запихать в css файл?
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Есть еще бандл для Symfony2 для быстрого создания спрайтов github.com/rithis/SpriterBundle
  • 0
    С подсказки коллеги использую TexturePacker — великолепная штука, есть клиенты под винду, мак и убунту.
  • 0
  • +1
    Пост отличный.
    Но только меня одного задевает за живое фраза
    Спрайт — это одно большое изображение мелких графических элементов? :))
    • 0
      Простите, а что это по вашему? Возможно, слово «изображение» применено не совсем верно (хотя и оно вполне имеет место быть), но ведь спрайт и есть ни что иное как сборник нескольких графических элементов (изображений).
  • –4
  • 0
    Smart sprites самый интеллектуальный авто генератор спрайтов.
  • 0
    Вот еще свеженький онлайн генератор спрайтов:
    simpreal.org.ua/csssprites

    Может кому понравится. Там можно выделять области в исходных картинках, задавать правила размещения этих областей в спрайте, настраивать css. Настройки и исходные картинки можно сохранять.
  • 0
    Вот еще интересный на мой взгляд инструмент:
    csssprites.org/

    Это java приложение, которое обрабатывает специальные директивы включенные в CSS файлы формируя «на лету» CSS спрайт(ы) и создавая соотв. записи в CSS файле. Файл остается валидным, т.к. все доп. директивы идут в блоках спец. комментариев.
    Т.е. верстаем так, как если бы все спрайты были отдельными фоновыми иллюстрациями (background-image), а скрипт собирает все в спрайт сам.

    Таким образом очень просто поддерживать и изменять отдельные файлы.

    Есть плагин под Eclipse IDE.
  • 0
    Считаю Drag & Drop Сервис Spritepad удобен для небольших изображений, большие лучше ручками загружать… эх) А так в целом неплохо, автору спасибо! Поставил бы плюс, жаль мыло кармы.

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