Автоматизация CSS Sprites - PullRequest
       25

Автоматизация CSS Sprites

1 голос
/ 01 июля 2011

Недавно я имел дело со спрайтами CSS.Работает нормально.

Я создал спрайт, .css-файл и html-структуру.Похоже,

.sprites{
         background-image:url('../img/sprite.png');
         background-color:transparent;
         background-repeat:no-repeat;
         height:44px;
         width:44px;
  }
.pic1            {background-position:0 0;}
.pic2            {background-position:-44px 0;}



 <div class="outer"><div class="sprites ${image}"></div></div>

${image} выбирает класс, если условие выполняется.

Я создаю спрайт, CSS и HTML вручную.Я мог бы использовать генератор, но код был бы таким же.

Есть ли способ автоматически создавать спрайты и CSS с помощью, например, Java?Если бы существовала папка с 50 изображениями, то программа, о которой, я думаю, нужно написать, создаст спрайт и соответствующие атрибуты css.Это возможно?Вы уже слышали о такой программе?

Ответы [ 3 ]

1 голос
/ 11 сентября 2011

Если вы используете .net, посмотрите http://www.RequestReduce.com. Он не только автоматически создает файл спрайта, но и делает это на лету через HttpModule вместе со слиянием и минимизацией всего CSS.Он также оптимизирует изображение спрайта, используя квантование и сжатие без потерь, и обрабатывает сгенерированные файлы с использованием заголовков ETags и Expires для обеспечения оптимального кэширования в браузере.Установка тривиальна и включает простое изменение web.config.См. Мое сообщение в блоге о его принятии в галерее образцов Microsoft Visual Studio и MSDN.

Вам не нужно размещать изображения в какой-либо конкретной папке или формате, поскольку RequestReduce использует CSSизображения через HTTP.Так что ваши CSS и спрайты могут быть даже размещены в другом месте, и это сработает.

1 голос
/ 01 июля 2011
0 голосов
/ 23 марта 2017

Этот инструмент может помочь кому-то, кто обратится к этому позже.http://www.spritecss.com/

...