css - 我怎样才能缩小CSS？属性 [ background-position ] 的简写？

Question

混合 1 查看我网站的源代码，其中包含 19 个字符的字节浪费字母 background-position，用于 sprite 图标位置，您会感受到我对此的一点挫败感长字:

背景位置

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

看看下面的图片，看看它的疯狂程度......

干杯，非常感谢!

更新:

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

---

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");
    }
  });
});

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