Советы по применению 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 кода и редактированием графического файла спрайта в процессе верстки веб-страницы.

Оставить комментарий

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