Data URI [CSS] Sprites 1.1 — Автоматизация процесса сборки css спрайтов

Многим профессиональным веб-разработчикам известны приемы оптимизации сайтов. Одним из способов оптимизации является использование CSS спрайтов. Этим же разработчикам известно, какие существуют трудности с формированием, сборкой и пересборкой стандартных спрайтов. В инете можно найти инструменты для автоматизации этого процесса. При использовании стандартных спрайтов полностью автоматизировать сборку для всех случаев проблематично, из-за специфики background в css. Иногда камнем преткновения является свойство repeat фоновой картинки.

Data:URI CSS

Существует альтернативный вариант генерации CSS спрайтов, на основе data:uri схемы. Данный подход интересен тем, что максимально минимизируется кол-во обращений к серверу, + самое важное — можно полностью автоматизировать процесс сборки и перегенерации спрайтов. Для полной автоматизации процесса оптимизации работы сайтов и сборки css спрайтов на основе data:uri схемы была разработана специальная библиотека. На базе созданной библиотеки развернут сайт Duris.ru. Те кто ранее не слышал про данную разработку могут почитать предыдущую статью на эту тему.

Обновление версия 1.1

Теперь о главном. Инструмент генерации спрайтов обновился и заимел рад дополнительных возможностей:

• обработка media в link, style — теперь css стили собираются в зависимости от media, генерация происходит только для @media = null || all || screen
• улучшена обработка @import
• корректно обрабатываются условные комментарии (comment conditional) для IE
• теперь спрайты работают и для IE8, причем независимо от режима работы (при разных X-UA-Compatible)
• устранен ряд ошибок с последовательностью формирования правил в css стилях
• добавлена возможность обрабатывать Javascript, а именно склеивать в один файл и применять компрессию
• устранены все известные баги
• добавлена возможность работы с локальной файловой системы (для интеграции в свои проекты)

Указанный инструмент генерации data:uri спрайтов интегрирован в один из серьезных проектов, естественно показать который на данный момент не могу, но результат интеграции больше чем просто радует. Наконец-то мучения со спрайтами закончены.

Будущее

При появлении поддержки в IE8 data:uri схемы разработанный подход становится довольно перспективным, теперь все современные браузеры поддерживают такие спрайты. Для полного счастья осталось браузеру Opera увеличить размер поддерживаемой data:uri схемы (пока в Opera имеется ограничение ~ 4кб). Примечание от sunnybear: подтверждения этого найти не удалось, но есть ограничение на 32Кб в IE8

Детально ознакомится с принципами генерации и подключения data:uri css спрайтов можно в разделе FAQ. Если у вас возникли вопросы или предложения по работе сайта или алгоритма в целом, вы можете оставить свои пожелания на нашем сайте в виджете обратной связи, или просто пишите в комментарии.

Напоследок, отличная подборка инструментов для генерации CSS спрайтов www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Пользуйтесь на здоровье.

UPD: Сайт artlebedev.ru/, на который настроен duris.ru по умолчанию «в тумане», соот-но чтобы оценить работу вставляйте свои или какие-то другие рабочие на данный момент сайты.

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

• Установка Web Optimizer
• Автогенерация CSS Sprites
• PHP Speedy — наше все
• Развитие веба с 2000 до 2007
• Data:URI CSS Sprites современный подход к генерации CSS спрайтов
• Оптимизация изображений, часть 3: 4 шага для уменьшения размера файлов
• Оптимизация загрузки страниц на практике
• Эксперимент сколько живых денег может принести ускорение загрузки сайта?

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