关于界面的价值观与方法论
567891011121314

土豆映像节 2009

19April2009

4月18日,第二届土豆映像节。

和国内其他电影节、颁奖礼不同,没有红地毯,没有大腕明星(据说是我们CEO Gary要求的),没有耗资数亿的大片,只有一帮用DV、摄像头或是手机拍摄“山寨”短片的播客。

我和很多同事被征召去当劳力。原本不是很感兴趣,以为不过就是一个小公司自娱自乐的山寨营销活动吧。但晚上还是留下来,设法找了个位置坐下观看颁奖礼。

结果是超出我想象的惊艳!我和同事都禁不住感叹,原来土豆网有那么多精彩的节目!

最受欢迎播客,提名的有“叫兽”、Love乔林、麒麟博士、青春补习社(小沈老师那个)等。当大屏幕上念到他们的名字时,全场雷动。最终获奖者“叫兽”上台致辞说,正是因为土豆网,才让他可以和这么多专业人士站在同一个舞台上,得到如此多的掌声。而他特别感谢了他的观众,没有他们“我才懒得拍这么多集呢!”

颁奖典礼中,播放了一段视频。这是一个播客在过去四年来,不停的在土豆上记录着他生活的一点一滴,2006年、2007年、2008年……最后一段视频,是他对着DV镜头说:“今天是2009年4月18日,我在上海,土豆映像节。”镜头转到他身后,正是我们的现场的舞台。然后,他举着DV,居然出现在舞台上!他告诉我们,他是个音乐人,做了整整15年的音乐,而今天终于有机会可以在这个舞台上表演了。

土豆的舞台很小也很大:没有光鲜亮丽的明星,却有无人不晓的超级偶像;没有波涛汹涌的票房,却有数百万热情追捧的粉丝;没有制造精良的视频特效,却有大银幕小荧屏都望尘莫及的创意和精彩的演绎。就像视频“爆强的列车推销员”里那位推销员一样,虽然只是在一个小小车厢里卖一个小玩具,却有着绝对让人敬佩和赞叹的表演功力。

最后说说我的同事们吧。

坐我们前排的一个观众回头问,你们是土豆网的工作人员吧?你们都是做什么工作的?Dex说我们是做页面的,我补充说也就是你能“看到的所有的一切”都是我们用手写出来的。呵呵,自以为这个解释挺NB~

另一个事情是,而在大屏幕上看到一个熟知的视频得到提名时,我不由得惊呼,播放页改版时这个视频我看了100遍!

最后一个好玩的事情是,下午推介会时,Dex偷偷跑去拿供来宾取用的小饼干,我说他是在“跨域取cookie”。呵呵。

所以呢,在土豆网工作,确实是个挺好玩的事情。

CSS Sprite的新方法

14April2009

最正式的方法就是给一个透明图片加样式:

<img src="blank.gif" width="16" height="16" class="sprite" />

但是这样做有一些缺点:
1. 会多一个图片的请求
2. 众所周知的,内联行里的图片和中文字的底端无法对齐。这个问题的解决办法也有,就是用“vertical-align: -2px;” 强行把图片拉下来一截。

第二种方法:

a {
    display: block;
    text-indent: -3000px;
    overflow: hidden;
    width: 20px;
    height: 20px;
    background: url(...);
}

这个方法很不错,唯一的缺点就是它只能用于样式被设为块级的元素。

第三种方法是我自己想出来的,比较山寨,但是挺实用:

<span class="sprite">&nbsp;&nbsp;</span>
.sprite {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    letter-spacing: -14px;
    padding-left: 50px;
    background: url(...);
}

其中padding-left用来调节宽度。

这个方法的好处在于:
1. 没有多余的空白图片
2. 支持inline样式
3. 良好的垂直对齐

但这个山寨方法有很多局限性:
1. 高度的调节很麻烦。不同的浏览器对字体和行高的解析不一致。
2. 可能在不同操作系统中宽度和高度会不一致。(我还没全面测试)

不管怎么样,这至少是一个在某些固定环境中可以尝试的方法。

把CSS全部归零

7March2009

我曾经佩服过google ads,它可以再任何网页上出现,而它的样式却不会被寄主网页的CSS给破坏。后来发现它其实是用的iframe,呵呵。

不过倒是引发了我一个思考:如何保证一个区域里的样式不会被外部样式“入侵”。要做到这点其实说难不难,说容易也不太容易。关键是两点:

1. 将该区域里的所有样式全部设为最初的默认值;
2. 保证上面的样式的优先级为最高。

所以呢,下面是一个尚未完善的例子:

#clearAllStyle *,
#clearAllStyle a:hover,
#clearAllStyle a:link,
#clearAllStyle a:visited,
#clearAllStyle a:active  {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: auto;
    
    float: none;
    clear: none;
    display: block;
    
    margin: auto;
    padding: 0;
    border-width: medium;
    border-color: inherit;
    border-style: none;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
    
    color: #000;
    background-attachment: scroll;
    background-color: transparent;
    background-image: none;
    background-position: 0% 0%;
    background-repeat: repeat;
    
    font-size: 12px;
    font-family: sans-serif;
    line-height: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    text-indent: 0;
    text-transform: none;
    white-space: normal;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: baseline;
    overflow: visible;
    visibility: visible;
}
#clearAllStyle span,
#clearAllStyle em,
#clearAllStyle strong {
    display:inline;
}
#clearAllStyle a
#clearAllStyle a:hover,
#clearAllStyle a:link,
#clearAllStyle a:visited,
#clearAllStyle a:active {
    display:inline;
    text-decoration:underline;
}

这个代码还处于待完善的阶段。我没有对其进行全面的测试,不过基本上能够保证绝大多数的情况了。

注意几点:
1. 我这里考虑的是将所有的CSS属性设为默认值,而并不是将所有的HTML标签设为它们默认的样式。因为其实从实践的角度,每个浏览器里HTML标签的默认样式都是不一致,不可能也没有必要将其回复到默认样式。保证样式不被外部样式入侵,这才是我们的目的。
2. 所谓的“属性的默认值”,是指在没有明确定义某个属性时,这个属性默认呈现出来的那个值。上面的值都是根据《CSS权威指南》里得到的,不过并不是所有的值都有默认值,没有的我就自己加了一个自己想要的那个值。
3. 有一个比较麻烦的问题:某些属性无法被子元素继承,比如text-align。倘若接下来有如下定义:

#clearAllStyle .copyright {
    text-align: center;
}

对于.copyright的子元素,就会仍然靠左。解决的办法是一个很傻的写法:

#clearAllStyle .copyright,
#clearAllStyle .copyright * {
    text-align: center;
}

看起来不好看,但是应该没什么大问题。
4. a标签在IE6下,其伪类的定义会被认为是最高优先级,所以需要显式声明。(感谢OoSleePinG指出)
5. 其他还有些元素需要被归为display: inline,比如del。但是,如果我其实不用它,就没必要写了。

如果大家有什么看法,欢迎进一步讨论。