我怎样才能缩小CSS？财产的简写[background-position]？

Question

混合1看看我的网站的源代码和19个字节浪费字母background-position字符，对于精灵图标位置，你会感觉到我对这个长字有点沮丧：

background-position

单独使用它很好，但是当设置数百个精灵图标时，它只是愚蠢的字节浪费。所以我的问题是：是否有更聪明的简写可以取代这个长字？如果是这样，它会节省我的页面的一半！

在下面的图片中看看它的疯狂......

干杯，非常感谢！

更新

请注意，每个图标都有自己独特的图标和唯一的背景偏移。

---

Answer 1

仅使用background似乎overwrite the actual background image，所以看起来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; 
}

但是，除非你是谷歌，Facebook等，否则保存这么多字节可能不值得麻烦（超出我上面的例子）。

Answer 2

方法是在类名中对background-position进行编码，然后使用javascript将其转换为元素样式。

所以

 <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文件大小的关注（以渲染时间为代价）。