Yuguo.us

跟肤那些事儿

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

front-end

跟肤那些事儿

Posted by 余果 on .

Qzone是跟肤的,用户选择不同的皮肤的时候会看到不同的颜色。每一套“颜色”包括几种背景色、几种线条色、几种文字色、几种渐变色等。

互联网上还在跟肤的完整已经非常少了,但在Qzone这是一个很大的赢利点,因为跟肤配合各种付费皮肤和付费帽子、付费名片等各种自定义,极大地提高了Qzone用户中付费的比例。而Qzone用户数量又是惊人的 之前朋友网的前身校友网也是跟肤的,后来去掉了。所以也许未来不跟肤会是趋势,但无论如何现在的架构需要我们跟肤,那么我略微整理一下相关的知识,也许对于其他人都没帮助,但可以帮助大家看清我们做这些事的大背景,也促使大家有所思考,如何在某些“限制”下完成设计。

方法

关于皮肤文件的实现方法有很多种:

1.调用某个颜色.css,在颜色.css中专门写颜色,而这个颜色.css跟日常工作是分开的。工程师只需要使用class定义某个文字是采用“强色”还是“淡色”就好了,而在 不同的颜色.css中会定义各种强色比如红色或者蓝色。Qzone采用的这种方法。好处是简单、可以很好的利用缓存等等,坏处是多一个http请求。

2.利用LESS之类的工具,在CSS中写变量,然后服务器端生成一个icenter.css。好处是少个请求,坏处是多了人力成本,不能很好地利用缓存,变更成本略大等。

生成&维护

设计师按规范设计出一套皮肤的设计稿之后输出png,png图的特定地方需要有特定的色块。我们给设计师提供了一个canvas工具,能抓取到这些色值,然后把色值填充到一个CSV文件中,然后利用cssgaga的皮肤1toN来生成对应的颜色.css。

如果某套配色需要修改,只要改对应的设计稿png,然后再走一遍流程:png->csv->cssgaga->颜色.css,再发布颜色.css即可。

规范

十几个工程师还有同样多的设计师都要统一利用class来定义强色和弱色,这个需要很好的培训和文档。培训的话腾讯使用导师制度,一般都能很快学习如何使用这种class,比如c_tx,c_tx2,c_tx3,c_bg,bg2等等等等……文档则是日常查阅用法的地方。文档规定了各种色值的用法,并且提供了工具面板直接在当前页切换配色,同时指明了规范责任人,如果在工作中与任何人有冲突了,就拉责任人进来沟通。 我们能够使用的颜色性的class包括几大类:

1.文字颜色类:全部用c_开头

2.背景颜色类:bg/bg2/bg3等等……

3.边框色,bor/bor2等等,也可以使用某种背景色作为边框色(模拟三角的时候有用)

4.表单色,包括input或者button之类的,但是很尴尬的是select不能做自定义颜色。

5.惊叹色,强烈的橙色,这个颜色不用变,所以直接写在reset之类的全局文件中就好。

技巧

在长久的与跟肤的斗争过程中我总结了一些经验:

1.模拟三角

用border来模拟三角,kaiye做了一个三角生成工具

如果考虑跟肤的话,那么边框色值不能直接写在代码中,要使用class标签。浏览器渲染边框的时候,如果定义了边框色border-color,那么优先使用边框色,如果没有定义,那么使用文本色,如果没有定义文本色,那么使用继承下来的文本色。所以我们会有c_bg这样的接口。

多个三角以及三角和其他图形,圆角图像等组合的时候又能形成新的形状,这是很有意思的。大多数时候这 又是乏味的,所以我们有跟肤的三角组件,在需要的页面中可以直接引入样式,html中只用修改颜色就好了。

2.RGBA

在跟肤页面中,工程师的样式比如icenter.css里是不应该有颜色值的定义的,但是有例外,RGBA就是一种。

因为RGBA包含了透明度,所以叠加在我们的背景色上,实际上也是跟肤的效果。

我们在某些地方使用过自定义的webkit滚动条(渐进增强,IE不用拥有这个特性,但是仍然具有可用性):

::-webkit-scrollbar-thumb:rgba(256, 256, 256, 0.15)

事实证明效果非常好。

3.半透明图

除了RGBA以外还有一个类似的方法就是带alpha透明度的png(8或者32都可以),叠加在我们的背景色上也有跟肤的效果。IE6用一个下划线hack干掉背景,不要用滤镜。

更多技巧大家从Qzone的代码中去发掘吧~

user

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。