Data URI [CSS] Sprites 1.5 — уникальный автоматический генератор CSS спрайтов



    Тем кто следит за статьями про клиентскую оптимизацию уже известен современный подход к созданию CSS спрайтов на базе data:uri технологии. Указанный подход имеет весомые достоинства:
    • абсолютная минимизация конектов к серверу за изображениями определенных в css — сделать еще меньше уже невозможно.
    • полная 100%-ая автоматизация процесса создания спрайтов независимо от свойств backgroud-position и background-repeat.
    • предзагрузка всех изображений определенных в css, которые необходимы для сайта.


    Кто желает освежить память или ознакомится с предыдущими статьями может прочитать статьи Cовременный подход к генерации CSS спрайтов и Автоматизация процесса сборки css спрайтов

    Сегодня ночью вышло очередное значительное обновление:


    1. выловленно и устранено много багов
    2. добавлена коррекция путей типа _http://site.com/../image.png, _http://site.com/../../../image.png — они равны _http://site.com/image.png
    3. добавлена корректная обработка мульти определений фильтров, к примеру filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/chart/buttons/prev.png', sizingMethod='crop')
    4. добавлена вставка для ИЕ8 свойств filter alphaimageloader в стандартном формате
    5. добавлена корректная обработка css хака для сафари media screen and (-webkit-min-device-pixel-ratio:0)
    6. доработан порядок формирования результирующего скрипта, из совокупности скриптов, в последовательности размещения исходных скриптов в странице
    7. добавлен компрессор HTML
    8. добавлено отображение процента сжатия/оптимизации
    9. добавлена обработка атрибута duris:interal=«1|true» — которая превращает внешний скрипт во внутрений и вставляет его на текущее место внешнего
    10. добавлена обработка атрибута duris:nomerge=«1|true» — которая запрещает объединение скрипта/стиля с другими в один результирующий скрипт/стиль
    11. добавлена возможность онлайн просмотра результатов
    12. добавлена оптимизация изображений посредством сервиса Smush.It


    Относительно пунктов 9 и 10 — введены спец атрибуты, которые позволяют настроить обработку конкретного скрипта/стиля независимо от общих настроек. В результирующем файле эти атрибуты вычищаются и отсутствуют.

    к примеру внешний скрипт
    <script style=«text/javascript» duris:interal=«1» src=«checkbrowser.js»>
    после обработки превратится во внутренний.

    11 пункт является отдельным большим обновлением и нашим подарком для разработчиков. Теперь вы можете просмотреть результаты обработки вашего сайта так сказать «не отходя от кассы»! Для онлайн просмотра потребуется зарегистрироваться. Владельцам аккаунтов в сервисах Google (@gmail.com), Yahoo! (@yahoo.com), Yandex (@yandex.ru) можно не регистрироваться, система поддерживает вход с этими аккаунтами.

    Думаю, еще найдутся какие-то недочеты, бажки, о коих просим незамедлительно сообщать дабы мы могли вас радовать безупречной работой нашего сервиса. Если у вас будут предложения или замечания с большым интересом их выслушаем и обсудим.

    duris.ru

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

      +11

      Лаконично. Обычно включаю javascript когда вижу что функционал сайта требует, но здесь сначала пришлось оценить шутку юмора )
        0
        а я думал много пройдет времени пока заметят, а тут с первого комментария :).
        0
        Для онлайн просмотра потребуется зарегистрироваться.
        А это где? Нажимая «Online Preview Result» открывается новое окно и собственно всё.
          0
          и что собственно все? пустая страница?
            0
            Нет, просмотр. Правда кодировка сбивается.
              0
              кое-что подправили, а сейчас?
                0
                Определилась )
                Вот только на базовом же примере (artlebedev.ru) иногда проскакивают ��.
                  0
                  да видел, online preview служит для оценки скорости загрузки и кол-ва конектов, пока все кодировки и всякие исключительные ситуации с кодировками не отрабатываются.
          0
          пора проект переименовывать :)
            0
            пора привыкать :)
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              нет не опен ИД, какой из трех указанных сервисов вы используете?
              • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  у Яндекса скорее всего OpenID
                    0
                    вы вводите по формату?
                    Login: blabla@yandex.ru
                    Password: blablabla

                    у кого есть еще проблемы со входом через Яндекс, просьба писать в эту ветку.
                    • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        а зайти в сам Яндекс с вашим логином возможно? может ошибка в имени? или Яндекс заблокировал аккаунт ваш. Хочется разобраться, может у нас проблема. Интересно есть ли у кого еще такие симптомы?
                        • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      У меня с яндекс аккаунт нормально работает
                  0
                  Надо написать итоговые результаты: вес страницы до оптимизации и после оптимизации, процент улучшения.
                    0
                    ну самом деле процент сжатия указывается напротив каждого файла. да и основная задача все ж не оптимизация, а формирование спрайтов. хотя ваша мысль интересна, надо будет обдумать.
                      0
                      Очень многие вещи используются не по прямому их назначению, примером тому служат игры на эвм )
                    0
                    Я не понял, почему только бэкграунды только оптимизируются… :-(
                      0
                      оптимизируются изображения прописанные в css файлах. тег <img> не обрабатывается
                        0
                        Это то понятно. Не понятно, почему IMG не обрабатываются, если все равно html переписывается.
                          0
                          ну потому что оптимизация <img> ложится на плечи разработчика, да и не хорошо все полностью в одном конекте грузить, параллельные запросы в умеренном кол-ве ускоряют процесс загрузки сайта. Хочется оптимизировать изображение = выносите его в стили.
                      0
                      выглядит неплохо, работает вроде тоже :)
                      а когда торжественное открытие?
                        0
                        не знаю, наверно когда запустится пару серьезных сайтов с применением duris. Один уже есть — довольно «навороченное» одностраничное веб-приложение, пока указать не могу, там нет демо аккаунта, а регистрация не целевой аудитории там никак не нужна.
                        хотя как таковое открытие уже было с первым запуском сервиса, бета говорит о том что возможно наличие ошибок, но их реально уже много устранено.
                        а что под торжественным открытием понимаете вы?
                          0
                          а я скорее всего вообще неправильно понял весь замысел, сегодня прочитаю вдумчиво все топики по теме, а-то пока бегло все пролистал…

                          вот лично мне на данный момент показалось, что сервис, грубо говоря, анализирует структуру конкретного сайта, затем в некотором роде оптимизирует его код и выдаёт усовершенствованный результат. Соответственно под торжественным открытием я понимал, выполнение этих операций для любого желаемого сайта :)
                            0
                            да так и есть, анализирует структуру СТИЛЕЙ и скриптов + выдает оптимизированный результат в соответствии с настройками (галочки на сайте), на данный момент практически для любого сайта
                              0
                              я только сейчас понял, что то место где стоит адрес лебедевского сайта, является полем ввода. Сделайте подложку для этого поля поконтрастней. И возможно текстовую пометку, т.к. я сейчас открыл сайт в другом браузере и заметил, что тест адреса по умолчанию выделен, хотя у меня в опере (глупая 10.00 Beta) ничего подобного не отображается :)

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

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