由css sprites撰写的日志

最先听到img sprites这个词汇是在D2上，口碑网的工程师提出这样一个理论：
在浏览器渲染的过程中，img是顺序加载的，而background是最后加载的，所以会导致背景载入延迟，给用户的体验不好。
于是他想了个办法，把logo加入css sprites的图片，然后用img来引用它，用position的方法来定位。从而让这张图片事先加载，解决背景载入延迟问题。
事实上我在以前就看到过这样的案例，google地图的tips就是用这个方法。
不过现在口碑网并不使用这个方法，口碑的logo也换成了独立的了，据说在圈子里说这个方法鸡肋。
我认为可能性大概有如下几点：
1.图片预加载，不过图片巨大，会影响整个网页的加载进度。
2.当用户用右键另存为的方法存取口碑的logo时，存下来的却是整张背景。

另外在ico css sprites中有种方法是：
使用透明的img来当做容器，使用css sprites来定位图案，生成一个img的ico，这样的好处是减少了http请求，而img在布局中非常容易控制。
大家知道，ico可能会存在任何地方，比如一个高30px的title，比如一个高20的list，甚至可以存在于一段文字当中，如此多变的情况，也只有给图案一个独立容器来的保险。

在使用css sprites技术的时候，图案的排法是根据设计稿来设定的。
设计搞意味着你的图案如何留出所需的空隙。
如图，我们还是用网易的图片

大家可能看出了，网易这里图标之间的空隙并不是没有道理的，因为设计稿中设定了这么大的间隙。
另外，如果这里你给图标一个额外的容器来陈放，那么你也可以使用紧凑型来布局，当然这样做并不语义，而且增加了标签。

从淘宝、网易的图片可以看出，一般列表符号都放在最右侧，例如网易的新闻列表连接。

事实上一张css sprites制作的图片，四个边都是很重要的位置，特别是左右两侧，例如图案在图片的右侧，那么你的容器可以把图案放在容器左侧，右侧则可以无限延伸，反之亦然，当然这里背景是不能循环的，否则在图片左侧的图案会跑到容器上去。

这就是为什么前面看到qzone的ico图片是竖排的，因为ico右侧往往会跟上文字，这样右侧可以无限延伸的优势就可以体现出来了。

在网页中，背景循环可分为四类:
1.横向循环
2.纵向循环
3.横纵向循环
4.不循环
一般在css sprites中，横纵向循环的背景是不存在的，更多的是使用不循环或者单向循环。
另外，在一张css sprites的拼合图片中，一般只能存在横向循环或者只能存在纵向循环，也就是说，纵向循环和横向循环在css sprites中是不能在一起出现的。

css sprites的思想很简单：
利用background获取容器背景，并在指定容器中显示，利用background-position来指定背景上的图案。
原理如图：

图片出自网易
继续阅读 »

关于css sprites大家并不陌生，把多张小图拼凑到一张大图里，从而减少页面的http请求数，提高网站性能的一门技术。
以前有同学说，css sprites是鸡肋，因为图片是拥有缓存的，所以对性能并不会产生多大影响。
我认为当服务器是通过cdn来连接的话，那么的网页每个http请求都将通过cdn服务器来转发，这样将会增加cdn服务器的负担，相对的判断一个图片版本是否和缓存文件版本统一也是要通过cdn服务器的，当然这只是很小的一部分好处，减少HTTP请求是最直接的提高网站性能的方法之一了。
css sprites的功能显而易见，不过它的维护难度让许多同学望而生畏，当然这也是仁者见仁智者见智，不予深论。
css sprites的图片我姑且就分为三类。
一、背景型
这类图片里面大多都是背景，常常出现在页首，页尾的统一样式中，在三种类型中也最为广泛，排法也五花八门。

图片出自淘宝
继续阅读 »