CSS Sprites

在css开发中有一件非常令人头疼的东西:拼背景图片。比如一个项目中有三种按钮:button-normal, button-submit, button-cancel。一般的方式是个人手动在PSD中新建一个较大的画布,把三个按钮分别移到该画布上,最后通过background-position定位。这个过程中有两步是比较耗时且不合理的:

1.在css中对需要的图标进行定位,尤其是集成度非常高的图片,一张图片中可能有数十个图标,而且图标之间的位置并没有绝对正确的规律,没有像素眼去调整位置是很消磨耐心的工作;
2.每一次有新的图标需要更新,都要注意不能移动以前图片的已有位置,然后再把新的图片添加进去,接着去为background-position定位。

但是出于对性能的追求,这件事情有时候还不得不做。事实上,在CSSJavaScript文件的处理上也有类似的情况,目前已经有很好的解决办法,当人们厌倦了一直重复某件事情的时候,最终总会殊途同归:自动化。以Grunt举例,我想把scripts中所有的js文件合并并成app.min.js,grunt配置核心代码如下:

// Merge javascript files.
concat:
  js: { src: ‘/scripts/**/*.js‘, dest: ‘/scripts/temp/app.js‘ }
},
// Minifire javascript files.
uglify: {
  build: {
    files: { ‘/scripts/app.min.js‘: ‘/scripts/temp/app.js‘ }
  }
}

一句grunt命令操作完成。

Glue

接下来介绍的这个命令行工具glue做的甚至更多,假设我们有一个存放图片的文件夹scene,在同级目录下执行:

glue img css

发现img文件夹下的图片自动合并至css文件夹,生成以img命名的图片:img.png,和img.css,这个图片我们都知道是合并后的总图片,这个css文件是什么?打开看看:

.sprite-scene-weibo,
.website {
    background-image: url(‘scene.png‘);
    background-repeat: no-repeat;
}
.sprite-scene-weibo {
    background-position: 0 0;
    width: 52px;
    height: 52px;
}

.sprite-scene-website {
    background-position: -52px 0;
    width: 52px;
    height: 52px;
}

原来是背景图片定位的css代码!这样的话大功告成,之前提出的两个问题全部解决!如果有图片更新,把图片放到文件夹再执行glue命令即可。

还没有完,Glue做的比我们想象的更多,列一点可能是最无关紧要的:Retina支持。

glue img css --retina

会发现除了生成一个scene.png以外,多了一个scene@2x.png。非常简单,配合retina.js使用优化Retina也只是分分钟!

时间紧迫,午休结束,安装方法和更详细的使用请到自行到Glue的Github主页查看:https://github.com/jorgebastida/glue

图形工具

也试用了几个图形化的工具,感觉都不太满意,UI难看,用起来也不如命令行来的方便,有一个基于Adobe air的bg2css欢迎各位去尝试。

CSS Sprites,布布扣,bubuko.com

CSS Sprites

上一篇:如何在asp.net中如何在线播放各类视频文件


下一篇:Nginx -- Gzip 压缩功能作用