Pull to refresh

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

Reading time 2 min
Views 2.1K


Тем кто следит за статьями про клиентскую оптимизацию уже известен современный подход к созданию 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
Tags:
Hubs:
+35
Comments 31
Comments Comments 31

Articles