Mockee Kaavie

Douban Pulse 1.2.1 发布，增加电台功能

shimano — Sat, 29 May 2010 17:40:39 GMT

可能还有些人不知道 1.2 已经发布了，不要紧，今天发布的 1.2.1 是对小范围公测的 1.2 的一次改进，增强了稳定性，用起来更顺畅。几天来收到不少参与测试的热心豆友的反馈，在此要特别感谢你们，也希望你们能继续支持 Douban Pulse:)

还没有在日志里提到过 1.2，之所以跳了一个大版本，是因为加入了豆瓣电台功能。在此之前，Chrome Extensions 中已经有了不少“豆瓣电台”扩展，但感觉都比较简陋，而且也都w无法对歌曲进行操作，可用性比较差。Douban Pulse 1.2 中所包含的是具备完整功能的豆瓣电台，包括可以像在主站一样调教电台，除此之外还特别增加了播放历史列表，方便查看和二次调教。

安装地址：https://chrome.google.com/extensions/detail/dofcilnakjpenampigbefbbeekanbfgl

之前曾考虑过将电台独立出来，一是方便推广，二来在小组中 tgm 也提到了关于社区用户和电台用户相对独立的观点；但反复斟酌后还是决定与 Pulse 合体，理由嘛，还是自己想做个 all in one 的豆瓣 Chrome 扩展，毕竟是个兴趣驱动的小玩意儿，自己做着高兴，大家用着方便就齐了。ps, 豆邮功能已加入 todo list:)

照例上图给没见过的童鞋。打开列表收起导航栏时长这个样：

mini 状态长这个样：

1.2 的主要代码是在刚刚结束的年假中完成的，期间记了些简单的日记：

> Douban Pulse with Radio Day 1
> Douban Pulse with Radio Day 2
> Douban Pulse with Radio Day 3
> Douban Pulse with Radio Day 4
> Douban Pulse with Radio Day 5
> Douban Pulse with Radio Day 6

欢迎大家试用，有问题随时反馈，谢谢!

发布时间：2010-05-30 01:40:39 | 阅读：24641 | 评论：2

Douban Radio on iPad now?

shimano — Thu, 08 Apr 2010 16:51:10 GMT

去年的时候曾经 yy 过 html5 的豆瓣电台，也在公司内部用真实数据小范围实践过，无奈浏览器支持度有限(当时只有 safari 4.0.1 以上版本可以完全支持)，在 iPhone 上体验很糟糕，作罢；

今年 iPad 的出现，终于有机会让 yy 成真:) 区别于 iPhone，iPad 中的 safari 可以使网页中以 html5 audio 定义的音乐在不必单独启动 native player 的情况下自动播放(placeholder 终于匿掉了)，而且音乐不会因为切换网页而停止；相关内容可以查看 Safari Reference Library 中有关 Audio and Video HTML 的一段。这样的话就可以用最简单的方式(html5 web app)在 iPad 上实现边上网边听豆瓣电台了。在电台的 native app 没上架前，或许可以拿 html5 版尝尝鲜，提前体验下“多任务”，呵呵

这两天已经开始着手做了，至于是不是可以最后公开使用可能还需要讨论，先上个昨儿下午做的界面截图，静态页面可以用 safari 或 chrome 在这里看到。因为不属于公司计划内的任务，优先级比较低，所以暂时得不到 UI 和交互的支持，但我又实在急着玩儿，就自己山寨了一把，大体是根据目前 iPhone 版的结构重新做的图。算是第一版吧，之后肯定会有不小改动，先自己马克一下。

ps, iPad 中的 safari 对于 webkit animation 以及通用的 css3 属性支持得都很好，为增加一些诸如图片翻转、位移等特效降低了不小工作量，赞

用 html5 实现电台还有个好处，就是可以方便用户自己换肤，写 GM 脚本扩展功能(比如歌词同步)，最大限度地实现电台个性化。

发布时间：2010-04-09 00:51:10 | 阅读：6184 | 评论：0

豆瓣 Chrome 扩展 ── Douban Pulse 1.0 发布

shimano — Thu, 04 Mar 2010 19:44:36 GMT

这是我的第一个 Chrome 扩展，利用豆瓣 API 完成
感觉和做 iPhone 的 web app 类似，比开发 firefox 扩展成本低，一些心得稍后分享

1.0.1 更新内容：

* 解决了 dev 版 Chrome 无法授权认证的问题；
* 解决了用户在授权后无法正常访问豆瓣第三方应用管理页的问题；
* API 方面修复了推荐话题链接为空的 bug（by py@douban）

在线安装：
https://chrome.google.com/extensions/detail/dofcilnakjpenampigbefbbeekanbfgl?hl=en-us

默认显示友邻广播时，它长这个样儿
当滚动条到达底端时会自动载入之前的广播，根据不同分类，每个类别的列表会请求不同的条数

发布“我说”时是下面介个样儿

由于 API 缺少友邻“我说”等的接口，我采取的是先获取全部广播再过滤的方式请求列表，所以你可能会看到，"所有广播"之外的列表项是增量载入的

新消息提醒

点击后，未读消息会用绿色边框线标示出来方便确认
保存最近一条未读信息位置，下次打开时自动滚屏还没有做，打算放到下一版

这个扩展最大的便利之处我认为在于不必每次都返回豆瓣新版社区刷 timeline，而且方便查确认未读消息；与网页相比不足之处应该是单个条目展示信息少

日后会有更多的改进，欢迎大家试用，有问题随时留言，或者到豆瓣插件小组：
http://www.douban.com/group/topic/10150470/

@mockee 发布时间：2010-03-05 03:44:36 | 阅读：3471 | 评论：3

备忘下 jQuery 1.4 中重写以及新增的方法与事件

shimano — Tue, 16 Feb 2010 18:31:48 GMT

留了一半在草稿箱都快忘了，趁闲整理出来以便参考（按自己理解简单翻译记录）
原文：http://jquery14.com/day-01/jquery-14, http://jquery14.com/day-12

1.4 中重写了常用方法以提性能

Setter Functions

可以给下面所有的 Setter Functions 传一个函数：
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(),.before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), .toggleClass()
这个函数的返回值将附在相应的 html attribute 上；

对于以下方法：
.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), .toggleClass()
当前值将作为第二个参数传递给该函数；

Ajax

jQuery.param 方法加入了嵌套参数的序列化支持；
(Commit 1, Commit 2)

通过 content-type 自动识别 JSON, js 的数据类型；
(jQuery.ajax, Commit 1, Commit 2)

增加了 Etag 支持；
(jQuery.ajax(), Commit)

使用原生方法 JSON.parse 来解析 json；
(jQuery.ajax(), Commit 1, Commit 2, Commit 3)

$.serialize() 可序列化 HTML5 的表单元素；
(jQuery.param(), Commit)

$.ajax() 增加 context 设置，自定义回调函数中的 this；
(jQuery.ajax(), Commit)

所有 ajax 成功请求的回调函数都会有包含原始 XHR 对象的第三个参数；
(jQuery.ajax(), Commit)

显式设置 content-type；
(jQuery.ajax(), Commit)

通过 jsonpCallback 选项指定 JSONP 的回调函数名；
(jQuery.ajax(), Commit)

默认禁止启动前的跨域请求
(Commit)

jQuery.ajax() 使用 onreadystatechange 替换了计时器，降低 ajax 请求使用的资源；
(Commit)

Attributes

优化了 .css() 和 .attr() 的性能；

text 与 CDATA 节点也支持 .text() 方法了；
(.text(), Commit)

Core

使用 jQuery() 创建函数时可以同时增加属性和事件；
(jQuery(), Commit)

.eq(), .get() 支持负数参数，方便从后向前选取对象；
(.eq(), .get(), Commit)

新增 .first() 和 .last() 方法，等效于之前的 :first 和 :last，使用更方便；
(.first(), .last(), Commit)

新增 .toArray() 方法，区别于 .get() 的是不支持参数；
(.toArray(),

Commit)

jQuery() 返回一个空集；
(jQuery(), Commit)

使用单个标签名时 $('TAG')，jquery 将会使用更快捷的路径 getElementsByTagName；
(Element

Selector, Commit)

jQuery('<div>'), jQuery('<div/>'), jQuery('<div></div>') 使用了同一个代码路径 document.createElement
(jQuery(), Commit)

CSS

.css() 方法性能翻倍

.addClass(), .removeClass(), .hasClass() 方法的性能是以前的3倍

.toggleClass() 可以切换多个 css class；
(.toggleClass(), Commit)

.data() 返回对象, .data(Object) 设置对象
(Commit 1, Commit 2, Commit 3)

除非需要，否则不会创建数据缓存；
(Commit 1, Commit 2, Commit 3)

特效 Effects

在单个 .animate() 中设置为多个属性设定 easing 函数；
(Per-property

Easing, Commit)

事件 Events

新增 jQuery.proxy() 方法以获取相同作用域的函数，解决了重新定义 this 的问题；
(jQuery.proxy(), Commit 1, Commit 2)

.bind() 支持多事件绑定；
(.bind())

规范了 change 和 submit 事件；
(Change, Submit)

新增 focusin 和 focusout 事件，支持冒泡；
(.focusin(),

.focusout(), Commit)

.live() 升级，支持所有事件，且接受数据对象作为参数；
(.live())

live/die 支持 context 了；
(Commit)

确定 ready 事件至少要包含 body 元素，否则会对 body 进行轮询；
(Commit)

在不需要手动处理内存溢出的非 IE 浏览器中，unload 的速度提高了；
(Commit)

DOM 操作

.append(), .prepend(), .before(), .after() 的性能提高了

.html() 性能提升到将近之前的3倍

.remove() 和 .empty() 则达到了之前的4倍

新增 .detach() 方法，用来移除元素，但不删除事件；
(.detach(), Commit)

新增 .unwrap() 方法，用来删除匹配的父级元素，与 .wrap() 作用相反；
(.unwrap(), commit)

