Советы по применению CSS спрайтов.

CSS спрайты являются мощным инструментом в веб-разработке, при помощи которого можно значительно улучшить интерактивность сайта путем сокращения HTTP запросов, необходимых для загрузки графических элементов страницы. Эта технология предусматривает объединение нескольких изображений в общий файл (спрайт) c последующим выделением его отдельного компонента (изображения), путем ограничения и точного позиционирования видимой области соответствующего элемента с помощью стилевого свойства background-position.

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

Прежде всего, особенности использования спрайтов обусловлены тем, что эффект от их применения имеет не только положительную сторону. Существуют также несколько свойственных им серьезных недостатков. Большинство проблем, связанных с их практическим применением являются следствием неточного позиционирования видимой области при выборе конкретного элемента (вычленения требуемого изображения) и непродуманной компоновки результирующего составного файла – спрайта.

Что касается компоновки визуальной структуры спрайта, то здесь нужно выделить следующие моменты:

  • Если дизайн вашей страницы предусматривает повторение какого-либо отдельного элемента спрайта (картинки) в определенном направлении (допустим для заполнения фона), то при создании спрайта разместите данную картинку таким образом, чтобы в направлении ее предполагаемого распространения у нее не было соседних элементов. Лучше всего, если этот элемент будет размещен на той стороне спрайта, которая является противоположной направлению повторения этого элемента на странице. Это позволит вам избежать ситуации, когда в качестве фона элемента будет отображаться часть соседнего изображения, предназначенного для других целей.
  • Исходя из рекомендаций предыдущего пункта, следует, что картинки, которые вы планируете распространять на фоне элемента страницы в горизонтальном направлении (CSS свойство background-repeat принимает значение repeat-x) целесообразно разместить по вертикали результирующего спрайт файла, а те которые должны будут распространяться в вертикальном направлении ( background-repeat: repeat-y), соответственно, по горизонтали.
  • Компоновка спрайтов для заливки фона различных элементов.

    Размещение элементов спрайта в зависимости от направления их распространения в фоне целевого элемента.

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

    Ступенчатое расположение элементов спрайта.

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

    Способы размещения компонентов спрайта в случае одной неопределенной размерности целевого элемента.

  • При составлении спрайта делайте одинаковые отступы между отдельными рисунками, а их размеры делайте кратными (для этого лучше использовать определенный единый коэффициент). Соблюдение этих правил позволит вам значительно сэкономить время, требуемое для точных расчетов при позиционировании на нужной области спрайта.
  • Для того чтобы отображаемые в виде фона изображения не захватывали частично другие, необходимо во время компоновки спрайта оставлять достаточно свободного пространства между ними. Такое размещение картинок не способствует значительному увеличению размера результирующего файла и позволит вам избежать неприятностей в нестандартных ситуациях.

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

  • В процессе позиционирования, когда вы оперируете значениями CSS свойства background-position, не используйте для этого ключевые слова bottom и right, потому что это гарантированно приведет к ошибке отображения фона элемента в случае увеличения размера спрайта (при вставке в него дополнительных элементов). Так как границы спрайта, относительно которых производится позиционирование, сдвигаются. Корректными значениями свойства background-position в этом случае являются top, left и числа с указанием единиц измерения (px).
  • Не следует применять спрайты для оформления элементов страницы, которые могут значительно изменять свои размеры в различных ситуациях. К таким элементам можно отнести списки (<ol> и <ul>), которые являются блочными элементами HTML разметки, ширина которых может динамически изменяться в зависимости от размера окна браузера, а также предусмотренные адаптивным дизайном «резиновые» изображения.
  • Еще одна тонкость, связанная с размерностью элементов. Если допустим такой элемент веб-страницы, как кнопка имеет фиксированный фон, то в случае увеличения размера шрифта, надпись кнопки может быть частично обрезана границами элемента. Это объясняется тем, что из-за жесткой фиксации фона, размер кнопки не увеличивается автоматически. Для решения этой проблемы рекомендуется область фона элемента (кнопки) разбить на четыре части и назначить каждой из них соответствующую картинку в качестве фона. Как альтернативный вариант решения этой проблемы — можно воспользоваться скриптом, позволяющим динамически изменять размер элемента в зависимости от определенных условий.

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

