我曾经用过twitter，不过很快便注销了账号。Google在推出Buzz之初，用捆绑的方式强推到我的Gmail, Greader里，让我很是反感，直到最近Google的Buzz团队们着手逐步解决Buzz带来的各种隐私问题，我才开始试用这个号称next-gen twitter的玩意。几天下来，发现对Google Buzz爱不释手，刮目相看啊。尤其是用HTML5, CSS3加上Geolocation驱动的Buzz移动版，让我在PC Desktop上都忍不了要试用移动版来玩Buzz。特别是它的Geo Buzz功能，可以看到离自己最近的Buzzrs的实时Buzz信息，相当的酷!

软文就此打住，我这篇文章的内容是解剖Google Buzz移动版的CSS应用。由于时间有限，加上Google复杂的页面代码压缩以及毫无规律的DOM class/id命名，很多东西难免有疏忽和纰漏，望斧正。

注: 以下测试及截图均来自桌面版的Mozilla Firefox和Google Chrome。（对Mozilla Firefox下的显示稍微做了点CSS Hack [via Stylish]）

首先来看Google Buzz移动版的完整截图，很标准的iPhone UI设计。

Buzz Preview

使用data URI scheme减少HTTP Request

众所周知，过多的HTTP Request对页面的载入速度有极大的负面作用。为了尽量减少CSS中图片载入的HTTP Request，出现了CSS Sprites技术。而data URI scheme则直接将文件用base64编码方式译为字符串，直接以inline形式嵌入到HTML/CSS文本中，计算机在获取HTML/CSS后，将base64过的字符串进行解码，生成原文件，而不是以传统的地址获取方式再发送一次HTTP Request来得到原始文件，相应的就减少了一次HTTP Request。不过这样做的坏处是，base64转译过的一大串字符串不利于HTML/CSS维护，代码的可读性也大大降低。

Google Buzz Mobile的UI图片几乎全部使用了data URI scheme技术，整个页面的HTTP Request大大减少。至于代码的维护…如同那些杂乱无章的class/id一样，只有Google的工程师才看得懂的天书。

该不该全面使用data URI scheme ?

为了减少访问数据下载量，我对blog启用了gzip压缩，包括javascript，css甚至@font-face里用到的字体也可以压缩（via Gzip your @font-face files）。启用gzip的压缩结果是客观的，一个Graublau Web.otf字体从41.464k压缩到了31.528k，压缩率为76.04%。然而用上data URI scheme，即使对CSS开启gzip压缩，由于经过base64转译后字符串本身大大增加了CSS文件的体积，压缩效果大大折扣。

再者，由于@font-face里用到的字体不会被修改，还可以启用cache来阻止下次访问重新下载，而HTML/CSS则是经常会被修改的，开启了cache也会经常要重新下载更新。

所以，什么时候使用data URI scheme呢？像jpg，png这些图片本身的压缩率就几乎到极限了，即使再gzip也是事倍功半。Data URI scheme配合CSS Sprites技术来定义CSS里简单的背景图片是个不错的选择，至于那些体积较大，图形比较复杂的图片（例如摄影照片）还是直接定义backgroud:url(…/filename.jpg)吧。

P.S: 分享下我使用的gzip及缓存优化代码，把以下代码添加到.htaccess文件里。

<ifmodule mod_deflate.c>
Addtype font/opentype .otf
Addtype font/truetype .ttf
Addtype text/javascript .js
AddOutputFilterByType DEFLATE text/css font/opentype font/truetype text/javascript application/javascript application/x-javascript
</ifmodule>

ExpiresActive On
ExpiresByType font/opentype "access plus 2 years"
ExpiresByType font/truetype "access plus 2 years"
ExpiresByType text/css "modification plus 1 month"
ExpiresByType text/javascript "modification plus 1 month"

使用border-image定义背景图片

为了适应各类屏幕尺寸的掌上设备，Google Buzz里的UI控件没有简单地使用固定尺寸的图片来定义背景，也没有通过层层div来定义每个边角。因为CSS3已经带来了border-image属性！

如图所示，Google Buzz Mobile顶端的一排按钮以及下面的输入栏（蓝色框显示）仅仅用了三张简单的小图片（红色框显示）即实现了整个UI设计。

Buzz Border Image

以图片中Following按钮为例，简要说下border-image的使用。

Buzz Following

border-image实际上是将一张图片切割为9宫格，用以分别显示一个元素的topleft, top, topright, right, bottomright, bottom, bottomleft, left和center九个区域，其中top, right, bottom, left以及center区域在无法填满元素时会默认进行图片水平/垂直重复。例如这个Following按钮的CSS代码为:

.FtX31c {
    -webkit-border-image: url(data:image/png;base64,...) 4 1 5 4 stretch stretch;
    border-width: 4px 1px 5px 4px;
    ...
}

除了前面说到的应用了data URI scheme，-webkit-border-image中的4 1 5 4分别代表了从上，右，下，左顺时针方向切割图片的像素值，其中top切块的像素值为4px，right切块为1px，bottom切块为5px，left切块为4px。这与下面的border-width是相对应的。而stretch则是自动水平/垂直拉伸以填满元素区域，但不进行图片重复。

另外，目前Gecko, Presto, Webkit三大引擎都支持border-image了。

利用text-overflow隐藏文字

Text-overflow是CSS3中新加入的一个属性，用来控制溢出盒模型的文字显示方式。在Google Buzz Mobile中Google使用了text-overflow: ellipsis属性来控制文字的显示方式，溢出盒模型的文字将会自动以…代替显示。

如下图，支持text-overflow: ellipsis属性的溢出文字自动压缩为…，而在不支持text-overflow: ellipsis的Firefox下测试，单词只显示了一半。

Buzz Text-overflow

End

如果你跟我一样，用Mozilla Firefox访问Google Buzz Mobile的话，可以使用我修改过的CSS代码，添加到Stylish插件里。

点击下载: Google Buzz Userstyles

4 Reponses So Far ↓

  1. 呵呵，Buzz被我关了。因为邮件联系人并不都是朋友，还是少点Buzz为好。
    不过，话又说回来，你的博客主题真是超赞！有没有考虑发布出来？

  2. 暂时没有发布模板的打算，因为这个主题本来就很激进（HTML5 & CSS3），而且很多代码设计都是出于自己blog的需要而编写的。你如果喜欢的话，可以自行rip我的模板。

  3. 千跳万跳，本来是要在42区逛的，结果一路顺藤摸瓜来到这里，内容很受用，不知能不能转载这篇到我的博客去呀？

  4. Feel free to pingback :D

Leave a Reply ↓