domManip 方法中设置了缓存，提高使用字符串进行 DOM 操作的页面性能；
(commit)

before, after, replaceWith 可以操作还未加入 DOM 的节点；
(commit)

.clone(true) 会复制关联数据(包括所有事件)；
(clone, commit)

偏移 Offset

可以利用 .offset() 设置元素的 offset 了；
(.offset(), commit)

队列 Queueing

新增 .delay() 方法，用于延迟队列用的函数执行；
(.delay(), commit)

.clearQueue() 用于移除队列中还没有执行的所有函数；
(.clearQueue(), commit)

选择符 Selectors

所有以 id 开头的选择符效率提高，且高于其他选择符；
(commit)

遍历 Traversing

.index() 方法重写，可以获得一个元素在 jquery 集合中的索引；
(.index(), commit)

新增 .has() 方法，等效于 :has，使用更灵活；
(has, commit)

新增 .nextUntil(), .prevUntil(), .parentsUntil() 方法，类似于 .nextAll(), .prevAll(), .parents()，区别在于当遇到与选择符相同的元素时会终止选取；
(.nextUntil(), .prevUntil(), .parentsUntil(), commit)

可以为 .add() 方法指定 context 了，可用于在 Ajax 请求中返回的新元素；
(.add(), commit)

可以在 .cloasest() 的第二个参数中指定 context，提高执行速度；
(.closest(),
commit)

实用工具 Utilities

jQuery.isEmptyObject() 判断对象是否为空；
(jQuery.isEmptyObject(), commit)

jQuery.isPlainObject() 判断对象是否以字面量创建；
(jQuery.isPlainObject(), commit)

jQuery.contains() 如果两个参数都是 DOM 节点，判断二者是否存在嵌套；
(jQuery.contains(), commit)

jQuery.noop() 返回一个空函数；
(jQuery.noop(), commit)

jQuery.unique() 返回结果中的元素是按照它们在页面中的顺序进行排序的；
(jQuery.unique())

1.4.1 更新

.live('focus') 和 .live('blur') 可以用了，映射到 .live('focusin') and .live('focusout')；
(Documentation, Ticket)

.live('hover') 可以用了，映射到 .live('mouseenter mouseleave)；
(Documentation, Ticket)

.live() 支持多事件绑定；
(Documentation, Ticket)

用 .die() 来移除所有绑定的 live 事件；
(Documentation, Ticket)

.height(function) 和 .width(function) 可以用来计算匹配的第一个元素的相关值；
(Height, Width, Ticket)

jQuery.parseJSON 将 JSON 解析成 JS 对象；
(jQuery.parseJSON, Ticket)

jQuery.error 为插件开发者提供便利，可以覆盖此方法以提供更多更好的错误信息显示；
(jQuery.error, Ticket)
发布时间：2010-02-17 02:31:48 | 阅读：2509 | 评论：0

2009.10.4

shimano — Sun, 04 Oct 2009 12:52:25 GMT

发布时间：2009-10-04 20:52:25 | 阅读：1691 | 评论：4

Yahoo! meme 前端初窥

shimano — Sun, 13 Sep 2009 08:04:24 GMT

发现咪咪又发邀请了。从十天前的14个到隔夜后缩减到的3个再到前两天新增的4个，紧张过度了吧，能折腾... 在经历中文用户刷屏后，popular 恢复了正常，不过依然是满眼猎奇大图，也是，如此清新销魂的页面，不使劲儿往上招呼图片视频才是大不敬。

说正题，来简单关注下雅虎 meme 的前端：

先说说设计

meme 给我的第一印象非常好，甚至是惊喜，也许是受太多 twitter clone（包括围脖）雷同界面的影响一开始对其期望值不高形成的反差。后来发现，其实 mac 下 HelveticaNeue-Light 字体及平滑的文字效果也是功不可没。顺便提一句，Georgia italic 也是俺的大爱:)

meme 在区域的设计上使用了圆角，包括信息输入、展示区以及 form 中的各式输入框和按钮，对于信息中的图片也采用了双边框的设计，内深(#e2e2e2)外浅(#fcfcfc)，有淡淡的立体效果（firefox 中可以使用 -moz-border-bottom 快速完成）。说到圆角，其实只有 gecko 和 webkit 核心的浏览器才能看到，对于 IE 和 Opera 则完全无视了，当然 Camino 下的圆角效果还是一如既往的差，顽固地保持着 firefox2 的残迹，这些下面都会专门提到。皮肤方面，我还是忠于默认:)

上图是第一个按钮用到的透明图片，边缘溶解，最大限度地分离了前景和背景、减少图片用色（让 IE6 支持此透明 gif）和体积，但最后保存的格式却是 png，不太理解；从这副图片的名字也许可以看出一些原因： posts.gif.png，尝试了去掉 .png，没问题，原来本来就是张 gif，汗~ (注: 来自 chumsdock: “关于gif/png的问题，IE6 是支持只有纯透明的 8 位 png 的，用法跟 gif 一样，但是 png 比 gif 尺寸更小。”)

继续瞎说交互

这方面我一直都很外行，没数据的情况下基本是靠主观理解 *…*

先看上方的黄色提示，咪咪会识别新信息，但不会强行显示出来，这样的设计很适合中文用户，哈哈，在刚注册时 popular 满屏春色，而且源源不绝，现在虽然少了，但偶尔也能惊喜一下，如果这时被自动推出来，身后有人观摩就太尴尬了 - -!

接着看评论输入框，这是在 repost 后显示的，提示和样式都清晰明了；

最后两条灰色信息是我又爱又恨的地方，爱在于简明地显示了信息来源（你知道我在说哪里），恨在于字太小，如果有图和视频就更显得隐蔽，打开页面一眼望去不好区分哪些信息是首发哪些是 repost（当然现在我知道了按长度区分）。或许雅虎就是有意而为之，认为让用户第一时间获取信息本身才是最好的体验？纯属瞎猜...

说件土事儿，第一次来 meme 时俺竟然没找到在哪里输入信息，虽然 dashboard 页上方深灰色按钮赫然，但一时没意识到那里就是可以展开的输入区域，还一个劲儿的找大文本框。我想这个应该不属于交互设计的问题，是被 twitter 毒害太深，习惯成自然，meme 这个大框在之后用起来就很顺手了。

下面说说前端代码

meme 的前端代码很随性。先看 GBS 最近一次更新：

虽然 IE6~8 在 XP 下依然被列为 A-grade，但 meme 似乎已经对 IE6 失去了耐心

IE6(左)高度有偏差，FF3.5(右)为正常

左侧的黄色区域是一个本不该显示的空层(divMessage)，用来防止相应的动态信息，但里面有个  ，所以对于 IE6 来说它并不为空，而且还要为其应用继承的文字样式，从而出现了最小高度的问题。黄色区域下方的蓝线是经典的 IE6 图片 3px 问题。

meme logo 是用 <a> 的背景图实现的，配合 text-indent: -9999px，照顾了爬虫又方便利用 css 控制鼠标悬停切换背景。IE6 用了比较屎的滤镜来解决不支持透明 png 的问题，这种方法的后遗症是无法通过控制背景图片的位置来实现悬停后 logo 外发光的效果，所以在 IE6 下鼠标悬停左上方 logo 是没有任何反应的：

_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://l.yimg.com/cc/img/en_PH/1252444248/logo.png', sizingMethod='crop');

IE6, 7 无法将使用负 margin 的 div 背景图显示在其外层容器区域(#nav)之外，所以利用星标(*)为其做了 hack，这也是上图中 IE6 的 logo 位置会与标准浏览器下不同的原因（IE7 也是如此）：

margin-left: -6px; *margin-left: 0;

除了 logo，meme 全站使用透明 png 的地方、可以产生经典 bug 的地方，在 IE6 下多多少少都还会有不尽如人意的地方，在此略去。可以说，meme 基本放弃了在外观上 hack IE6。

除了 IE6，meme 在 Opera 和 Camino 下的表现也不尽如人意：

FF3.5(上)为正常效果，Opera10(下)有明显错位(Camino 有同样问题)

代码中可以看到，头像为左浮动，用户名(<h1>)和简介(<p>)均为块级显示，而在头像与用户名、简介的水平方向均有相邻的 margin。在其他浏览器中如果是这种情况，用户名与简介的 margin-left 就会从外层容器(.info)的左边缘开始算起(不含 margin 与 padding 的宽度)，但 Opera 与 Camino 会与头像的 margin-right 相叠加，所以就出现了上图的错位。解决方法很简单，去掉用户名与简介的 margin-left，只使用头像的 margin-right 来区隔即可。

上图(右侧)是在 Camino 下一处比较诡异的地方，灰框本应是 repost 的按钮(如左图)，不知啥原因显示成这样。这个按钮是一个用背景图来控制样式的 input，不知是否和背景图使用了 transparent 有关。

接下来说圆角，上面已经提到，meme 使用了私有属性实现(-moz-border-radius 和 -webkit-border-radius)，没在这方面多较真，很好奇他们的设计稿是啥样的；IE 也就罢了，莫非连 Opera 用户都放弃了？圆角在 firefox 3.0+, safari, chrome 下看都很完美（最赞是 firefox，在 webkit 核心浏览器下，圆角部分比较虚，而同为 gecko 核心的 Camino 表现最差，见下图）

仔细看头像左侧的圆角边框，safari(左) 较虚，firefox(中) 最佳，camino(右) 不但不够平滑，每个方向的圆角样子还不同，这也是在 firefox 2.0 时期同样经历的老问题了，不过 camino 似乎并不在意，最新版 1.6.9 中问题依然存在(userAgent 中也有这样的提示: like Firefox/2.0.0.23)

说 meme 的前端代码随性还有个重要的地方，就是没有忠于 YUI，css 部分只使用了 reset，而 js 库方面除了 YUI 2.5.0 还用到了 jquery 为主的其他库及插件：

jQuery v1.3.2
Sizzle CSS Selector Engine - v0.9.3 (dojo)
jQuery UI 1.7 custom
jQuery Overlabel
jQuery Tooltip plugin 1.3

... 更多可以直接看这里。

meme 的 home 页对于图片展示的处理比较有意思，先看图：

默认情况下，信息列表中只显示裁切后的缩略图，当图片的实际尺寸大于缩略图时，点击图片便会出现类似视频加载的样式(左、中)，载入完毕，loader 消失，大图显示；如果要载入的是个动态 gif(右)，那么一开始就会在缩略图上方叠加个播放按钮，提示用户这里是可以播放的图片。这种加载方式可以带给用户很好的体验，尤其是动态 gif:)

ps, 上图左侧 IE6，注意看图片下端与边框的距离，3px bug 再现...

下面来看下实现的 JS 代码：

goodstuff.ui = function () {
    h = function (t, r) {
        r = r || $(document);
        var s, q = jQuery('<span class="img_loader"></span>');
        r.find(".gifplay").click(function () {
            $(this).parent().children(".image").children("img").click();
        });
        r.find("img.image_expand").click(function (v) {
            imageplace = $(this).parent().parent();
            var u = $(this).parent().parent().children(".img_loader");
            u.show();
            if($(this).hasClass("small")) {
                $(this).addClass("big").removeClass("small")
                .load(function () {
                    u.hide();
                    $(this).parent().parent()
                    .children(".gifplay").hide();
                    $(this).parent().parent().parent()
                    .find(".clearexpand").show();
                });
                $(this).parent().parent().children(".gifplay").hide();
                imageurl = $(this).attr("src");
                $(this).attr(
                    "src",
                    imageurl.replace("/200x200/","/original/")
                );
            } else {
                if($(this).hasClass("big")) {
                    u.hide();
                    $(this).addClass("small").removeClass("big");
                    imageurl = $(this).attr("src");
                    $(this).attr(
                        "src",
                        imageurl.replace("/original/","/200x200/"))
                        .load(function () {
                            $(this).parent().parent()
                            .children(".gifplay").show();
                            $(this).parent().parent().parent()
                            .find(".clearexpand").hide();
                        }
                    )
                }
            }
            return false;
        });
    };
};

.gifplay 和 .image_expand 分别是载入时用来叠加在动态 gif 和大图上的 loader 层，图片的切换用的是替换 url 的方法，所以如果想像个人页面一样直接显示大图和动画，自己写个 GM 脚本就好了。代码写的很直白，就不多解释了，汗一下选择符的使用 @__@

就写到这儿，最后再赞一下 meme 的设计，收工
发布时间：2009-09-13 16:04:24 | 阅读：2827 | 评论：1

Mac 下为 VIM 增加 JSLint 支持

shimano — Fri, 04 Sep 2009 20:08:40 GMT

JSLint 不必多介绍，调试脚本的利器，常见语法错误都可以检查到，有了它，对于简单代码的 code review 就不必总让 firebug 占资源了。这里主要说下如何整合 Mac 下的 VIM，方便一起使用；以无用户界面的 Normal version 为例，也就是 terminal 中使用的那个 vi（MacVim 及 TextMate 的整合方式与其类似，而且偏好的配置更方便）。

首先要下载 JavaScript Lint，或者在他们的 trunk 中 check: svn co https://javascriptlint.svn.sourceforge.net/svnroot/javascriptlint/trunk jsl

之后解压缩（我放到了 Library/JSLint 中）并设置环境变量:
在 ~/.profile 中增加 export PATH=${PATH}:~/Library/JSLint/

接下来下载 javaScirptLint.vim 并将其放在 ~/.vim/plugin 中，如果你没有这两个目录，那么要先 mkdir 下。

需要的工作做完了，可以找个 JS 试下，当 :w 时会出现检查结果：

一切顺利，QuickFix List 中显示的就是对上方 JS 的检查结果，如果你想增设偏好，比如使用自己的快捷键启动调试，那么可以参照 JSLint 的脚本自行添加设置：

当然，浏览器中的 JSLint 依然是临时调试的首选。

明儿下午是黄修源童鞋在五道口光合作用的《豆瓣，流行的秘密》新书发布会，邵夷贝和余思也会到场。先预祝明天发布会成功。

周末继续爬山，有体力再去游泳，哦也～洗洗睡了～发布时间：2009-09-05 04:08:40 | 阅读：4342 | 评论：3

5.18 share@mac

shimano — Mon, 18 May 2009 16:24:09 GMT

是开个 mac 分类的时候了，收集一些相关的软件资源、八卦和使用技巧。公司内部最近 mb, mb pro 数量猛增，技术部应该已经接近八成了吧，放眼望去很是壮观:)