Комментариев: 14 на Советы по применению CSS спрайтов.

  1. Был отдельный вертикальный спрайт для горизонтальных заливок — все гуд.
    Захотел их перенести в основной спрайт — отюстировал, а залить по горизонтали и не могу….
    Картинка показывается один раз и все… Что делаю не так?
    #main_menu{background:#4e85a7 url(../images/theme/main_sprite.png);background-repeat:repeat-x;background-position:-550px -430px;border-radius:4px 4px 2px 2px;float:left;height:44px;margin:0;padding:0 1.2em 0 .5em;width:98%;}

    1. Судя по вашему коду, все должно работать. Скорее всего причина в самом спрайте, в его компоновке. Нужно взглянуть на изображение.

  2. Вынес заливки в отдельный спрайт — вертикальный все заработало.
    Уведомления у меня не было на почте о ответе, хотя адрес заполнял — набрел сюда случайно.

    1. Да, виноват. Уже исправил.
      Вероятно в вашем основном спрайте горизонтальные заливки располагались слева. Если их сделать крайними справа, как это показано на первом изображении, которое я, к статьи, откорректировал (вам спасибо), то проблем возникнуть не должно.

  3. Товарищи, что же вы, не разбираясь, публикуете информацию?
    background-repeat: ; (например :repeat-x;) повторяет ВСЮ картинку, указанную в url() background-image: ;
    При расположении элементов в спрайте, согласно вашей иллюстрации, и заданном repeat-x повторятся будет картинка целиком (т.е. пустая белая область, затем часть фона кнопки — пустая область, часть фона, и т.д. ). Позиционирование лишь изменит точку отсчета для повторений. Отсюда и проблемы в комментариях выше.
    Решение: учитывая то что повторение по горизонтали (repeat-x) происходит для всего изображения, необходимо поместить в него только необходимый для повторения графический элемент (в случае ограничения по высоте (напр. та-же кнопка) возможно размещение нескольких элементов в спрайте, по вертикали и позиционирование : 0 -сколько надо)

    1. Вынужден возразить. Информация проверенная, более того, достоверная.
      Вы, конечно же, правы. В изображении спрайта можно разместить исключительно горизонтальные (или вертикальные) фрагменты для заливок элементов, но можно создать более оптимизированный вариант, совместив в нем как горизонтальные, так и вертикальные. Примерно так, как это проиллюстрировано в моем первом изображении. При этом край требуемого фрагмента, соответствующий стороне его распространения в фоне целевого элемента, должен прилегать к краю самого изображения спрайта. То есть при такой компоновке спрайта требуемый фрагмент будет ограничен с противоположной стороны, благодаря чему он будет повторяться при указании его в качестве фона элемента. Само собой разумеется, что предварительно необходимо позиционировать начальную точку фрагмента (его левый верхний угол) с помощью свойства background-position. Полагаю, что проблема, возникшая у Vodkomotornikа решается именно таким образом. Поэтому после появления его комментария данная статья и само изображение были отредактированы.

      1. » Информация проверенная, более того, достоверная.»
        Кем же она, позвольте узнать, проверенная?
        Вот возьмите свой спрайт и попробуйте указанным способом кнопку сверстать. Потратьте 5 минут.

        Причина по которой оставил отзыв: мой стажер 2 часа потратил, пытаясь применить Ваши рекомендации. И ведь наверняка многие тоже пробовали.

        Исправьте статью, пожалуйста. Не вводите новичков в заблуждение. Им и так нелегко)

        1. Да, действительно, с выводами поторопился. Информацию перед публикацией не проверил. А при ответе на вопрос Vodkomotornika поленился сверстать и лишь теоретически проанализировав ситуацию, сделал выводы. Виноват. Извиняюсь за неудобства и вношу необходимые изменения в статью.

  4. vl49, eсли информация «проверенная, более того, достоверная», будьте добры сверстать и показать демо того, что изображено в правой части первого изображения, используя этот спорный спрайт.

    1. Информация не достоверная, более того не провененная. Это, конечно, не оправдание, но в спецификации этот момент не освещен вообще. Поэтому поторопился с выводами и поленился проверить лично. Спорный спрайт действительно нельзя использовать для заливок, поэтому вношу необходимые изменения в статью.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *