如何缩小 CSS？属性 [背景位置] 的简写？

Question

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

background-position

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

看看下面这张照片的疯狂程度......

干杯，非常感谢！

更新：

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

---

Answer 1

一种方法是将背景位置编码到类名中，然后使用 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");
    }
  });
});

实际上，您在那里拥有自己的 deminifier。我并不是说这是最好的方法，但它确实解决了您对 HTML 文件大小的担忧（以渲染时间为代价）。

Answer 2

简单地使用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; 
}

不过，除非您是 Google、Facebook 等，否则保存这么多字节可能不值得麻烦（除了我上面的示例）。