db-mac 是公司内部 mac 爱好者的小群体（现在已经是大群体了），刚刚加入，没太多可贡献的，学习先，把这两天收集的一些技巧分享下：

下面是洪教授提供的一个方便 Finder 和命令行切换的配置：

在 ~/.bashrc 里加上

# Create a command to 'cd' to frontmost Finder window
# ref: http://www.macosxhints.com/article.php?story=20050924210643297
cdh()
{
     cd "`osascript -e 'tell application "Finder"' \
         -e 'set myname to POSIX path of (target of window 1 as alias)' \
         -e 'end tell' 2>/dev/null`"
}

这样，就可以在命令行里用 cdh 直接进入 Finder 里的当前目录了

下面是 NP 找到的一个给文件夹设置独立中文名的方法：

mkdir Work
touch ~/Work/.localized
这个 .localized 文件保持为空就行，就是个标记
cd /System/Library/CoreServices/
SystemFolderLocalizations /zh_CN.lproj（其他语言环境进其他语音包修改）
sudo vi SystemFolderLocalizations.strings
添加行：“Work” ＝ “工作”;
ZZ保存退出
重启 Finder 进程，本地化名称已经在 Finder 窗口里生效

下面是 brant 分享的两个资源链接，我昨天在 ct 也分享了：

再说个 mb 外接显示器并当主屏使用的方法，是 xyb 告诉俺地，其实很简单：把 mb 屏幕合上，接上显示器，再接上鼠标键盘就行了（注意，虽然合上屏幕会待机，但外接设备后又会激活，这时如果识别到外接显示器就会将其作为主屏）；如果开着屏幕，就只能分屏或镜像。看来解决 mac 下的问题的方法就是往简单的方面想 3__3 发布时间：2009-05-19 00:24:09 | 阅读：2871 | 评论：3

[存两篇] 学习+尝试

shimano — Tue, 21 Apr 2009 23:57:45 GMT

Fluid Grids
俺比较欠缺的部分，觉得算起来很麻烦，打算尝试下，先拿 ct 的博客皮肤练练手

Advanced Debugging with JavaScript
最近正好在用 Opera Dragonfly debugger 和 Drosera JS debugger

ps, 昨天完成了投票部分，“豆列”应该归到五一后了，这两天可以提前开始整理老代码并制定新规范，比较杂乱，量也大，急不得发布时间：2009-04-22 07:57:45 | 阅读：3029 | 评论：0

入职第一天简单记录

shimano — Tue, 21 Apr 2009 00:29:46 GMT

根据该用户的设定，您没有权限查看这篇日志
发布时间：2009-04-21 08:29:46 | 阅读：4026 | 评论：10

经历嗷嗷仰慕的盖世作坊初面

shimano — Fri, 27 Mar 2009 18:34:39 GMT

根据该用户的设定，您没有权限查看这篇日志
发布时间：2009-03-28 02:34:39 | 阅读：2989 | 评论：8

睡前脑子里的一些想法

shimano — Fri, 13 Mar 2009 23:54:21 GMT

社区服务站开始提供早点，我是今天的第一位顾客，天蒙蒙亮，吃着久违的早餐，真好；这种感觉会让我想起高中，只是一种感觉，转瞬即逝。

我厌恶睡觉，向来如此，曾幻想，如果人可以不睡觉的健康生活该是多么美好；当然现在现实很多，只是脑子里多了另一种假设：我宁愿按比例减损我的阳寿以换取持续清醒的精神与永不疲惫的肉体。

其实并不清楚如果真的可以 7x24 地保持清醒我可以多做些什么，只是讨厌被规律地打断，也许这是一种对于时间管理不当所产生的错觉，我向来不善于管理时间，也一直都是时间的消费者；陈老师的日志提醒了我，管理时间，纸笔足矣，已经坚持了两天；细想起来很惭愧，身边很多朋友其实早已如此。

我已经越发清晰地察觉到我所欠缺的那一部分东西是什么，同时我也明白，如果我还想继续做我自己，那就永远不能完满。

刚满 24，或者说，都已经 24 了，我们平时可能过分地注重相对的概念而忽略了一些事物本来的绝对。我们应该懂得分享。

现在很少去崇拜些什么了，我用我的谬论去解释这一切：I.Q.只是为满足我们的客观需求而存在，是对一种作用于我们从而反作用于这个世界的力的量化，一种很荒谬的存在，它既可以强大到无以复加，又可以瞬间归零，能量守恒对它可能并不适用。一些人领悟了其中的奥妙，他们从不去计较这荒谬，也不去理会诸如机遇这样的借口，自然而然地成为了施力者，也自然而然地脱颖而出。其实大多数人需要的只是时间，也许是几年，但也可能是一生，甚至几个轮回。

我因该扮演好自己的角色，从始至终。
发布时间：2009-03-14 07:54:21 | 阅读：2996 | 评论：3

关于淘宝的老认证

shimano — Tue, 10 Mar 2009 05:32:56 GMT

刚打了 4 通电话就为把我一个 05 年的淘宝公司类型帐户的数字证书注销，暂时无果，已经提交到专家组，等待中。问题在于，目前注销公司类型帐户的数字证书需要上传营业执照等相关文件，而我当时注册的时候并不需要也没有（只是觉得可能功能多，注册个公司帐户玩）这些证明文件，而且顺利注册成功了。

