我曾经用过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. yhlfh:

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

  2. punkid:

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

  3. ETY001:

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

  4. punkid:

    Feel free to pingback :D

Leave a Reply ↓