CSS sprite和他的小伙伴

这个月要在591工程部门的分享会上分享css sprite的相关知识，我先收集一些资料，了解一下大致的来龙去脉。

 

在http1的时代（http2有所不同），能够有效减少http请求数，减少网络握手延时，就会对前端的性能提升起到很大的帮助。雪碧图作为一种图片拼合技术，将多个小图合并成一张大图，能够大大节省请求次数和减少图片字节大小，从而成为前端工程师作为性能优化的必做工作。但是在刀耕火种茹毛饮血的前端时代，雪碧图只能手动拼合，实在是一种费时费力爹不疼娘不爱的苦力工作。

本文主要讲述了如何借助compass和其它相关工具自动合成css雪碧图，来解放生成力、以及针对雪碧图的应用场景简单说明了图标字体和svg作为替代方案的应用案例。

一，前言介绍

为什么叫雪碧图或者精灵图？

sprite/sprait/noun

(in stories) a small creature with magic powers, especially one that likes playing tricks（传说中的）小仙子，小精灵，小妖精

上面简单介绍了sprite这个单词的意思，所以中文翻译为“雪碧图”是出于音译，翻译为“精灵图”是出于意译。

css sprite的优点

  1. 减少了网页的http请求，从而大大的提高了页面的性能。
  2. 减少图片的字节，3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

css sprite的缺点

  1. 手动合并成一张图片。
  2. 手动量小图的尺寸。
  3. 如果增加、修改或者删除一个小图标呢？难于维护和扩展。

二，实现方式

css gaga工具的实现

我们可以借助一些css sprite桌面程序来实现，详细使用方式可以查看这里。

compass sprite的实现

首先，你要安装好ruby、sass和compass的环境。之后打开你最心爱的编辑器写下下面这一段代码，写好之后，我们再来逐行分析这些语句是什么意思。

@charset "UTF-8";

$icons-spacing: 0px;        // 雪碧小圖的間隔距離
$icons-layout: smart;       // 雪碧小圖的排列方式
$icons: sprite-map( "./path/to/icons/*.png" );

@import "compass/utilities/sprites";
@import "./path/to/icons/*.png";

@include all-icons-sprites;

.icon-praise{
    @include icons-sprite( praise_default );
    @include sprite-dimensions( $icons, praise_default );
    &:hover{
        @include icons-sprite( praise_hover );        
    }
    &.active{
        @include icons-sprite( praise_disabled );        
    }
}

指定文件编码

@charset "UTF-8";

当你写的css包含一些中文字符的时候，这时就需要将文件指定为utf-8的编码以保证compass编译不会报Error: Invalid CP950 character “\xxx”的错误。当然，你也可以在config.rb文件里加上这么一行，做到一劳永逸。

Encoding.default_external = 'utf-8'

设置合成后的雪碧小图的间隔和排列方式

$icons-spacing: 0px;        // 雪碧小圖的間隔距離
$icons-layout: smart;       // 雪碧小圖的排列方式

指定要合成雪碧图的所有小图标

$icons: sprite-map( "./path/to/icons/*.png" );

这行是关键代码，compass会自动将icons下的所有图片文件合成到一张图上，并保留这些图片的文件名放到$icons的变量里，以便在后面使用。

导入compass的一些雪碧图工具集

@import "compass/utilities/sprites";
@import "./path/to/icons/*.png";

@include all-icons-sprites;

compass为开发者提供了很多的工具集，其中sprites就是帮助我们自动实现雪碧图的核心。

终于可以开始愉快的使用了

.icon-praise{
    @include icons-sprite( praise_default );
    @include sprite-dimensions( $icons, praise_default );
    &:hover{
        @include icons-sprite( praise_hover );        
    }
    &.active{
        @include icons-sprite( praise_disabled );        
    }
}

现在我们写了一个icon-praise的class，通过@include icons-sprite( praise_default );将图片包含进来，设定background-image的position；再用@include sprite-dimensions( $icons, praise_default );设置这个class的宽高。

生成的图片大概是这个样子

compass sprites
compass sprites

编译后的css代码

.icon-praise {
    background-image: url(path/to/icons-s017537717e.png);
    background-repeat: no-repeat;
}
.icon-praise {
    background-position: 0 -602px;
    height: 76px;
    width: 76px;
}

大功告成🤙。

compass sprite的优点

  1. 自动化，爽。

compass sprite的缺点

  1. 难以控制小图的确切位置，导致背景动画效果难以掌控。

三，css sprites小伙伴

另外我们可以使用图标字体和svg实现雪碧图的替代方案，其中图标字体的实现可以利用icomoon这个功能强大的网站帮助我们生成；svg的实现主要是使用了symbol标签，这里水太深，我就不详诉了。

图标字体

SVG Sprite

参考链接

  1. http://www.codeweblog.com/%E9%98%BF%E9%87%8C%E5%A6%88%E5%A6%88ued-%E4%B9%9F%E8%B0%88css-sprites/
  2. http://www.imooc.com/learn/93
  3. http://www.imooc.com/video/5125/0
  4. http://weibo.com/p/1001603879399308291327?mod=zwenzhang
  5. http://weibo.com/p/1001603879388017261441
  6. http://www.w3cplus.com/content/css3-font-face
  7. https://www.fontsquirrel.com/
  8. https://alistapart.com/article/sprites
  9. https://alistapart.com/article/sprites2
  10. http://www.zhangxinxu.com/wordpress/2014/07/introduce-svg-sprite-technology/

作者： 曾小乱

喜欢写点有意思的东西