第一通：致电“淘宝”，听说是数字证书问题，让我直接联系支付宝；

第二通：致电“支付宝”，说公司类型的老证书注销需要“淘宝”提供书面证明，证明我当时确实只用了身份证就注册了公司帐户；

第三通：再次致电“淘宝”，听说是证书认证的问题说他们并不负责，一切认证是由“支付宝”负责核实的，无法提供证明，让我再次致电“支付宝”。感觉有踢皮球的嫌疑，但细想，凡是跟认证相关、和钱打交道的流程确实都是由阿里旗下技术含量颇高的“支付宝”完成的；

第四通：再再次致电“淘宝”，我一口气说明了前三通电话的所有问题，“小二”（她们竟然也这么自称，挺2的）经过再次核实，确定暂时无法解决，要提交到专家组，让我留电话等待，最快当日解决。

句号

简单评价两句，淘宝确实有完善的客服系统，服务态度也很好（有电话录音监听嘛），对于这种历史遗留的问题只能提交技术部核实解决了。原来经常听寺院阿姨讲述客服的辛苦，所以俺今天统统给打了“非常满意”，善哉～

21:43 更新
“支付宝”客户满意中心来电话，依然无果 -__- 说情况比较特殊，明上午给答复

3.10 13:40 更新
“支付宝”客户满意中心再次电话，需要我提供身份证彩色复印件，即可注销数字证书
发布时间：2009-03-10 13:32:56 | 阅读：3525 | 评论：0

《王者归来》读书笔记 ── JavaScript 面向对象编程（2）

shimano — Mon, 09 Mar 2009 13:58:22 GMT

I. 什么是 prototype

JS 中对象的 prototype 属性可以返回对象类型原型的引用（确实拗口），让我们分开来理解。对象的类（Class）和对象实例（Instance）之间是一种“创建”关系，所以类（Class）是对象的一个类型（Type）。在面向对象领域里，实例和类型不是唯一的一对可描述的抽象关系。在 JS 里还有另外一个更高层次的抽象关系：类型（Type）与原型（prototype），它恰好和类型与实例的抽象关系构成了一个三层的链。

在生活中有个习语“照猫画虎”，这里的猫就是原型，而虎就是类型，用 JS 的 prototype 表示为：“虎.prototype = 某只猫”或“虎.prototype = new 猫()”。当然这只是个比喻。

要注意的是，原型模式要求一个类型在一个时刻只能有一个原型，这里有两层含义：

1. 每个具体的 JS 类型有且仅有一个原型（prototype），在默认情况下该原型是一个 Object 对象（不是 Object 类型）；

2. 这个类型的实例的所有类型，必须是满足原型关系的类型联。看个例子：

function ClassA(){...}
ClassA.prototype = new Object(); //默认值，可以省略

function ClassB(){...}
ClassB.prototype = new ClassA();

function ClassC(){...}
ClassC.prototype = new ClassB();

var obj = new ClassC();

alert(obj instanceof ClassC)； //ture；
alert(obj instanceof ClassB)； //ture；
alert(obj instanceof ClassA)； //ture；
alert(obj instanceof Object)； //ture；

简单描述一下原型关系的类型链：

object <─ ClassA <- objectA <─ ClassB <- objectB <─ ClassC <- objectC

有意思的是，JS 并没有规定一个类型的原型的类型，因此可以是任何类型，但通常是某种对象，这样，对象 - 类型 - 原型（对象）就可能构成一个环形结构，或其他有意思的拓扑结构。

II. prototype 使用技巧

JS 的对象是动态的，prototype 也不例外，给 prototype 增减属性会改变这个类型的原型，以及由这个原型所创建的对象上。

function Point(x, y){
    if(x) this.x = x;
    if(y) this.y = y;
}

//设定 Point 对象的 x, y 默认值并动态的添加一个属性 z
Point.prototype.x = 0;
Point.prototype.y = 0;
Point.prototype.z = 0;

var p1 = new Point;
var p2 = new Point(1, 2);

alert(p1.x + ', ' + p1.y + ', ' + p1.z);
//0, 0, 0   p1 为默认(0, 0)的对象，加上 z 的值也为 0，所以是 0, 0, 0

alert(p2.x + ', ' + p2.y + ', ' + p2.z);
//1, 2, 0   原型属性与对象属性重名，对象属性会覆盖原型属性，所以为1, 2

如果我们用 delete 运算符删除 p2 的 x 属性，那么 p2.x 会恢复 prototype.x 的默认值 0：

delete p2.x;
alert(p2.x) //0

关于用 delete 操作还原默认值还有一个例子：

function ClassA(){
    this.x = 10;
    this.y = 20;
    this.z = 30;
}

ClassA.prototype = new ClassA; //将 x, y, z 同时设为 ClassA 的默认值

//下面这个方法会将自身的非原型属性删除，达到 reset 的效果
ClassA.prototype.reset = function(){
    for(var each in this){
        delete this[each];
    }
}

var a = new ClassA();

a.x *= 2;
a.y *= 2;
a.x *= 2;

alert(a.x + ', ' + a.y + ', ' + a.z) //20, 40, 60

//调用 reset 方法回复对象的默认值
a.reset();

alert(a.x + ', ' + a.y + ', ' + a.z) //10, 20, 30

我们还可以利用 prototype 为对象属性设置一个可读的 getter，如果忘记了 getter，可以再回顾下笔记（1）。实际上，将一个对象设置为一个类型的原型，相当于通过实例化这个类型，为对象创建只读副本：

//定义一个多边形类型
function Polygon(){

    //存放多个多边形的定点
    var m_points = [];
    m_points = Array.apply(m_points, arguments);

    //利用上面提到的方法为第一个顶点创建只读副本
    function GETTER(){};
    GETTER.prototype = m_points[0];
    this.firstPoint = new GETTER();

    //公有属性
    this.length = {
        valueOf : function(){return m_points.length},
        toString : function(){return m_points.length}
    }

//添加一个或多个顶点
    this.add = function(){
        m_points.push.apply(m_points, arguments);
    }

    //取得序号为 idx 的顶点
    this.getPoint = function(idx){
        return m_points[idx];
    }

    //设置一个特定位置的顶点
    this.setPoint = function(idx, point){
        if(m_points[idx] == null){
            m_points[idx] == point;
        }
        else{
            m_points[idx].x = point.x;
            m_points[idx].y = point.y;
        }
    }
}

//构建一个三角形 p
var p = new Polygon{(x:0, y:1), (x:3, y:1), (x:0, y:4))}

p.firstPoint.x = 100; //假如我们为第一个定点重新设定 x 值
alert(p.getPoint(0).x) // 0，私有成员的值并未受到影响
delete p.firstPoint.x //恢复默认值
alert(p.firstPoint.x); //0

p.setPoint(0, {x:3, y:4}); //通过 setter 改写了私有成员
alert(p.firstPoint.x); //3，getter 的值发生了改变

上面的例子还说明了，用 prototype 可以快速创建对象的一个或多个副本，以一个对象为原型来创建大量的新对象，这正是 prototype pattern 的本质：

var p1 = new Point(1, 2);
var points = [];
var PointPrototype = function(){};
PointPrototype.prototype = p1;
for(var i = 0, i < 10000, i++){
    points[i] = new PointPrototype(); //由于 PointPrototype 是个空函数，所以它的构造要比直接构造 //p1 快得多
}

除了以上作用，prototype 更常见的用处是声明对象的方法，这样避免了在构造函数中每次对方法进行重新赋值，节省了时间和空间。所以应尽量采用 prototype 定义对象方法，除非该方法要访问对象的私有成员或者返回某些引用了构造函数上下文的闭包。

习惯上，我们把采用 prototype 定义的属性和方法称为静态属性和静态方法，或者原型属性原型方法，把用 this 定义的属性和方法称为公有属性和公有方法。

III. prototype 的实质、价值和局限性

上面已经说了 prototype 的作用，现在来透过规律揭示 prototype 的实质。prototype 的行为类似于 C++ 中的静态域，将一个属性添加为 prototype 的属性，这个属性将被该类型所创建的所有实例所共享，但这种共享是只读的。在任何一个实例中只能够用自己的同名属性覆盖这个属性，而不能够改变它。看个例子：

function Point2D(x, y){
    this.x = x;
    this.y = y;
}

Point2D.prototype.x = 0;
Point2D.prototype.y = 0;

function ColorPoint2D(x, y, c){
    this.x = x;
    this.y = y;
}

ColorPoint2D.prototype = new Point2D();
ColorPoint2D.prototype.x = 1;
ColorPoint2D.prototype.y = 1;

var cp = new ColorPoint2D(10, 20, red);
alert(cp.x) //10，先查找 cp 自身属性
delete cp.x;
alert(cp.x) //1，被删除后查找上层原型属性
delete ColorPoint2D.prototype.x;
alert(cp.x) //0，删除后继续查找更上层原型链上的属性

以一个对象为实例，安全地创建大量的实例，这就是 prototype 的真正含义，也是它的价值所在。

但由于 prototype 仅仅是以对象为原型给类型构建副本，因此也具有很大局限性，比如改变某个原型上引用类型的属性的属性值，将会彻底影响到这个类型创建的每一个实例。

总之，prototype 是一种面向对象的机制，它通过原型来管理类型与对象之间的关系，prototype 的特点是能够以某个类型为原型构造大量的对象。
发布时间：2009-03-09 21:58:22 | 阅读：5094 | 评论：1

《王者归来》读书笔记 ── JavaScript 面向对象编程（1）

shimano — Sun, 08 Mar 2009 11:44:55 GMT

跳过 JS 核心（语言结构、数据类型、函数、对象、集合、字符串等）以及 BOM、DOM 部分，这个系列的笔记主要总结一下《王者归来》面向对象编程部分的知识点，以便梳理和查阅。

