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

[levgubin]

За Compass автору статьи огромное спасибо.)

[vosi]

Кто нибуть, расскажите, как победить глюки спрайтов в вебкит браузерах при зуминге страницы?
Глюки заключаются в том, что спрайты плавают на 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

Чувствую, что никак… поэтому пока — обхожу спрайты стороной.

[NeLexa]

Меня спасают паддинги в 1-2 пикселя.

[sunnybear]

да, это спасает. Я писал об этом года 4 назад еще
webo.in/articles/habrahabr/08-all-about-css-sprites/
webo.in/articles/habrahabr/52-css-sprites-are-evil/
+ data:URI как технология намного проще и позволяет «отложить» загрузку ресурсного файла (получается аналогичный CSS Sprites транспорт, но без всех их минусов)

[qxfusion]

к сожалению поддержка data:URI не работает в старых версиях браузерах, а также на встраиваемых (например на телефонах без ОС)

[sunnybear]

старые версии браузеров — сейчас меньше 1%

[MTonly]

Для старых браузеров можно использовать fallback в виде реальных изображений-файлов.

[qxfusion]

Я лично испозую замены через JavaScript на стороне клиента.

[adic3x]

Я правильно понял, что это возникает только в случае, когда изображения в спрайте расположены вплотную?

[NeLexa]

Да.

[adic3x]

> Меня спасают паддинги в 1-2 пикселя.

Черт, я почему-то подумал о отступах в CSS разметке. Очевидно же, что речь идет именно о самом изображении, поэтому и уточнил.

[NeLexa]

Беда онлайн генераторов спрайтов в том, что они оставляют уж ооочень много места по бокам.
Пользуюсь на маке программой TexturePacker (ещё пробовал SpriteRight и Sprite Master) и на выходе получаются очень компактные спрайты.

[slayerhabr]

Имхо, на самом деле нет никакой разницы, много или мало места по бокам — PNG сожмет одинаково

[slayerhabr]

Вопрос на засыпку: есть css и куча готовых (склеенных) спрайтов, чем автоматически разрезать их?
Хочу мелкие картинки положить в css data uri

[NeLexa]

В топике есть

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

может это то, что вам нужно?

[slayerhabr]

Да, я видел, но при его помощи разрезать можно «вручную», а хочется автоматики

[loat]

а я использую TexturePacker, нравится больше всего.

[Dimcore]

Очень полезно, спасибо!

[nitro80]

А чем графический файл запихать в css файл?

[KeepYourMind]

Есть еще бандл для Symfony2 для быстрого создания спрайтов github.com/rithis/SpriterBundle

[Goder]

С подсказки коллеги использую TexturePacker — великолепная штука, есть клиенты под винду, мак и убунту.

[Alexufo]

habrahabr.ru/post/139914/

[adnull]

Пост отличный.
Но только меня одного задевает за живое фраза
Спрайт — это одно большое изображение мелких графических элементов? :))

[DarkWood]

Простите, а что это по вашему? Возможно, слово «изображение» применено не совсем верно (хотя и оно вполне имеет место быть), но ведь спрайт и есть ни что иное как сборник нескольких графических элементов (изображений).

[Bads]

[Operatino]

Smart sprites самый интеллектуальный авто генератор спрайтов.

[humblegenius]

Вот еще свеженький онлайн генератор спрайтов:
simpreal.org.ua/csssprites

Может кому понравится. Там можно выделять области в исходных картинках, задавать правила размещения этих областей в спрайте, настраивать css. Настройки и исходные картинки можно сохранять.

[macik_spb]

Вот еще интересный на мой взгляд инструмент:
csssprites.org/

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

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

Есть плагин под Eclipse IDE.

[int_228]

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