Pull to refresh

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

Reading time 2 min
Views 698
Свершилось. Долгие бессонные ночи не прошли даром и мысль, заявленная Вадимом 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

P.S. за последнюю неделю образовалась пара инвайтов — если нужно помочь хорошим людям, то пишите в приват
Tags:
Hubs:
+68
Comments 43
Comments Comments 43

Articles