После публикации серии статей на тему использования, ненужности и даже автоматизации CSS Sprites, после многодневного анализа текущего положения вещей удалось собрать некоторый набор наиболее часто возникающих проблем при использовании CSS Sprites и методов их решения. Также далее рассматривается прикладной способ по автоматизации создания CSS Sprites для произвольного проекта.
CSS Sprites, на самом деле, — всего лишь расширенное использование технологии background, заложенной еще в спецификации CSS1. Все, до чего додумалось прогрессивное человечество за эти годы — это множественный фон у элементов (как он будет совместим с концепцией CSS Sprites еще придется проверить). Основные свойства, которые мы используем для задания фонового изображения.
background-image — основная «рабочая лошадка». Именно за ней будущее в виде data:URI, который в конце концов победит CSS Sprites. Но произойдет это нескоро.background-repeat — вторая не менее важная составляющая при использовании фонового изображения. Ведь задавая no-repeat для данного свойства, мы намеренно подчеркиваем, что допустимо использование CSS Sprites для «склейки» изображений (по умолчанию используется repeat).background-position — «волшебная палочка» для CSS Sprites, позволяющая спрятать или показать определенные части фонового изображения.Кроме заявленных свойств также есть еще несколько (например, background-color), но они к спрайтам имеют посредственное отношение.
Итак, мы можем выставлять источник изображения, правило для его повторения и его начальную позицию. Вроде достаточно?
Естественно, рассматривая набор возможных эффектов при использовании фоновых изображений стоит отметить следующие:
no-repeat) расположить изображения «лесенкой» (это особенно актуально в случае фона для элементов списка). Стоит отметить, что в зависимости от значения background-position CSS Sprites здесь могут быть как возможны, так и не возможны в принципе (например, в случае 100% 100%). Тут можно выделить еще несколько случаев, различающихся по background-position, background-repeat и линейными размерами блока.Все описанные примеры можно более четко структурировать по следующим группам.
background-repeat: no-repeat, background-position: абсолютные числа, и заданы линейные абсолютные размеры.background-repeat: no-repeat, background-position: абсолютные числа, линейные размеры не заданы или заданы в относительных единицах.background-repeat: repeat-x, задана высота элемента.background-repeat: repeat-x, высота элемента не задана.background-repeat: repeat-y, задана ширина элемента.background-repeat: repeat-y, ширина элемента не задана.background-repeat: no-repeat, background-position: 100% 0, задана высота элемента.background-repeat: no-repeat, background-position: 0 100%, задана ширина элемента.background-repeat: no-repeat, background-position: 100% 0, высота элемента не задана.background-repeat: no-repeat, background-position: 0 100%, ширина элемента не задана.background-repeat: repeat.background-repeat: repeat-x или background-repeat: repeat-y, размеры элемента указаны в относительных единицах.background-repeat: no-repeat, background-position: в относительных единицах.Глядя на эту спецификацию становится, в общем, понятно, в каком направлении двигаться для автоматизации создания CSS Sprites.
Далее речь пойдет уже об инструменте Auto Sprites, который был положен в основу разработки Web Optimizer. После описанных выше умозаключений оставались чисто технические вопросы: как все это закодировать.
Для начала нам нужно разобрать все дерево CSS-правил, потом отобрать из них относящиеся к фоновым изображениям и линейным размерам объектов, уже потом произвести над ними требуемые действия. Идеально для этой задачи подходит CSS Tidy, который был замечательно испробован, протестирован и улучшен после пары небольших ошибок.
Дальше начинается самое интересное: как нам вышеописанные группы «склеивать»? Для этого используется следующий алгоритм:
repeat-x изображения (группа 3) объединяются все вместе по вертикали. Попутно правится ширина фоновых изображений (приводится к общему знаменателю). В самое начало такого файла добавляются no-repeat изображения, подходящие по ширине (группа 1). Далее в самый них файла записывается 1 изображение из группы 4 (больше 1 все равно никуда не войдет).repeat-y.0 100% означает, что фон должен быть прижат к правому краю элемента, соответственно, весь спрайт будет «прижат» к правому своему краю).background-position.no-repeat-изображений, то никаких рудиментов не возникнет.pngcrush или jpegtran. Стоит также предусмотреть, в каком виде будут создаваться полноцветные изображения: JPEG или PNG (последние больше по размеру, но гарантирует отсутствие потерь качества).Все описанные шаги уже применены в Web Optimizer (веб-приложении для автоматизации клиентской оптимизации), одна из финальных версий алгоритма работает для инструмента Auto Sprites, а с исходным текстом можно ознакомиться в SVN.
Эту логику можно применить на любом этапе веб-разработки (как при начальном создании дизайна, так и при пост-релизной оптимизации сайта). Библиотека для автоматического создания спрайтов распространяется по лицензии MIT (как мне правильно указали на CodeCamp, она позволяет использовать продукт где угодно и как угодно, но обязательно должна присутствовать ссылка на первоисточник, даже если используется не вся библиотека, а только ее существенная часть).
Все картинки получены на реальной конфигурации известных CMS.
P.S. Новости по поводу Web Optimizer будут публиковаться теперь и на Twitter.