28 мая 2009 в 22:08

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кб).

Детально ознакомится с принципами генерации и подключения 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 по умолчанию «в тумане», соот-но чтобы оценить работу вставляйте свои или какие-то другие рабочие на данный момент сайты.
sirus @sirus
карма
29,0
рейтинг 0,0
Похожие публикации

Комментарии (18)

  • +2
    Я не профессиональный веб-разработчик, но за «The Pokemon Sprite Sheet, consisting of over 1000 graphic objects.» спасибо!
    • 0
      А где вы увидили эту ссылку, а то я тоже хочу.
  • 0
    Можно также использовать программу jpeg2css.
    • +1
      если использовать jpeg2css в реальности — при большом кол-ве изображений на сайте, кол-во DOM элементов будет просто гигантским
  • +2
    Хорошо бы ссылку на ограничение в 4Кб. Видел только ограничение на 32К у IE8
    CSS-файлы с разными @media можно объединять через конструцию
    @media print { ... правила для CSS-файла с media="print" ... }@media screen { ... правила для CSS-файла с media="screen" ... }

    только Safari не подхватывает @media all{} — тут надо аккуратнее

    P.S. чую, что уже конкуренция для webo.in / Web Optimizer нарисовалась :) Конкуренция — это хорошо :)
    • +1
      > Хорошо бы ссылку на ограничение в 4Кб. Видел только ограничение на 32К у IE8
      я поверял в свое время, на Опере 9.х версии ограничение было. Надо конечно сделать тестовую страницу в разными размерами и проверять периодически разные браузеры на работоспособность. Добавлю в TODO.

      Да конкуренция есть немного, думаю не подеремся :).
      • +2
        Я тоже проверял. Ограничение было в какой-то старой версии, в новой лимита не нашёл. Каким образом вы проверяли ограничение?
        • +1
          обычным, убирал лимит и генерировал css c изображениями большими. Надо сделать тестовую страницу, уже записал себе в планы на будущее.
          • +1
            попробую сегодня
          • 0
            Попробовал. Например, 17Кб — без проблем.
            • 0
              версия Оперы?
              • 0
                Opera 10 build 1535 под Windows и Opera 9.63 по Mac.
                • 0
                  ок, я перепроверю. помоему я на версии 9.27 когда-то проверял…
              • 0
                Я пробовал вставлять html в iframe.
                • 0
                  это роли не играет.

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