科技助力经济发展

© 2024  TMTforum  沪ICP备15013635号-21
首页 声音 项目 正文

网站icon的CSS维护

作者：啄木鸟Blog 时间：2012-10-07 0

图标是各个网站必不可少的东西，一个大型网站可能会有上百个图标，例如应用图标（相册/日志）、交互性图标(编辑/管理)、描述性图标(已关注/在线)等。

1.性能

为了减少http请求，那么我会把这些图标切入一张图片里做css sprites，而考虑到公用，我会把相同属性的icon归到一起，而不是跟其他标题背景等放在一起（这个具体后面会说）。

2.敏捷性

这里图标可能是在列表里，可能是独立存在，甚至可能在一片文章中：

面对这种情况那么最好用的当然是把图标独立一个img，这样在任何地方都可以调用。但我上面提到了，为了性能着想，我们需要把图标写入一张图里。
以前我们看到上面第一种状态的时候，第一反应就是多个li，然后给li设置背景，padding-left加左侧空隙。显然如果这样做的话后面两种情况就无法兼顾了。

我的做法是把每个ico放入一个容器，一个空白透明的png-8，利用css sprites设置这个png-8的背景。这样的做法好处是图标依然具有img的特性，可inline入文章中，可独立，而维护的时候可以把图标看成一个img来处理，不同的是src是一样的，class不同而已。当然也可以建立一个span，设置inline-block来做，这样也可以减少一个gif的请求，不过span用得太多了，我总是怕被继承属性覆盖了，那就糟糕了。

3.公用

这里一些图标里可能是全站的，例如描述性中的已关注、在线这些图标可能会在任何用户列表中，比如一个专题里。

如图，你不会知道可爱的产品会不会什么时候希望把微博发布框放到一个专题里，会不会把分享模块放到哪个应用里，又或者一个专题又和一个应用有关系。而我们需要做的就是把所有这些公用的东西做成一份。例如今后要加一个图标，微博框里的同步加上豆瓣，那么我们只需要修改一份样式表即可。
所以不得不提前面文章中提到的css模块化 http://blog.dmtuan.com/?p=498。

如果我把这些图标放入公用样式global.css中，前期是没有任何问题，但当网站逐步发展，我们发现global.css已经有3000多行了。显然例如一个小型弹窗用到了一个小图标，引用这么大的global.css有点杀鸡用牛刀的感觉。

于是我们思考，必须把一些全站公用的部分独立成一个个小的css模块，第一个独立出来的就是图标模块。我们是这样做的，应用类图标归一类。这里还是有一点要说说，因为微博框我们做成了一个模块，而里面的图标也是一个模块，这就是模块套模块的情况了，我在http://blog.dmtuan.com/?p=518中纠结的问题，到底是用@imports桥接还是分开link，当然最好是发布合并工具能做到合并@imports样式并剔除相同的样式，我们现在还没有这样的工具，欢迎推荐。

4.分类图标

前段时间我接到这么个需求：

如图，这里图标会存在任何地方。按照之前说法，把icon独立放入一个容器，采用css sprites来控制图标是没有任何问题的。
但这里有个问题，那就是每个图标都有两种状态，一灰一粉，这也是可爱的产品提出的要求。这里最好的做法是加个同级样式来高亮它，例如灰色的鞋子图标是 class=”ico-shoes”那么高亮就是class=”ico-shoes ico-light”。

但这里出现问题了：
假设图标是左右摆放，高亮在左侧，灰色在右侧。
那么css这样写：
.ico-shoes,.ico-bag…{background-image:url(ico.png);}
.ico-shoes{background-position:-40px 0;}
.ico-bag{background-position:-40px -40px;}
以上我定义了灰色的图标
那么高亮如何定义呢
.ico-light{background-position:0 继承};
是的，我这里用了继承的中文，因为我需要Y轴的数值是不改变保持原有数值而只覆盖X轴即可，而background-position根本不存在这个属性，而且又没有background-position-x这样的写法。
如果按照这样的思路。
那又要加上：
.ico-shoe-light{background-position:0 0;}
.ico-bag-light{background-position:0 -40px;}
如此相当于给高亮又独立定义了一行样式，这在今后维护中样式会成倍增长，但如果加上鼠标:hover效果呢，又是一倍代码量了。

原理是利用外容器的overflow:hidden+relative，内容器的absolute+left/top来实现定位。这样解决以上问题就很easy了。









span.class-ico{width:22px; height:22px; overflow:hidden; position:relative; display:inline-block; *display:inline; *zoom:1; overflow:hidden; vertical-align:middle;}

span.class-ico img{position:absolute;}

span.ico-shoes img{left:-40px; top:0;}

span.ico-bag img{left:-40px; top:-40px;}

/*更多ico样式*/

span.ico-light img{left:0;}/*这里单独重置left即可，不会修改top的值*/

a:hover .class-ico img{left:0;}/*hover也没有任何问题*/

以上我利用了img-sprites来实现了图标维护只需要加一行样式即可，hover和light也只需一行即可。这样我可以把这块做成一个分类模块了，不影响其他样式了。

TAG：iconcssimg-sprites

fengsan

海内存知己,天涯若比邻
觉得文章不错，微信扫描分享好友

热门文章

© 2011 - 2020  钛锋网  TMTForum.com  沪ICP备15013635号