如此那般就足以,页面作用难点

CSS Sprites
技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵
CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我们详细的聊聊。


在大家还在拨号上网的“远古时期”,由于网速的限制,页面开发者都喜欢把网页里面的图片字节数控制的非常小,往往在一个图片文件夹里散落着n多的小碎图。随着网络技术的发展,网速的提升,大家越来越重视页面的加载速度,页面效率问题,过去的那些小图便成为了前端开发者的眼中钉,因为每加载一张图片都会产生一次浏览器请求数,发起的请求数越多那么页面加载的速度也越慢。还有当页面加载时,图片一个个的零星显示,鼠标经过时候背景闪白等也都是我们不能忍受的。于是乎将页面中的背景图整合到一起,利用“background-image”,“background-
repeat”,“background-position”的组合进行背景定位的技术被广泛使用与了页面构建中,这就是CSS
Sprites。当然CSS Sprites技术也存在着维护不便,内存占用大等等的缺点。

CSS Sprites 、精灵图、 雪碧图 都是一个概念


好了,如果我只说这些,那么这篇文章就有点太水了。前面那些只是对CSS
Sprites技术的一个普及。作为一个开发者我们应该对它有一个更全面的认识,挖掘深度内容,这样才能有利于我们效率开发,团队协作。

* 我对精灵图的简单看法

关于精灵图我简单的介绍一下:就是把多张小图片拼接成一张大图片,通过定位,设置X,Y轴坐标的值,并让超出部分隐藏,这样就可以显示图片的局部,也就是我们想要的部分,这样做有利于页面优化,当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。它大大减少了HTTP请求的次数减轻服务器压力同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅不会停顿

但它适用于小型项目,它的坏处就是合并图片难,而且如果后期改变某一个图片,很可能就会影响页面的整体布局,需要重新设置每个小图标的X,Y坐标,

需要注意的是,精灵图以左上角坐标原点(0,0),X轴的水平向右正方向Y轴竖直向下正方向,X,Y取值均为负值

简单举个我在工作中的使用例子,最简单的登录框,在input中加入username用户名的小图标,在keyword用户密码中加入密码锁的图标,还有就是类似于京东的最右侧的固定定位侧边栏的加购物车,我的京东等小功能的图标都是使用的精灵图。

头疼的多人拼图游戏

一. 原理

CSS
Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”“background- repeat”“background-position”的组合进行背景定位,background-position可以用数字精确的定位出
背景图片的位置。

使用CSS
Sprites,就好像玩拼图游戏一样。一张白画布,那么多图怎么放到里面去才会完美?这是个让人纠结的事。而且在实际在工作场景中,我们面临着项目开发时间紧张,UI设计图要分期提供,多人协同开发一个项目等等问题。这些问题非常容易让我们在大项目中迷失,造成CSS拼图混乱,维护及其困难的情况。

二. 使用场景

CSS
Sprites可以用在很多场合,大型网站可以将许多单独的图片,以有机的方式组合起来,从而使其便于维护和更新。图片之间通常会留出较大的空白,使得图片不会影响网页的内容。

但同时CSS
Sprite大多使用于较固定的像素定位中,它的弹性较差,受到定位等因素的制约。所以,你需要在可维护性vs降低负载之间权衡利弊,选择最适合你的项目
的方式。

定好规则,其实拼图也挺好玩的

三. 优点

1.利用CSS Sprites能很好地
减少网页的http请求,从而大大的提高页面的性能,这也是CSS
Sprites最大的优点,也是其被广泛传播和应用的主要原因;

2.CSS
Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

4.更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

先期的准备工作

四. 缺点

诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:

1.在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内出现不必要的背景;这些还好,最痛苦的是在
宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂

2.CSS Sprites在开发的时候比较麻烦,你要通过
photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好
腾讯的鬼哥用 ADOBE AIR开发了一个CSS Sprites
样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!

3.CSS
Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的
css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

4.CSS
Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS
Sprites。

应对一个项目后期维护成本大的问题,我们最好的解决方案就是在开始前制定一系列的规范来限制问题的产品。好的开始是成功的一半。对于CSS
Sprites,在项目开始前,我们要充分认识一个产品,同UI设计师做好良好的沟通,对我们未来组成我们Sprites图的各个元素有个大体的概念,比如我们的背景拼图可能包括什么。

五. 比较经典的使用案例

  1. YouTube使用了一个2008像素高的CSS Sprites:
![](https://upload-images.jianshu.io/upload_images/5726812-d094e840ad532bdd.gif)

YouTube
  1. 苹果网站使用CSS Sprites来制作导航菜单的鼠标悬停效果:
![](https://upload-images.jianshu.io/upload_images/5726812-a2683f7c1ec72bd6.jpg)

Apple
  1. 亚马逊使用的大幅、整齐巧妙的CSS Sprites:
![](https://upload-images.jianshu.io/upload_images/5726812-f84f4a3aa4b4837d.png)

Amazon
  1. CNN使用了非常简单谨慎的方案:
![](https://upload-images.jianshu.io/upload_images/5726812-f9bc2ce8eec96330.gif)

CNN
  1. Google使用了极其简化的方案:
![](https://upload-images.jianshu.io/upload_images/5726812-3050261a38b67959.png)

Google

一个好的Sprite画布是必须的

网页设计里面,Grid系统是必不可少的,好的Grid能解决我们很多排版问题。Grid系统同样适用于CSS
Sprites。我们需要创建好一个优秀的画板,剩下的工作就是将元素合理的置于画板中了。

这张是我准备的一张CSS Sprites画布,我们将在这个PSD里面组合项目中的图片。

这张画布是由20px*20px像素的格子组成。这个格子基本上由项目决定的,当我们同UI设计师沟通了解这个项目最多的为16px*16px
图标时。我们就可以采用这种Grid尺寸为画布了。

Sprites画布有了,接下来就是对图标进行分组了

对于信息的归纳总结、分类是一个有意思的事情。就拿图标来说,我们就可以根据图标功能,尺寸等等作为信息维度进行归纳。其实无论怎么归纳,都是可以的,只是记得我们以一个方向作为标准就可以了。

相关文章

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图