JavaScript 究竟是不是一种面向对象的语言呢？

“面向对象不是只有类模型一种，prototype-based（基于原型）是 class-based（基于类）的简化版，是一种 class-less 的面向对象。对应的，prototype 继承是 class 继承的简化版（例如省略了多重继承、基类构造函数、忽略了引用属性的继承等），但不能因为它不支持这些特性就不承认它是一种完整的继承。是否为继承添加额外的特性，开发者可以自由选择，但在不需要这些额外特性的时候，还是有理由尽量用 prototype-based 继承。

总而言之，prototype-based 认为语言本身可能不需要过分多的 reuse 能力，它牺牲了一些特性来保持语言的简洁，这没有错，prototype-based 虽然比 class-based 简单，但它依然是真正意义上的 object-oriented。”

I. 公有和私有 ── 属性的封装

JS中，函数是绝对的“第一型”，JS 的对象和闭包都是通过函数实现的。利用闭包的概念，JS 中可以有不逊色于其他各种面向对象语言的公有和私有特性：

function List(){
    var m_elements = [];   //私有成员，对象外无法访问
    m_elements = Array.apply(m_elements, arguments);

    //公有属性，可以通过“.”运算符或下标访问
    this.length = {
        valueOf : function(){return m_elements.length;},
       toString : function(){return m_elements.length;}
    }

    this.toString = function(){
        return m_elements.toString();
    }

    this.add = function(){
        m_elements.push.apply(m_elements, arguments);
    }
}

这个例子中 this.length, this.toString, this.add 是公有成员，其中 this.length 是私有成员 m_elements 的 length 属性的 getter，外部我们可以通过“.”运算符对这些属性进行访问。

对象的 getter 是一种特殊的属性，它形式上像是变量或者对象属性，但它的值随着传入参数的改变而改变。在不支持 getter 的语言中，我们通常用 get<Name> 方法来替代，其中 <Name> 是 getter 的实际名字，其效果与 getter 等价。ECMAScript v3 不支持 getter，但可以用上面这种构造带有 valueOf 和 toString 方法的对象来模拟 getter。

对象的 setter 是另一个相对应的属性，它的作用是通过类似赋值的方式改变对象的某些参数或者状态，遗憾的是，ECMAScript v3 不支持 setter，并且目前为止也没什么好的方法可以在 JS 中模拟 setter。要实现，只有通过定义 set<Name> 方法来实现:(

II. 属性和方法的类型

在 JS 里，对象的属性和方法支持 4 种不同的类型，下面通过一个例子来说明：

function myClass(){
    var p = 100; //private property; 1. 私有属性
    this.x = 10; //dynamic public property 2. 动态公有属性
}

myClass.prototype.y = 20; //static public property or prototype property 3. 静态公有属性或称原型属性

myClass.z = 30; //static property 4. 静态属性或称类属性

下面说下他们的特点和区别：

1. 私有属性上面已经提到，它的特点是对外界不开放，只能通过特定的 getter 和 setter 访问。实例化 myClass() 后，如果通过“.”运算符直接访问 p 会得到 undefined；

2. 动态公有属性的特点是外界可以访问，而且每一个对象实例持有一个副本，他们之间不会相互影响；

3. 原型属性的特点是每个对象实例共享唯一副本，对它的改写会相互影响；

4. 类属性的特点是作为类型的属性而不是对象实例的属性，也就是说不能通过对象实例的“.”运算符访问，那样会得到 undefined。上例中通过 myClass.z 直接访问即可。

有关 prototype 的知识点要放到下几篇，毕竟是 JS 面向对象编程的重点所在，内容比较多。简单预告一下第 2 篇笔记，包括 prototype 的使用技巧、实质及其范例。之后几篇会涉及继承和多态、构造和析构、包装对象、元类，类模板等。

本篇结尾以一个例子简述一下 prototype，“prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法，而且特殊点在于：它是一个给类的对象添加方法的方法”：

为本地对象 Number 添加数字阶乘方法：Number.fact()

实现：

Number.prototype.fact = function(){
    var num = Math.floor(this);
    if(num<0) return NaN;
    else if(num==0 || num==1) return 1;
    else return (num*(num-1).fact());
}

alert((10).fact()); //3628800
发布时间：2009-03-08 19:44:55 | 阅读：5424 | 评论：4

[无责任翻译] W3C 文档 ─ Box model: Collapsing margins

shimano — Fri, 30 Jan 2009 18:27:00 GMT

关于 margin 折叠的问题一直很困扰（尤其是 ff 下的 margin-top 失效），一般都是 hack 过去的，没有细究，最近为面试在整理知识点，顺便翻文档，把一些犄角旮旯的残留问题来次刨根问底。英语水平实在一般，翻译不周的地方希望各位高人指正，感激不尽 ~__~ 废话不多说，开始俺的第一次：

8.3.1 Collapsing margins

有关盒模型的全部讲解在这里：http://www.w3.org/TR/CSS21/box.html

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

在这个说明中，“collapsing margins”所表达的意思是：两个或以上盒模型之间（关系可以是相邻或嵌套）相邻的 margins（不含非空内容、 padding、边框区域或使用清除分离）结合表示为一个单独的 margin。

In CSS 2.1, horizontal margins never collapse.

在 CSS2.I 规范中，横向的 margin 永远不会被折叠。

Vertical margins may collapse between certain boxes:

垂直的 margin 可能在一些盒模型中被折叠：

Two or more adjoining vertical margins of block boxes in the normal flow collapse. The resulting margin width is the maximum of the adjoining margin widths. In the case of negative margins, the maximum of the absolute values of the negative adjoining margins is deducted from the maximum of the positive adjoining margins. If there are no positive margins, the absolute maximum of the negative adjoining margins is deducted from zero. Note. Adjoining boxes may be generated by elements that are not related as siblings or ancestors.

两个或以上的块级盒模型相邻的垂直 margin 在常规文档流中会被折叠。最终的 margin 宽度是相邻 margin 的最大值。在包含负 margin 的情况下，用相邻 margin 的正值减去最小负 margin 值的绝对值。如果没有正 margin 值，则用 0 减去最小负 margin 值的绝对值。注意：相邻的盒模型可能由元素产生而并没有相邻或继承的关系。

Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

在一个浮动盒模型与另外任意一个盒模型之间的垂直 margin 不会被折叠（甚至一个浮动的盒模型与它的子元素间也是一样）。

Vertical margins of elements with 'overflow' other than 'visible' do not collapse with their in-flow children.

除取 visible 值以外，设置了 overflow 属性的元素与它子元素间的 margin 不会被折叠。

Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).

使用绝对定位的盒模型的垂直 margin 不会被折叠（甚至与他们的子元素间也是一样）。

Margins of inline-block elements do not collapse (not even with their in-flow children).

设置了 inline-block 元素的垂直 margin 不会被折叠（甚至与他们的子元素间也是一样）。

If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

如果一个盒模型的上下 margin 相邻，这时它的 margin 可能折叠。在这种情况下，元素的位置取决于它相邻元素的 margin 是否被折叠。

    o If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.

    o 如果元素的 margin 与它父元素的 margin-top 折叠，盒模型的顶部边框的边界定义与它的父元素相同。

    o Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero top border.

    o 另外，任何元素的父元素不参与 margin 折叠，或者说只有父元素的 margin-bottom 参与计算。如果元素的顶部边框非零，那么元素的顶部边框的边界位置和原来一样。

An element that has had clearance applied to it never collapses its top margin with its parent block's bottom margin.

一个使用了清除的元素的 margin-top 绝不会和它的块级父元素的 margin-bottom 折叠。

Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements.

注意，已经被折叠的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子孙布局时，才需要定义顶部边框的边界位置。

Margins of the root element's box do not collapse.

根元素的 margin 不会被折叠。

The bottom margin of an in-flow block-level element is always adjoining to the top margin of its next in-flow block-level sibling, unless that sibling has clearance.

浮动的块级元素的 margin-bottom 总是与它后面的同级浮动块级元素的 margin-top 相邻，除非那个同级元素已经使用了清除。

The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.

如果一个浮动的块级元素没有 border-top，没有 padding-top，且子元素没有使用清除，那么它的 margin-top 与它的第一个浮动块级子元素的 margin-top 相邻。

The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border.

如果一个浮动的块级元素的 margin-bottom 指定了 height: auto，min-height 小于它的实际使用高度，max-height 大于它的实际使用高度，那么当这个元素没有指定 padding-bottom 或 border 时，它和它的最后一个浮动块级子元素的 margin-bottom 相邻。

An element's own margins are adjoining if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) are adjoining.

如果一个元素的 min-height 属性设置为 0，那么它所拥有的 margin 是相邻的，而且它既没有 border-top 与 border- bottom，也没有 padding-top 与 padding-bottom，它的 height 也可以是 0 或 auto，它不能包含一个 line 的盒模型，它所有浮动子元素（如果有的话）的 margin 也都是相邻的。

When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of subsequent siblings but that resulting margin does not collapse with the bottom margin of the parent block.

当一个元素拥有了 margin 折叠，并且它使用了清除，那么它的 margin-top 会和紧随其后的同级元素的相邻 margin 折叠，但结果是它的 margin 将无法与其块级父元素的 margin-bottom 折叠。

Collapsing is based on the used value of 'padding', 'margin', and 'border' (i.e., after resolving any percentages). The collapsed margin is calculated over the used value of the various margins.

折叠操作是以 padding、margin、border 的值为基础的（即，在解析了任意百分比之后）。折叠后的 margin 值将覆盖已使用的不同 margin 的值并以此计算。

一个简单例子在这里：http://www.w3.org/TR/CSS21/box.html#mpb-examples。有图示（上图），有兴趣的可以看看，就不翻了 *___*
发布时间：2009-01-31 02:27:00 | 阅读：3920 | 评论：0

