Pull to refresh

Comments 33

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

Чувствую, что никак… поэтому пока — обхожу спрайты стороной.
Меня спасают паддинги в 1-2 пикселя.
да, это спасает. Я писал об этом года 4 назад еще
webo.in/articles/habrahabr/08-all-about-css-sprites/
webo.in/articles/habrahabr/52-css-sprites-are-evil/
+ data:URI как технология намного проще и позволяет «отложить» загрузку ресурсного файла (получается аналогичный CSS Sprites транспорт, но без всех их минусов)
к сожалению поддержка data:URI не работает в старых версиях браузерах, а также на встраиваемых (например на телефонах без ОС)
старые версии браузеров — сейчас меньше 1%
UFO just landed and posted this here
Для старых браузеров можно использовать fallback в виде реальных изображений-файлов.
UFO just landed and posted this here
Я лично испозую замены через JavaScript на стороне клиента.
Я правильно понял, что это возникает только в случае, когда изображения в спрайте расположены вплотную?
> Меня спасают паддинги в 1-2 пикселя.

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

может это то, что вам нужно?
Да, я видел, но при его помощи разрезать можно «вручную», а хочется автоматики
а я использую TexturePacker, нравится больше всего.
А чем графический файл запихать в css файл?
UFO just landed and posted this here
С подсказки коллеги использую TexturePacker — великолепная штука, есть клиенты под винду, мак и убунту.
Пост отличный.
Но только меня одного задевает за живое фраза
Спрайт — это одно большое изображение мелких графических элементов? :))
Простите, а что это по вашему? Возможно, слово «изображение» применено не совсем верно (хотя и оно вполне имеет место быть), но ведь спрайт и есть ни что иное как сборник нескольких графических элементов (изображений).
Smart sprites самый интеллектуальный авто генератор спрайтов.
Вот еще свеженький онлайн генератор спрайтов:
simpreal.org.ua/csssprites

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

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

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

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

Articles