Генератор CSS Sprite для проекта Ruby on Rails - PullRequest
3 голосов
/ 30 сентября 2010

В настоящее время я работаю над большим веб-сайтом Ruby on Rails с высокой посещаемостью, и чтобы сократить время загрузки нашей страницы, мы стремимся спрайтовать наши фоновые изображения.Кажется, есть много инструментов, но многие находятся на ранних стадиях разработки, и многие не поддерживают некоторые из необходимых нам функций.

Функции, которые важны для нас:

  • x или y повторение
  • автоматизация с нашей сборкой граблей
  • прозрачность
  • автоматически генерирует спрайт и css
  • зрелый
  • простота в обслуживании
  • с открытым исходным кодом

Если бы он был написан на Ruby, это было бы бонусом, но не обязательно, если бы оно могло интегрироваться с настройкой рейка / кепки.

Существуют ли какие-либо инструменты css-спрайтов, которые соответствуют большинству (всем?) Этих критериев?

Ответы [ 3 ]

7 голосов
/ 30 сентября 2010

Вместо того, чтобы создавать изображения, почему бы не использовать data-uri? Jammit может генерировать файлы CSS с небольшими изображениями, скомпилированными как объекты data-uri. На самом деле это даже более эффективно, чем спрайт-листы, потому что это означает, что у вас есть только одно HTTP-соединение для таблицы стилей, а не одно для таблицы стилей и одно для таблицы спрайтов.

Чтобы использовать его, у вас просто есть небольшие изображения (значки, повторяющиеся фоны и т. Д.), На которые есть ссылка / embed / в пути где-то, и он будет генерировать data-uri, MHTML и простые версии таблиц стилей для обслуживания. в различные браузеры.

Jammit также выполняет компиляцию нескольких таблиц стилей (и Javascripts) в один файл (для каждого типа) и может также использовать некоторые шаблоны Javascript, если вы хотите быть сверхоптимизированными с вашими ответами AJAX.

Недостатками являются то, что а) если вы ссылаетесь на изображение более одного раза, оно компилируется для каждой ссылки, и б) изменение изображения приводит к тому, что клиентам требуется повторная загрузка всей таблицы стилей. Однако, поскольку эти ресурсы обычно изменяются довольно редко, это может быть решение, которое приводит к гораздо более быстрой загрузке страниц без дополнительных затрат на процесс разработки.

Чтобы смягчить их, у вас может быть отдельная таблица стилей, предназначенная только для ссылок на изображения, поэтому у вас будет одна таблица стилей для обычных макетов, а затем другая, в которую будут скомпилированы все ваши ресурсы data-uri. Это может привести к двум HTTP-запросам, но это означает, что вы можете изменить свой CSS или встроенные изображения без принудительной повторной загрузки всей другой половины вашего стиля.

1 голос
/ 09 февраля 2011

Один большой минус в отношении предложения Криса использовать data-uri через Jammit заключается в том, что он не поддерживает IE6 / 7.

1 голос
/ 26 января 2011

Это новый гем под названием active_assets, который дает вам полную интеграцию спрайтов с вашим стеком рельсов.Проверьте это в github .Жемчужина позволяет вам определить свои спрайты, включая список изображений для включения в спрайт, а затем генерирует спрайт и соответствующую таблицу стилей.Readme по вышеуказанной ссылке содержит всю информацию.

...