牛年快乐！

shimano — Sat, 24 Jan 2009 19:51:07 GMT

被首页推荐的第三篇（前两篇在这里）日志，开心，继续努力

今天是 yangcai168 的 deadline，我尽力吧，本命年三十通宵干活儿不大好吧 @___@ 还好，过了初一我就可以踏实宅了，时间快转！

大家新年快乐！身体健康！其他自己掂量着办，祝福多了好运就分散了，所以只祝大家 2009 身体健康，革命的本钱、家人的健康最重要~~
发布时间：2009-01-25 03:51:07 | 阅读：3289 | 评论：5

Haslayout 真的会成为历史咩？

shimano — Tue, 20 Jan 2009 06:21:36 GMT

在搜索 haslayout 的触发条件时搜到这个八卦，Markus Mielke 在针对“Internet Explorer 8 and Acid2: A Milestone”讨论的公开邮件中回复道：“I do not think I am disclosing too much by saying that HasLayout will be history with IE8 (it was an internal data-structure to begin with and should have never been exposed).”

想想，haslayout 确实该被称作 internal data-structure，毕竟它没有一个可指定的 css 属性，必须通过设置元素的其它属性来触发他，而触发或关闭它的条件有那么零碎，实在是2。这里是 M$ 官方对于 haslayout 的详细说明，我把触发条件单总结出来，在 IE8 尚未普及出现更好的解决办法前，haslayout 还是常用到的：

属性	激活	取消
display	inline-block
(max-)width/height	auto 以外任何值	none
position	absolute \| fixed	static
float	left 或 right	none
writing-mode	tb-rl	lr-t
overflow	hidden \| scroll \| auto
zoom	有值就可以	normal 或为空

这么一列也就比较清楚了，像笔记中提到的 Holly Hack，就是用的 height 的激活：height: 1%，同样还有经典的 zoom: 1(但这个并不似乎推崇，有更好的选择)

ps, 在琢磨 alibaba 08 的一道在线笔试题

第一题是用三个 div 画出图上的布局，比较简单，注意 ie6 3px bug 就可以。一般来讲，我会用4个 div 描述这个布局，也就是将左侧统一包一层，这样左侧层中可以使用流式布局，不必重复考虑宽度问题，也能避免 3px bug；所以题目中强调使用三个 div 实现也算是个小地雷。

第二题如 gif 所示。难点不在这个动作上，在于，如果不是用绝对定位(position:absolute)这三个层，比如使用浮动定位，该如何实现这个效果。
发布时间：2009-01-20 14:21:36 | 阅读：3589 | 评论：0

朋友的几个小任务终于快收尾了

shimano — Sun, 11 Jan 2009 12:34:40 GMT

忞忞小颖地 Maple Institute, 可以在这里看到简单的静态 demo. 最顺畅的一单, 主要是交流成本低. 除了网站, 还有 LOGO 及手册, 提花包办. 开始用的 Dropbox 完成一些非工程的协作, 网站部分后转到 svn. 后期全部在大黑脸上完成, Netbeans 6.5 for mac 前端支持的不错也很人性化. 不支持 resin 干脆用了 Glassfish 反正本地跑起来就行, 比想象的顺利得多:)

几个 Oxford 的学生拿到学校投资后的一个创业公司, 网站是辅助的一部分. 今年会在中关村成立北京分公司. 顺便帮打个广告, 招聘全职php程序员, 待遇中上, 有意 Gtalk 联系. 拖了很久的一单, 算是次改版, 整套的康盛产品, 在熟悉 Supersite 上花了不少时间, 比 DZ 的 js 调用繁琐, 而且不支持模板外的调用. 今天算把首页搞定. ftp 死活登不上, 有些 css 和 js 的引用还在 ctba 上, 今晚解决. 同样, 静态首页 DEMO 在此浏览.

毛儿同学的摄影工作室宣传站, 属于展示类, 改了几次, 定了终稿. 周期虽长, 但整体也算比较顺利. Portrait Mosaic 博客也落户扯谈, 美图相册在这里. 首页部分的 flash 由提花完成, 几个动作脚本, 效果挺不错, 继续深造 as 吧.
PM 的 DEMO 在这里.

小鸣鸣地纸袋超人比较 sorry, 只完成了首页, 后来一直忙 GLR 香港 & 海外实习部分就没继续, 现在纸袋超人已经上线, 也不再是我最初做的那一版, 还是要帮推: http://www.raywow.com

下周开始应该会接手一些 OO帮的东西. 同样帮打广告: OO帮是家韩国投资的创业公司, 主推平台服务. 老板和 CTO 都是韩国人, 但中文很好, 据说是清华 MBA 时期锻炼地. 他们在找 java 牛人, 工作地点五道口文津, 算公寓创业公司里奢华的了, 毕竟是文津的公寓, 公司里有猫狗各一只, 适合喜欢宠物的朋友. 待遇不错, 干股方面可以谈.

俺的 Dock 一角儿, 动物园开张~~~
发布时间：2009-01-11 20:34:40 | 阅读：3755 | 评论：19

2009 从倾家荡产开始

shimano — Sun, 04 Jan 2009 15:07:38 GMT

俺的大黑脸终于到手了，12500 港币，比从美国带还便宜，比北京更是便宜了将近 3000RMB。虽然木有经历开包和据说会感动地流泪的系统第一次启动画面，但忞忞小颖夫妻档费劲周折将原盒带回北京地壮举依然令俺感动不已，再次大谢！

Everything Mac

黑脸配黑键

三个脑袋合一张阶段性愿望达成可以继续努力奋斗了:)

微距一张，这个 LOGO 是永远的大爱

摸黑手动一张，原味木处理

抽时间去配个鼠标，三里屯店开价快 700 了，简直杀人，虽然大爱还是要理性消费；新的无线大香皂 500- 应该是个保真的合理价位。

2009 悄无声息地来了，跨年的时候边吃泡面边送祝福依然很 happy；拾年咖啡有条不紊地筹备开张，我也有条不紊地试吃蹭网，提花是每天带锤子上班地咖啡店勤劳小工，工位在俺对面，施工范围从名片设计到菜单打孔擦玻璃，粉辛苦；琳子妹在新年第一天飞抵北京，就近选择五道口同提花老王四人游，粉开心:) 时间仓促木有见到长发田老师和小猴子夕仔是琳子童鞋念叨地遗憾；待下次年假补上吧，顺便若干怨念地旅游胜地和小吃。

2009 年初，俺倾尽08积蓄请回的大黑脸，希望能带来好运，阿丫们～

2009 年初，我提前预支一年的本命好运全力祝福我的朋友、家人们身体健康，天天开心。发布时间：2009-01-04 23:07:38 | 阅读：3472 | 评论：9

宝石姐姐在西四环开店鸟

shimano — Mon, 29 Dec 2008 15:11:00 GMT

西四环边上开了家保时捷 3S 店，前段时间在装修，现在车已到位，喀嚓两张

很有爱的大 LOGO

店里十分宽敞，可惜没有正式营业，只能从外面偷窥。Boxster, Cayman 后面有 Cayenne ... 都不给曝光:(

店的具体位置如图，其实它隔壁还有一串店，奔驰、克莱斯勒、JEEP、道奇，不过比起宝石姐姐，统统不感冒。依然木有存在感，但生活却突然有了方向感，哈哈哈！努力～奋斗～
发布时间：2008-12-29 23:11:00 | 阅读：3549 | 评论：6

发现俺的笔记上 javaeye 的首页鸟:)

shimano — Sun, 28 Dec 2008 22:03:38 GMT

新年地礼物咩？2009年1月1日更新:)

继续努力。JavaEye 那边也基本同步更新，但前几篇较扯谈发的慢了些，主要是因为选择分类上的问题。Google 的爬虫很牛，刚发的文儿吃顿早餐就被收录了，连着两天都是这样，也有可能这个时间比较密集，不管怎样，好喜欢。

发布时间：2008-12-29 06:03:38 | 阅读：2960 | 评论：4

Pro CSS Techniques 读书笔记（六）

shimano — Sun, 28 Dec 2008 21:44:28 GMT

使用“标准优先”的方法

用 css 构建布局时，最好也是最省心的方法是一开始就使用对网络标准支持良好的浏览器，然后在其他浏览器中进行测试，并在需要的时候使用 hack。到目前为止，开发网站时最好用的浏览器是 Firefox，它不仅渲染引擎精准，而且额外的收获是，你可以充分利用 Chris Pederick 那非常实用的 Web Developer 以及 Firebug 扩展减少多个不眠之夜。

什么时候该用 hack

我们都愿意强调“0 hack”政策，但事实是，很多情况下你只能使用 hack；几乎任何的 css 布局都需要至少一或两个 hack 以确保它们能在 IE5+ 的版本中正常显示。虽然 hack 会让代码稍显难看，但总有一天你会需要在常规基础上使用几个 hack（除非你很幸运，只在非 IE 浏览器中工作）

IE 条件注释

大多数时候，专用的浏览器特性被认为是不好的。但条件注释却是个例外，尤其好似虽着 IE7 的普及，我们更应该感谢它。

使用条件注释的方法不多，完全列表见 MSDN 相关章节，这里说一个使用频率最高的条件注释，他的作用是区别 IE6 及以下版本：



lte 的意思是小于或等于：less than or equal to

一定要让 hack 保持独立

成功的秘诀在于一定要将 hack 放在专门的样式表中。这样，在 css 出问题时就能很容易地找到并修改它们。目前扯谈社并没有这么做，主要原因在于 css 结构并未定型，待完善文档后再做不迟。

可能根本就不需要 hack

老外也搞标题党，不过想想，如果不用特殊标记来区分浏览器确实不叫 hack，要“完全避免 hack”的方法就是为 IE 单独写一套“错误”的样式，在头部引入样式时加上刚才提到的条件注释，并置于主 css 之后。这样，“错误”css 中同名的选择符就会按照顺序覆盖主 css 达到只让 IE 识别的目的。这不是自欺欺人么，其实还是 hack -__-

