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
    7) другое.

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


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

    ИЕ и другие


    В ходе разработки реализации data:URI спрайтов были проанализированы наиболее часто встречающие варианты CSS правил. Также был учтен всеми любимый браузер ИЕ. Кому еще не известно ИЕ не поддерживает до версии 8 технологию data:URI. Однако, для него существует альтернативный вариант реализации спрайтов — на основе MHTML-технологии. Т.е., другими словами, на данный момент мы имеем полный спектр решений для всех современных браузеров (99% процентов всех используемых браузеров). Но как всегда ложку дегтя подкидывает Microsoft. Во время тестирования найдена бага MHTML-технологии в Vista ИЕ7 — а именно браузер ИЕ7 в ОС Vista при кэшировании MHTML файла отказывается показывать изображения (связано с мало документированными проблемами безопасности пр использовании MHTML в Vista ИЕ7). Если сделать файл не кэшируемым, то все работает как и должно работать, но в случае с кэшированием фоновые изображения не отображаются. В общем, Microsoft все же сделал так чтобы «цепь разорвалась». Другими словами, на текущий момент для браузера ИЕ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, в котором детально расписано что и как работает. Если что не понятно описано — задаем вопросы в комментариях.

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

    Комментарии 80

      +1
      Название оптимистичное, подняли настроение, спасибо :)
      Веселей был бы только «DURIC» (его тоже можно из заданных слов составить), особенно для славянского народа.

      А когда ожидается RC? — я бы с удовольствием попробовал интегрировать
        0
        тяжело сказать точно когда будет RC, месяц-два.
        попробывать в своих проектах можно и сейчас, все что необходимо генерируется автоматически. вы сможете оценить насколько это для вас луше/хуже.
        +1
        Уж очень много гемороя с этими data:urii
          0
          поэтому и сделали автоматическую генерацию
          –5
          Что-то я не понимаю в чём польза от конкретно такой автоматизации:
          — зарядил я туда урл site.ru/
          — получил index.html и addon.css

          И что мне с ними делать? Положить на сайт? Ну так у меня там динамический скрипт, а получил я, хоть и оптимизированный, но статичный слепок.

          Т. е., получается, этот tool годится только для статичных сайтов. Ы?
            0
            мдя… предпочитаю конструктивную критику
              0
              Получился сверстанный слепок. Сверстанный слепок всегда статичен, таким, кстати, его делают верстальщики, и уже потом он прикручивается к какой-нибудь CMS.
                0
                ага, понял… в любом случае, автоматизация в нынешнем виде далека от реальности, в которой неизменны только изменения :-)

                но в качестве презентации технологии/возможностей — вполне
              0
              сам сайт duris.ru динамический, и как видите в него нормально интегрирована технология.
              tool годится как для динамических так и для статических сайтов. вам предоставляется примерный код как это должно быть, что куда вставлять, а в динамику вы уже сами ручками вставляйте в нужные места.
                0
                textarea с кодом добавления CSS-правил в toDo уже :)
                  0
                  там уже есть textarea, возле download кнопочка show code
                    0
                    сорри, не успеваю за всеми обновлениями следить :)
                +3
                > 7) другое.

                Убило )
                Хорошая задумка, интересно будет следить ра завитием.
                И даже, возможно, пользоваться в будущем.
                  0
                  >> 7) другое.
                  >Убило )

                  чегото еще было, просто из головы вылетело :)
                  0
                  Задумка, действительно, стоящая. К сожалению, пока нет впечатлений от использования в реальной жизни (и не разработчиками, а сторонними пользователями). Ждем-с.
                    0
                    да, конечно, пока нету, хабра-люди это первые люди кто узнал об этом, посмотрим что дальше будет.
                    0
                    Мне видится такая автоматизация:

                    После того как обновили сайт (css'ы или картинки), запускаем на хостинге скрипт навроде этого:

                    duris_rebuild_all($htdocs, $css_files, $joined_css_file) {
                    // Сканируем каждый из $css_files на предмет нахождения кандидатов в data:uri.
                    // Попутно заменяем ссылки-на-файлы на data:uri.
                    // Сводный файл копируем в $joined_css_file.
                    }
                    duris_rebuild_all("/www", array("/main.css", "/sec.css"), "/joined.css");


                    А в шапку вставляем:

                    <link rel="stylesheet" type="text/css" href="/joined.css" />
                    < !-- ну и джаваскрипт, и всё остальное -- >


                    Засада в том что надо будет не забывать запускать этот скрипт на хостинге, но может в CVS/SVN есть тулзы для такой автоматизации (делать нечто по апдейту).

                    Джаву запускать не на всеъ хостингах возможно, но если сайту требуется такая оптимизация, то наверное это решаемо :-)
                      0
                      Хуками они называются.
                        0
                        честно пока о интеграции вплотную не думали, но это на самом деле не проблема. обязательно сделаем удобно.
                        думаю будет так как реализован сам сайт: duris.ru и duris.ru/?dev=1 — т.е. на выходе будет боевая версия и версия для разработки
                        +1
                        Побольше английского описания, подалуйста. Что бы коллегам показать.
                          0
                          эээ, мне помощь нужна в этом вопросе…
                            +1
                            я скину английский FAQ/Examples на днях
                          0
                          А в эксплорере 7 насмерть не работает? У меня ничего не показывает — всё пусто, что получается держать два комплекта что ли?
                            0
                            Да, держвать 2 комплекта. В вашем случае изображения будут загружаться, как раньше.
                              0
                              как не показывает? сайт duris.ru в ИЕ7 показывает? он сам является примером применения технологии
                                0
                                не показывает, они для ИЕ видать выводят обычным способом
                                  0
                                  гм, не увидел, что вы автор топика. просто у меня ваш пример из файла открылся нормально везде кроме 7 ИЕ
                                    0
                                    пример из файла? вы на ИЕ7 ХР? почитайте внимательно фаг. Если вы запускаете копию сайта лебедева, для нормального отображения в ИЕ, вам надо залить все на домен artlebedev.ru. Посмотрите в исходный код
                                    addon.ie.css.js там везде абсолютные урлы mhtml:http://www.artlebedev.ru/;-)/svalka/addon.ie.css.js!1
                                      0
                                      я свой сайтик смотрел, сори, до фака не добрался
                                0
                                > всё пусто, что получается держать два комплекта что ли?
                                конечно исходные изображения удалять ненадо :)
                                0
                                Первой строкой после генерации идет

                                а причем тут собствено ФП?
                                  0
                                  Извиняюсь, не вставилось
                                    0
                                    meta name=«GENERATOR» content=«Microsoft FrontPage 1.0»
                                      0
                                      что с сайта приходит, то и выдается
                                        0
                                        эмм… артлебедев пользуется FrontPage при создании сайтов???
                                        выдалось именно на примере лебедевского сайта
                                          +1
                                          прочитай что написано внизу страницы в исходном коде :)
                                            +1
                                            все, понял, был неправ:)
                                            в армии идиотов +1)
                                  0
                                  пока что-то стрёмно проверять в боевых условиях. не плохо бы на реализацию подобного взглянуть, и не ровен час высыпания ещё каких-нибудь ошибок и подводных камней.
                                  в остальном верной дорогой идёте, товарисчи! :)
                                    0
                                    duris.ru это и есть пример реализации, гляньте в исходный код
                                    а если зайти так duris.ru/?dev=1 — тогда видно то что изначально было, без применения DURIS

                                    в боевых условиях проверять ненадо :), у вас ведь наверно есть рабочая версия? ну или тестовая площадка? там и проверяйте
                                      0
                                      webo.in, webo.name — примеры реализации
                                      баз с IE7 Vista пока на них не пофикшен.
                                      0
                                      У вас в FAQе: «Предназначен автоматизировать процесс». Думаю, все же «предназначен, чтобы…» (:
                                        0
                                        о, черт, па-русски писать савсэм разучилсо :)
                                        0
                                        data uri для сайтов редко полезны, лучше компилять картинки в одну — тогда работать с ними будет проще. а данный подход полезен для всяких виджетов и букмарклетов. собстно так я дата ури использовал ещё лет пять назад.
                                          0
                                          > data uri для сайтов редко полезны, лучше компилять картинки в одну
                                          вы наверно большой специалист в этом вопросе? особенно в умении собрать все картинки разных размеров и разного позиционирования в одну итоговую, ну хоть поделитесь опытом с нами.
                                            0
                                            Необязательно всё собирать в одну картинку. Главное — не зацикливаться на чём-то одном, а использовать разные технологии и техники по мере нужды.

                                            Я не говорю, что ваша штука есть фигня. О нет, очень даже интересная штука! И полезная. Но сайты далеко не всегда вписываются в подобную концепцию.
                                              0
                                              если внимательно изучить как построен сам сайт duris.ru, то можно увидеть что у нас применяется смесь технологий — мелкие картинки запакованы в data:uri, а большие (лого, фото) подключаются обычным способом с применением привычных CSS спрайтов. Соответственно мы применяем разные технологии. И вам того же советую. Кстати в faq это описано.
                                              Вы разработчик и вы решаете что лучше вам применять по мере нужды. Мы даем вам еще одну технологию, в общий набор. Т.е. арсенал инструментов увеличивается. Видели сколько инструментов у зубного врача? Представьте если бы он работал только одним каким то инструментом, вы бы тогда сами лечили себе зубы. В противовес существуют современные стоматологические кабинеты, в которых очень большой набор очень хороших инструментов. Аналог можно провести и в веб-разработке.
                                            +1
                                            data:uri в windows используется в msc шаблонах с первого их появления =) (microsoft management console)

                                            Так же удобно использовать для файлов ошибок http т.к. часто там не удобно использовать прямые линки на изображения, а не прямые будут не везде отображаться (IIS)
                                            0
                                            > На сегодняшний день мы имеем стабильную бета версию

                                            Абсурд!
                                              0
                                              ух как исчерпывающе вы высказались!, круче было бы иконку влепить какую-то или просто смайл ляпнуть, максимальная оптимизация речи :).
                                                0
                                                зачем обзывать версию бетой, если продукт работает стабильно?
                                                  0
                                                  стабильно он работает с тем что нам известно. DURIS не проходил массового испытания, возможно имеются какие недочеты, поэтому и бета. надеюсь после статьи найдутся какие-то недочеты, хотя пока замечаний по существу работы от пользователей не было.
                                              0
                                              По теме data:uri
                                              отличная онлайн утилита The data: URI kitchen
                                              software.hixie.ch/utilities/cgi/data/data
                                              0
                                              А ещё вместо всего этого можно использовать svg+xml
                                              жалко только что браузеры очень неохотно поддерживают этот формат =\
                                                0
                                                Извеняюсь, забыл суть дискуссии, svg только для отрисовывания годиться =)
                                                +1
                                                вот это вы молодцы!

                                                багрепорт от меня: все css вклеиваются в один вне зависимости от media, что не есть хорошо.
                                                  0
                                                  2-ой багрепорт: игнорируются СС-стили для IE.
                                                    0
                                                    да условные комментарии для ИЕ игнорируются, даже и не знаю стоит ли их обрабатывать
                                                      +1
                                                      обрабатывать наверно не стоит, а вот просто скопировать в папку с выходящим css думаю нужно
                                                        0
                                                        вам еще плюс :)
                                                        по вашей инициативе уже доработано media, + сделаю копирование стилей в условных комментариях для ИЕ
                                                    0
                                                    это вариант, учтем, спасибо!
                                                    0
                                                    вопрос: а почему data-uri кодированная графика для IE хранится в отдельном файле, а не включается в общий css, как в вашей статье webo.in/articles/habrahabr/46-cross-browser-data-url/?
                                                      0
                                                      1) чтобы отделить графику от стилей
                                                      2) что бы нормальные браузеры не качали то что надо ИЕ, и наоборот, если совместить css для нормальных браузеров и ИЕ — получится больше размер загружаемого файла и ктото (браузер) будет грузить то что ему вообще не надо, а так все четко.
                                                        0
                                                        не, это понятно, я чуть другое спрашиваю — почему mhtml-background для ie подключать через js, а не через conditional comments для IE?
                                                          0
                                                          блин не туда ответил, и вообще не то, не спал всю ночь, сорри.
                                                      +1
                                                      По-моему офигительная тулза:
                                                      Верстаешь себе по-нормальному в css не заморачиваешься со спрайтами, а после генерации на выходе получаешь:
                                                      1. Оптимизация запросов к серверу (адын «тэкставы» спрайт)
                                                      2. Минимизация кода и GZипование
                                                      3. Никаких проблем с кэшированием.

                                                      Ахринительно — дайте две =)
                                                        0
                                                        верно! верстаешь себе по нормальному, нажимаешь кнопочку — получаешь оптимизированную версию.
                                                          0
                                                          да, собственно, ради этого и трудились :)
                                                            0
                                                            Есть много вопросов по поводу вашей дальнейшей работы над проектом — можно будет на конференции поприставать?
                                                              0
                                                              наверное, даже нужно :)
                                                          0
                                                          а почему mhtml задётся через js, а не в ie-css?
                                                            0
                                                            ИЕ останавливает рендеринг страницы (она как бы замерзает) пока ИЕ докачивает файл стилей (addon) с background-image если подключать через <link>, поэтому изначально мы подключаем динамически через скрипт — это устраняетcя замерзание, ну а если скрипты запрещены — тогда уже через <link>
                                                              0
                                                              ага, понял, спасибо!
                                                                0
                                                                ниже еще ответ
                                                                0
                                                                > не, это понятно, я чуть другое спрашиваю — почему mhtml-background для ie подключать через js, а не через conditional comments для IE?

                                                                гляньте внимательнее, подключается через conditional comments
                                                                  0
                                                                  обрезало ответ, продолжаю —

                                                                  а в conditional comments идет разделение с ЖС и без ЖС
                                                                  если нету ЖС = мы не можем определить ОС, соответственно можем нарваться на Vista IE, поэтому если нет ЖС подключаем сразу стиль со стандартными background-image
                                                              0
                                                              всего-лишь 37↑ расстраивают(
                                                                0
                                                                да ну, просто плюсуют только те кто шарит :), реально народу понравилось, и уже активно юзают
                                                                0
                                                                base64 увеличивает размер на 30%, разве не так?
                                                                  0
                                                                  так, но при использовании base64 + gzip размеры практически идентичны

                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                Самое читаемое