Как я могу минимизировать CSS?Сокращение для свойства [background-position]? - PullRequest
Новая
       29

Как я могу минимизировать CSS?Сокращение для свойства [background-position]?

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

Смешайте 1 взгляд на исходный код моего сайта с 19 символами пропущенных байтов букв background-position, для позиций спрайтов, и вы почувствуете мое небольшое разочарование по поводу этого длинного слова:

background-position

Использование его по отдельности - это нормально, но при установке сотен значков спрайтов это просто глупая трата байтов.Итак, мой вопрос: есть ли более умные сокращения , которые могут заменить это длинное слово?Если это так, это спасло бы меня половину байтов моей страницы!

Просто взгляните на его безумие на картинке ниже ...

Приветствия и высоко ценится!

обновление:

обратите внимание, что у каждой иконки есть свой уникальный значок и смещение фона.

enter image description here

Ответы [ 2 ]

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

Подход будет состоять в том, чтобы кодировать положение фона в имени класса, а затем использовать javascript для преобразования его в стиль элемента.

So 

 <p class="mnu" style="background-position: 0 -1690px">

становится 

 <p class="mnu bg p$0$-1690">

Тогда вы делаете что-то вроде 

$('.bg').each( function() {
  var elem = $(this);
  var classes = elem.attr('class').split(/\s+/);
  $.each(classes, function(index, classname) {
    if(classname.indexOf('p$') != -1) {
      var coords = new Array();
      coords = classname.split('$');

      elem.css('background-position', coords[1]+"px "+coords[2]+"px");
    }
  });
});

В действительности, у вас есть собственный де-минификатор. Я не говорю, что это лучший способ сделать это, но он учитывает вашу озабоченность размером файла HTML (за счет времени рендеринга).

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

Использование просто background кажется перезаписывает фактическое фоновое изображение , поэтому похоже, что background-position - ваша единственная ставка.

Тем не менее, вы могли бы вместо этого использовать классы, например ...

HTML 

<div class="sprite-button save">Save</div>

CSS 

.sprite-button {
   width: 10px;
   height: 10px;
   background-image: url(sprites.png);
   background-repeat: no-repeat;
   text-indent: -9999px;
}

.save {
   background-position: -30px 0; 
}

Тем не менее, если вы не Google, Facebook и т. Д., Сохранение этого количества байтов, вероятно, не стоит проблем (за исключением моего примера выше).

...