Генератор CSS Sprite для проекта Ruby on Rails
В настоящее время я работаю над большим веб-сайтом Ruby on Rails с высокой посещаемостью, и для того, чтобы сократить время загрузки нашей страницы, мы смотрим на спрайты наших фоновых изображений. Кажется, есть много инструментов, но многие находятся на ранних стадиях разработки, и многие не поддерживают некоторые функции, которые нам нужны.
Особенности, которые важны для нас:
- х или у повторяется
- автоматизация с нашей грабли сборки
- прозрачность
- автоматически генерирует спрайт и CSS
- зрелый
- прост в обслуживании
- Открытый исходный код
Если бы он был написан на Ruby, это было бы бонусом, но не обязательно, если бы он мог интегрироваться с настройкой рейка / кепки.
Существуют ли какие-либо инструменты CSS-спрайтов, которые соответствуют большинству (всем?) Из этих критериев?
3 ответа
Вместо того, чтобы создавать изображения, почему бы не использовать data-uri? Jammit может генерировать файлы CSS с небольшими изображениями, скомпилированными как объекты data-uri. На самом деле это даже более эффективно, чем спрайт-листы, потому что это означает, что у вас есть только одно HTTP-соединение для таблицы стилей, а не одно для таблицы стилей и одно для спрайт-листа.
Чтобы использовать его, вам просто нужно, чтобы ваши маленькие изображения (значки, повторяющиеся фоны и т. Д.) Ссылались где-то на пути /embed/ в пути, и он будет генерировать data-uri, MHTML и простые версии таблиц стилей для обслуживания в различных браузерах.,
Jammit также выполняет компиляцию нескольких таблиц стилей (и Javascripts) в один файл (для каждого типа) и может также использовать некоторые шаблоны Javascript, если вы хотите быть сверхоптимизированными с вашими ответами AJAX.
Недостатки в том, что а) если вы ссылаетесь на изображение более одного раза, оно компилируется для каждой ссылки, и б) изменение изображения приводит к тому, что клиентам необходимо повторно загрузить всю таблицу стилей. Однако, поскольку эти ресурсы обычно изменяются довольно редко, это может быть решением, которое приводит к гораздо более быстрой загрузке страниц без дополнительных затрат на процесс разработки.
Чтобы смягчить их, у вас может быть отдельная таблица стилей, предназначенная только для ссылок на изображения, поэтому у вас будет одна таблица стилей для обычных макетов, а затем другая, в которую будут скомпилированы все ваши ресурсы data-uri. Это может привести к двум HTTP-запросам, но это означает, что вы можете изменить свой CSS или встроенные изображения, не вынуждая повторно загружать всю другую половину вашего стиля.
Один большой минус в отношении предложения Криса использовать data-uri через Jammit заключается в том, что он не поддерживает IE6/7.
Есть новый гем под названием active_assets, который дает вам полную интеграцию спрайтов с вашим стеком rails. Проверьте это на GitHub. Драгоценный камень позволяет вам определить ваши спрайты, включая список изображений для включения в спрайт, а затем сгенерировать спрайт и соответствующую таблицу стилей. Ридме по ссылке выше содержит всю информацию.