Статьи Архив статей

Автор: Мациевский Николай aka sunnybear
Опубликована: 12 марта 2009

Автогенерация CSS Sprites

Свершилось. Долгие бессонные ночи не прошли даром и мысль, заявленная Вадимом aka pepelsbey, обрела более-менее физические очертания.

sprites.webo.in (сырая-сырая альфа-версия) название, собственно, говорит само за себя. Вводим URL CSS-файла на выходе получаем архив с минимизированным (никакой сортировки селекторов, просто базовая минимизация) CSS-файлом и набором свеженьких спрайтов. Здорово?

Алгоритм генерации CSS Sprites в общих чертах уже был описан. По ходу пришлось уточнить позиционирование для no-repeat-картинок: часть из них нужно располагать «лесенкой» (у которых не задан размер блока), а часть можно впихивать как придется (если размеры точно определены).

Для vkontakte.ru сходу получился вот такой образец.

Версия сырая, некоторые случаи не обрабатываются, некоторые обрабатываются неверно. Соответственно, хочется услышать максимально большое число случаев, когда происходит какая-то «фигня». Сразу оговорюсь, что спрайты не создаются в ряде случаев. Во-первых, если уже в качестве фона используется спрайт (потому что разобрать такое изображение в случае с «лесенкой» вообще не представляется возможным). Во-вторых, если всего изображений, которые можно объединить по соответствующей группе, только 1. В-третьих, если изображение представляет собой анимацию. В-четвертых, если не удалось установить корректный repeat для элемента и не заданы размеры (тогда изображение будет повторяться по всем направлениям в неизвестном объеме и его нельзя объединять еще с чем-то).

Самое интересное, конечно, как решается задача расположения изображений в «произвольном» спрайте но об этом в следующий раз (когда немного уточнится алгоритм, последняя версия всегда доступна в репозитории).

И наконец, stand-alone версия будет включена в самое ближайшее время в Web Optimizer (Веб Оптимизатор) приложение, направленное на автоматизацию клиентской оптимизации. Его всегда можно скачать по адресу: code.google.com/p/web-optimizator/.

В общем, комментарии, замечания, тестовые случаи, желание помочь руками все это welcome sprites.webo.in

Читать дальше

Все комментарии (habrahabr.ru)