注意：条件注释开头的 if 语句也可以锁定其他 IE 版本，如 <if IE 5]>，或所有 IE 浏览器 <!--[if IE]>

一些好的 hack（和变通方法）

现在基本上已经没有所谓的“好”的 hack 了，不过仍有少数几个很实用的值得了解，尤其是在 IE6 大行其道的时候。但记住，用的 hack 越少越轻松。接下来讲几个必须知道的 hack，它能为你节省不少时间。更详细也更彻底的浏览器 hack 列表请访问这里。

Star HTML Hack

IE7 以前的版本有个毛病，它能识别文档最外围附加且未命名的元素，这个元素以通配符（或“*”）表示，它将 html 元素当作子元素锁定，而不是文档的父元素（在 css 规范中这是不支持的，也不被其他浏览器支持），这个 bug 专门用来锁定 IE，看个例子：

body {
   bockground: #f7f7f7 url(img/fxck_hc.png) repeat-x
}
*html body {

   bockground-image: none

}

这样的话 IE7 以下版本的 IE 将不会显示那张 png 的背景图片。
注意：该选择符的优先级比较高，hack 可以存在于源顺序的任何位置，也会覆盖任何简单选择符。

Holly Hack

IE 中的很多显示问题都源于它的渲染引擎有问题，尤其表现在一个元素是否有“布局”。Holly Hack 以那个发现它且无比聪明的女人 Holly Bergevin 命名。这个 hack 建于 Star HTML hack 之上，可以用来传递一点小的高度给 IE 中某个特定的容器，告诉 IE 的渲染引擎赋予目标元素“布局”：

*html .container { height: 1% }

简易浮动清除

浮动清除的问题由来已久，解决的方法也很多，包括在包含浮动的容器的最末元素后插入 <div style="clear:both"></div> 之类的语句，目前扯谈用的是 blogbus 的博客皮肤，这三套皮肤无一例外的用到了这个方法，其实还有更好的，比如扯谈主站在使用的 .clearfix 通用方法：

/*clear both*/
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}
.clearfix {
    zoom: 1;
    display: inline-block;
    _height: 1px
}
/* Hides from IE-mac */
*html .clearfix {
    height: 1%
}
*+html .clearfix {
    height: 1%
}
.clearfix {
    display: block
}
/* End hide from IE-mac */

看看这是怎么回事。为了在包含块后生成内容，clearfix:after 使用了伪对象，这个声明创建了内容，将显示由默认的 inline 改成了 block（clear 属性不再被应用于行内元素），同时使生成的内容消失（height: 0; visibility: hidden;），所以就清除掉了所有的浮动。后半部分的作用与 Holly hack 相同。

使用的时候只需要给外围容器加上这个 clerafix 即可：

<div class="container clearfix">

盒模型 hack 的无 hack 替代

盒模型 hack 成为大多数以标准为基础的开发者们的必备工具已有一段时间了，它修复了 IE5 和 IE5.5 中的闪烁渲染错误。产生这个错误的原因在于运用盒子的补丁时是从盒子的特定宽度中减去的，而不是像规范定义的那样是增加的，结果就导致了浏览器中尺寸的混乱。下面说一种不使用 hack 的方法：

html:

<div id="container">
   <div id="container-padding">
      <p>mockee</p>
   </div>
</div>

css:

#container {
   width: 200px;
   height: 300px
}
#container-padding {
   padding: 10px
}

由于 #container-padding 不具有任何规定的尺寸，IE 中错误的算法就不再是问题了。

这一章的例子很多，基本都用了提到的方法，这里就不赘述了，可以自己练习下 hack 和无 hack 的布局例子，期间肯定还会遇到不少问题，不用急，下一章会详细的介绍 CSS 布局:)
发布时间：2008-12-29 05:44:28 | 阅读：2957 | 评论：1

拾年咖啡 & Tifafa

shimano — Sat, 27 Dec 2008 18:25:19 GMT

孙老师地咖啡厅（拾年咖啡）快开张了，提花童鞋乃店内装饰设计全权大跟班儿兼首席试吃试喝工程师顺带店内摆摊儿 Tifafa。提前祝两位朋友地新买卖在 2009 稳赚不赔！

正式打广告

拾年咖啡五道口店位于双清路上华源世纪商务会馆西侧圆形建筑的顶层，落地玻璃窗环绕建筑一周，午后可以透进满满的阳光，与清华大学，清华科技园遥遥相望，隔开窗外五道口特有的繁华喧嚣。

店内陈设着手工艺人为咖啡店特别制作的艺术作品，原木家具有着天然的欧式田园风格，blues 音乐与意大利咖啡的香气萦绕着静谧温馨的气息，墙壁书架上摞满的中外文书籍为店里平添了一份浓厚的文化氛围。

--- 摘自豆瓣拾年咖啡小组

Tifafa 五道口店位于双清路上华源世纪商务会馆西侧圆形建筑顶层咖啡厅内。黑耳朵熊乃提花童鞋原创卡吞形象，会睡觉吐泡儿和挨打，具有非典型无聊气质且常年一丝不挂，据传凡是在开心网上无聊的宅男宅女都会买一只，现已脱销，等待年后第二批新货，完毕。

广告不能白打，西西里别忘了给我打2折，因为我比较2

发布时间：2008-12-28 02:25:19 | 阅读：3348 | 评论：9

年末了，写点儿 zhèr，不知是忙还是闲 - -

shimano — Mon, 22 Dec 2008 20:31:11 GMT

打算买个 1T+ 的硬盘放家里当仓库，下午一直在整理台式和本儿里的东西，该归类的归类该删的删，折进去数小时，我最会浪费时间了 - - 整理文字资料的时候偶然发现了个很神奇的东西，一个 5M 多的 txt，从文件名上看是个备份，但具体是什么一点印象没有。打开以后吓一跳，是我从 02 年到 06 年初的所有聊天记录，起初大部分都是 QQ 的，后来有 MSN 的，再后来又多了手机短信；想起来了，当时手机比较矬，还不能导出短信，我是一条条敲下来的... 再往后翻，还有动感地带上复制下来的自己所有的通话记录、GPRS 流量记录...

想来想去，当时犯病似的记录的原因大概和现在一样，没啥存在感，只不过现在的感觉没当初那么强烈，所以记录形式也变成了在 twitter 上的自言自语，甚至把 blog 的 feed 也绑在上面自动更新。

时不时的要被人温柔的提醒，才会有存在感

现在想想其实这是个挺邪恶的东西，没做亏心事儿都怕鬼敲门，鬼上你们家能有什么好儿？就算走错门儿也能整出点儿事儿来吧，何况我又不是什么正人君子，损人不利己的事儿肯定做过不少，5M 文本串起来足够半柜子小说了，随便抻出一段就是个有头儿有尾的过往是非。主啊！都要跨年了，你他妈的就宽恕我吧，咱换个大点儿的教堂还不行么，09 我得努力工作好好生活，像陈老师一样做个重色重友的人，做个脱离低级趣味的人，做个有益于行业的人，上交的红缨枪作证。阿丫们～

刚在 uusee 上看湖南的一个闲聊节目，片头片尾出现了查查，脸上飞着字幕；这个我高中放学回家准时 radio 的最有感觉的声音，如今竟落到这般田地，实在痛心，不过话说虽然每周末都有音乐爱查堆儿，但我总共凑巧听了两次。看来还就是我变了 - -

饶谨上电视了，还是主角，挺好。是不是有钱了就顺便把机房升级到千兆光纤啊 @__@ 右边是吃啊吃的高燃和蒋方舟。

现在整天整天的开着加湿器，水换了一桶又一桶，长了蘑菇也没事儿，总比每天睡醒嘴唇起皮、嗓子干的连话都说不出来好。油价降了许多，泪流满面。经常和老王夜间切磋台球，练得出神入化，摆球的 mm 已经不再笑出声了；一身疲惫后能坐下来吃串也是种享受，管它几点，有生活气息的小巷子真好。

时间不早了，睡醒去公司占打印机的便宜，但愿别明儿电面；继续找新工作，兄弟们也都加油了！大家都要坚挺！

对 2009 满怀期望～
发布时间：2008-12-23 04:31:11 | 阅读：2665 | 评论：5

从垂直居中说开去（CSS 实现）

shimano — Mon, 22 Dec 2008 18:43:24 GMT

Pro CSS Techniques 读了多一半了，笔记明天继续，今天先说说关于网页内容（文字、图片、容器等）垂直居中的问题。挑起这个话题还是因为去年淘宝 UED 招聘时的一道笔试题，那篇博去年就看过了，但最近被挖出来再看又是另一种感受——能感觉到自己还是小有提高的:) 顺手把垂直居中的方法总结下：

1. 单行文字在固定高度容器中垂直居中

这个最简单，只要让行间距 line-height 与容器高度 height 相等即可；

#box { height: 120px; line-height: 120px; overflow: hidden }

2. 多行文字在未知高度容器中垂直居中

这个也很简单，将 padding-top 与 padding-bottom 设置成相同的值即可；

#box2 { padding: 10px 0 }

3. 多行文字在固定高度容器中垂直居中（非 IE 浏览器）

css:

#box3_wrapper {
   display: table;
   height: 311px;
   background: #eee
}
#box3 {
   display: table-cell;
   vertical-align: middle
}

html:

<div id="box3_wrapper">
   <div id="box3">
        作者：shimano<br />
        如何既给用户提供最大限度的编辑权限<br />
        又能保证网页整体的规范和美观？<br />
        真 TMD 难啊！
   <div>
</div>

