我曾经用过 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 设计。
使用 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 设计。
以图片中 Following 按钮为例，简要说下 border-image 的使用。
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 下测试，单词只显示了一半。
End
如果你跟我一样，用 Mozilla Firefox 访问 Google Buzz Mobile 的话，可以使用我修改过的 CSS 代码，添加到 Stylish 插件里。
点击下载: Google Buzz Userstyles