Data:URI CSS Sprites — современный подход к генерации CSS спрайтов

Мучения со стандартным подходом применения CSS спрайтов, а именно трудности модернизации и в некоторых случаях сложности оптимальной компоновки заставили искать альтернативный вариант оптимизации загрузки изображений. Очередной раз почитывая хабра-статьи, наткнулся на интересный подход реализации спрайтов с применением data:URI. В ходе дискуссий и умозаключений были определены слабые и сильные стороны данного подхода. Одним из значительных недостатков нового подхода является сложность сборки конечного CSS. Однако, при использовании data:URI имеет место возможность автоматизации процесса. Соответственно, было принято решение создать программное обеспечение для автоматической сборки data:URI спрайтов.

Data:URI CSS Sprites

Новый подход генерации CSS спрайтов на основе data:URI решили назвать Data URI Sprites — DURIS.ru. Название немного необычное — но зато уникальное и запоминается хорошо. Как выяснилось позже когда-то давно жил вазописец по имени Дурис.

Что это

В первую очередь это полностью автоматический анализ и сборка CSS спрайтов на основе data:URI.

Некоторые характеристики работы DURIS:

1. загрузка и парсинг всех внутрених (style) и внешних (link) стилей
2. выделение background-image в отдельный внешний стиль
3. загрузка и кодирование в base64 всех изображений которые найдены в стилях
4. оптимизация правил с повторяющимися background-image в стилях
5. удаление CSS правил с отсутствующими на сервере изображениями (устраняет лишние ненужные запросы)
6. специальное подключение data:URI спрайтов для всех браузеров и отдельно для ИЕ6, ИЕ7 Vista (более детально в FAQ duris.ru/faq/)
7. другое.

«Зачем мне это надо?»

Современный подход создания CSS спрайтов

• позволяет безболезненно вносить коррективы в изображения и верстку;
• дает возможность свести к минимуму число запросов к серверу для получения информации, которая относится к оформлению страницы;
• позволяет использовать полностью семантическую верстку;
• устраняет проблемы масштабирования для фоновых изображений;
• объединяет изображения разных типов и осей повторения.
• все создается в автоматическом режиме;

ИЕ и другие

В ходе разработки реализации data:URI спрайтов были проанализированы наиболее часто встречающие варианты CSS правил. Также был учтен всеми любимый браузер ИЕ. Кому еще не известно ИЕ не поддерживает до версии 8 технологию data:URI. Однако, для него существует альтернативный вариант реализации спрайтов — на основе MHTML-технологии. Т.е., другими словами, на данный момент мы имеем полный спектр решений для всех современных браузеров (99% процентов всех используемых браузеров). Но как всегда ложку дегтя подкидывает Microsoft. Во время тестирования найдена бага MHTML-технологии в Vista ИЕ7 — а именно браузер ИЕ7 в ОС Vista при кэшировании MHTML файла отказывается показывать изображения (связано с мало документированными проблемами безопасности пр использовании MHTML в Vista ИЕ7). Если сделать файл не кэшируемым, то все работает как и должно работать, но в случае с кэшированием фоновые изображения не отображаются. В общем, Microsoft все же сделал так чтобы «цепь разорвалась» (http://habrahabr.ru/blogs/crazy_books/44492/). Другими словами, на текущий момент для браузера ИЕ7 в ОС Vista реализация DURIS работает не совсем так, как задумывалось изначально. В подключение стилей внедрен алгоритм проверки ИЕ7 Vista и в случае такового фоновые картинки подключаются стандартным путем. Статистика показывает, что пользователей, которые используют ИЕ7 под Vista около 5% процентов. В любом случае, мы уже знаем, что в ИЕ8 будет нормально реализована data:URI технология. Хотя, честно говоря есть большие сомнения что разработчики ИЕ опять чего-то не того напрограмируют.

Основные достоинства

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

1. Все фоновые изображения, вынесенные в дополнительный файл стилей, загружаются за одно подключение к серверу — это обстоятельство позволяет уменьшить нагрузку на сервер и ускорить отображение фоновых изображений.
2. Сборка конечного файла CSS спрайтов производится автоматически — это позволяет безболезненно проводить модернизацию изображений.

Что имеем

На сегодняшний день мы имеем стабильную бета версию DURIS, которая отрабатывает все «скармиваемые» ей CSS файлы. Отрабатываются также специфические правила такие как filter:AlphaImageLoader, !important. Уверен, что есть еще неучтенные моменты/случаи, которые, надеюсь, с помощью уважаемого сообщества читателей мы совместно определим. Все что требуется — это проверить свой/любой сайт и посмотреть что получается в результате. Определить имеются ли ошибки обработки? Удовлетворяет ли результат? А может есть идея по улучшению методики/алгоритма?

Что будем иметь

Ядро DURIS разработано на языке Java и является самодостаточным (т.е. не зависит от сайта). Предполагается, что после получения релиз-кандидата исходный код ядра будет выложен в открытый доступ под OpenSource лицензией. Ядро работает с командной строки наподобии того, как работает YUICompressor. Это позволит удобно интегрировать автоматическую генерацию CSS спрайтов в свои проекты. Кто программирует на Java, при желании, сможет напрямую вызывать методы ядра DURIS.

Итого

Разработанный метод/алгоритм автоматической генерации CSS спрайтов основе data:URI уникален в своем роде и не имеет мировых аналогов. Это еще раз доказывает что славянский народ тоже умеет изобретать инновации, а не только хорошие/плохие велосипеды.

На сайте выложен FAQ, в котором детально расписано что и как работает. Если что не понятно описано — задаем вопросы в комментариях.

В главных ролях Руслан Синицкий (aka sirus), Николай Мациевский (aka sunnybear)

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

• CSS Sprites: все, что вы знали, но боялись спросить
• Картинки в теле страницы с помощью data:URL
• CSS Sprites — зло, не используйте их!
• Кроссбраузерное использование data:URL
• Встраивание и кодирование в JavaScript
• CSS Sprites и data:URI, или Microsoft и весь остальной мир
• Сжатие при помощи canvas и PNG-картинок

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