注意：这其中有个关于字号的问题，在 XP 和 Vista 及 Mac 下即使设定了像素为单位的字号，文字大小也依旧不同，这个在我之前一个篇日志里也提到过，在 XP 下，12px 宋体是 11x11(px)的，在 Vista 下有些文字高 11px 有些高 12px，这也是为什么 Vista 下的宋体看起来比较奇怪，Mac 下默认就是平滑边缘的黑体，再有就是 safari 下平滑边缘的宋体，所以更不容易辨别。

如果细究，在不设定高度和行间距的容器中，12px 宋体文字上下边沿依旧会有 1px 到 2px 的间距，XP 的 IE6 下，字下沿有 3px ，字上沿为 0；Firefox 下，字上沿为 1px，下沿为2px；Vista 下，文字上下各 1px 间距（考虑同等高度文字）；这可以理解为默认 line-height，在这篇日志中我也是遇到了同样的问题。

关于 IE6 下 line-height 的问题我在这篇日志中有提。

4. 多行文字在固定高度容器中垂直居中（IE 浏览器）

因为 IE 不支持将 div 显示为 table 及其同胞，所以我们要另想办法：

css:

#box3_wrapper {
   position: relative;
}
#box3_inner {
   position: absolute;
   top: 50%
}
#box3 {
   position: relative;
   top: -50%;
   background: #eee
}

html:

<div id="box3_wrapper">
   <div id="box3_inner">
      <div id="box3">
         这种方法<br />
         在下面的未知高度 div 垂直居中<br />
         也用到了
      </div>
   </div>
</div>

下面有个权衡 IE 与非 IE 浏览器浏览效果的实现方法，请继续看

5. 未知高度 div 的垂直居中

css:

#box4_wrapper {
   height: 100%;
   width: 100%;
   overflow: hidden;
   position: relative
}
#box4_wrapper[id] {
   display: table;
   position: static
}
#box4_outer {
   position: absolute;
   top: 50%
}
#box4_outer[id] {
   display: table-cell;
   vertical-align: middle;
   position: static
}
#box4_inner {
   position: relative;
   top: -50%;
   margin: 0 auto;
   background: #eee
}

html:

<div id="box4_wrapper">
   <div id="box4_outer">
      <div id="box4_inner">
         这是一种无 hack 的方式<br />
         虽然环保，但是臃肿:(
      </div>
   </div>
</div>

CSS2 选择符 #value[id] 相当于 #value，但是 IE 不支持这种类型的选择符，使用这种方式区分浏览器避免 hack:)

6. 未知尺寸图片（小与容器高度）在固定高度容器中垂直居中

css:

#box5 {
   display: table-cell;
   *display: block;
   *font-size: 175px;
   *font-family: Arial;
   vertical-align: middle;
   height: 200px;
   width: 200px
}
#box5 img {
   vertical-align: middle
}

html:

<div id="box5">
   <img src="img/ctba.png" alt="扯谈社" />
</div>

淘宝 UED 07 前端开发原题。解释下针对 IE 的 hack：在 IE 下，将字号设置为容器高度的 0.873（本例中即 200*0.873 = 175）图片便会垂直居中；字体设置为 Arial 主要防止非 utf-8 引起的 hack 失效问题，如 gbk 编码（摘自译飞的博客）

当然如果只是图片，在针对非 IE 浏览器时利用单行文字的垂直居中方法也可以。

时间过的真快，平安夜要怎么过捏？
发布时间：2008-12-23 02:43:24 | 阅读：3594 | 评论：1

Pro CSS Techniques 读书笔记（五）

shimano — Sat, 20 Dec 2008 08:03:12 GMT

上一篇：Pro CSS Techniques 读书笔记（四）

CSS 文件管理

至于原因不必赘述。无论是单枪匹马还是团队作战，为 CSS 制定一套一致的标准，可以最大限度地降低日后的维护成本。

CSS 文件路径

文件路径在一定程度上取决于所用的后端服务器和应用配置，一般情况下，CSS 文件的路径往往与他们的 URL 有直接关系，而另一些现代网络应用框架如 Django、RoR，他们的 URL 结构与服务器目录结构是不同的。无论哪种，只要确保自己和团队以及 URL 本身能容易找到就哦了。

关于存放目录的命名，大部分人都习惯于建立 css, style 这样的目录统一存放，当然也可以建立一个包含网站资源的目录，比如 resources, media, site 等，其中包含 css、img、flash、js 等，完全取决于自己。不过强烈建议将所有 css 放在一个目录下维护。

类和 id 名称的惯例

也是个习惯的问题，不过目前见到最多的就三种：使用下划线“_”分割多单词（俺倾向这种，可读性比较强）、使用连字符“-”分割、还有就是开发人员的比较习惯的“骆驼拼写法”（如 mainContent）。接天际那个项目时虽然拿到了规范文档，但看到他们的实际作业还是比较混淆，头部注释中躺着3位大哥的名字，每个人的习惯各不相同。不过他们也承认目前还在不断规范中。

所有属性一行 VS 每行一种属性

css 对格式没有固定要求，可以说只要有类或选择符名称，且他们的属性被尖括号包起来了，每个属性都以分号分割就可以，至于空格、缩进完全取决于个人风格，这也造成了代码格式的混乱，也就更有必要规范。不过格式宽泛有个好处，就是可以任意缩减不必要的空格实现代码层的压缩:)

所有属性一行，比如：

#header { height: 60px; margin: 0 auto; padding: 10px 5px 5px }

印象中国外比较流行，好处是比较方便查找，缺点是不方便修改；

每行一种属性，比如：

#header {
   height: 60px;
   margin: 0 auto;
   padding: 10px 5px 5px
}

这样写的好处是每一个属性都方便阅读和修改，当然相应的也占用了比较大的空间，尤其是属性比较多时，在查找时略逊于一行写法。不过我还是倾向于这种，毕竟之后会统一压缩，开发过程中，代码是给人看的。

特点排序

同样是个自我规范的过程，比如先边距（padding），后间距（margin），再边框（border）等等；还有一些人是按字母排序的，这种排序方式的好处是容易跟踪以避免重复。我的习惯是先按类来分，比如控制区域格式的（padding, margin, border 等）放在一起，控制内容的（font, line-height, background 等）放在一起，然后尽可能的在不破坏大类的基础上按塔状上下排列。

用缩略语来节省时间

关于这点在一篇优化文章中被指出影响渲染效率，那篇文章被转来转去，但都没有转载者自己的看法，而且原文只是一个概述，至于到底影响有多大也没细说。所以，我依然会以简洁为由继续使用缩略语来描述风格。况且缩写本来在“网站重构”就是被推崇的节省代码的方式。

缩略方式不细说，一搜一大片，这里要提醒注意的是 font 缩略语的顺序：

font: 字型（是 normal 还是 bold）字号字体
font: bold 12px Georgia, "Times New Roman", Times, serif

颠倒顺序会出问题。顺便推荐个 Dustin Diaz 的 CSS 缩略向导，包括了几乎所有缩略语特性，相应的例子和注意事项：http://www.dustindiaz.com/css-shorthand/

CSS 注释语法

/* 单行 css 注释 */
/* 多行 css 注释
   多行 css 注释 */

代码标记

h1 span {
   color: #eee; /*将 h1 中的副标题标为灰色以区分 —— mockee, 12/20/2008 */
}

为元数据注释

/* ---------------------------------------
   Author: Mockee Kaavie
   File: /theme/default/css/src/grid.css
   Usage: Style for screen(default)
   Format: 1 tab indent(4 spaces), LF, UTF-8, no-BOM
   Date: 2008-12-20 15:38:32 +0800 (Sat, 20 Dec 2008)
   --------------------------------------- */

“代码术语”的注释

/* -----------------------------
   Main Purple: #50017c
   Lighter Purple: #732799
   Accent Orange: #f80
   Accent Green: #9c0
   ...
   ----------------------------- */

作用显而易见，方便参考、复制粘贴字体以及任何需要不断重复的东西。

为 CSS 规则排序

上面提到了属性的排序，这里说说规则排序，有以下三种方式：

1. 从一般到特殊
比如先 body、页眉、段落、列表、表格、表单等会应用于整个文档的，然后是稍微具体一些的如某 div 中使用了后代选择符的元素，最后可以更具体些，比如单独列表的风格等；

2. 根据规则出现的顺序

比如从页眉的样式开始，然后是主要部分的样式，最后是页脚；

3. 根据我那个站的页面或分区

简单的例子，一个个人站点的规则分组可能是：主页、关于、博客等

以上三种方法又都可以联合起来应用。

CSS 框架

什么是真正的框架？简单的说，就是一些有用的代码的集合。这些代码会呈现最佳实例，并能让你更快更容易地引导、搭建和运行你的网站。目前出现的 CSS 框架（参见我之前提到的 Top 12 CSS Frameworks）大都做到了以上提到的规范。参考之后制定一个真正适合自己的规范和框架才会让其发挥最大的作用。

接下来就要谈谈有意思的 Hacks 和 Workarounds 了:)
发布时间：2008-12-20 16:03:12 | 阅读：2159 | 评论：0

太聪明中的动画 - 截图尊辛苦吖

shimano — Fri, 19 Dec 2008 21:46:37 GMT

我总以为你一般难懂的我
在你了解了以后其实也没什么
我总是忽冷又忽热隐藏我的感受
只是怕爱你的心被你看透

猜的没错想得太多不会有结果

被你看穿了以后
我更无处可躲

我猜中你的心要再一次确定
遥远的距离都是因为太过聪明

要猜着你的心要再一次确定

混乱的思绪都是因为太想靠近你

我开始后悔不应该太聪明的卖弄

只是怕亲手将我的真心葬送

我猜中你的心要再一次确定

遥远的距离都是因为太过聪明

要猜着你的心要再一次确定

我开始后悔不应该太聪明的卖弄

只是怕亲手将我的真心葬送

我开始后悔不应该太聪明的卖弄

只是怕亲手将我的真心葬送
发布时间：2008-12-20 05:46:37 | 阅读：2283 | 评论：3