相比CSS3的新特性，CSS 2.1标准下的pseudo（伪类选择器）已经通用于所有主要浏览器的稳定版本（FF 3.5，Safari 4，Chrome 4，Opera 10以及IE8），这样一来我们就可以三次装饰同一个容器而不用建div巢了。Nicolas Gallagher最近写了一篇文章，看完两个DEMO（1,2）之后我清楚认识到自己没掌握CSS 2.1的事实。

ppk曾经说IE的传统盒子模型比W3C的定义好理解，但为什么IE的盒子还是比W3C的糟糕呢？因为IE盒子的定义连IE盒子的支持者自己都搞不清楚。与文中所述相反，IE盒子并不包括margin，而只是纯粹的计算padding与border的占位。为什么IE传统盒子这么烦？因为需要反向推导一个盒子的内容宽度，而浏览器渲染时期望尽快知道内容的宽度。再有，IE传统盒子硬是把微软自己的开发团队都搞晕了，有些bug还穿越出现在标准模式下，哦，你不知道IE6的标准模式使用W3C的盒子定义？

支持IE传统盒子的同学，没有为IE5.x开发过的同学，请你考虑这个问题：如今CSS3支持图片border了，使用IE盒子模式，浏览器应该怎么计算内容宽度？CSS3是为设计者方便提供帮助，请不要以box-sizing为借口，为IE5.x的顽固不化辩护。

延伸阅读：

• Internet Explorer and the CSS box model

• The Box Model Problem

• Box model tweaking

• Internet Explorer box model bug

也不知道是(mt)被后知后觉的墙看上了还是怎样，最近无论是HTTPS访问还是SSH链接的速度都被降得很低。虽然我一直怀疑墙被SSH与VPN逼急了开始测试类似美国某些ISP公司的加密包瓶颈策略，但考虑到中国的整体网速已经是粗暴的瓶颈了，还是决定再（第四次）换个服务商测试下速度。这次换用Linode的VPS，初级服务和(gs)的价格差不多，功率超出很多，网速不比当年的(gs)差，只是需要自己调整服务器。

鉴于该服务商在国内名气很大，在此多就不作介绍了。今天要介绍的是转移网站过程中的一些基本的在线测试工具（没转移也能用）。

测试域名与DNS的工具

Just-Ping大家都知道了，这里再次推荐它的父亲WatchMouse，它可以从任何服务器ping，traceroute和分析最新的DNS数据，也支持有次数限制的网站访问测试。

值得注意的是WatchMouse的DNS记录刷新速度之快是少见的，类似Google Public DNS与OpenDNS之类的解析服务需要数小时到一日才会更新。

测试服务器访问速度的工具

Pingdom是大家都熟悉的服务，最近我发现它对部分线路的检测并不好，会出现比中国还多5倍的不正常延迟（绿色显示的部分），单独用它肯定是不够的。

对于只想看数字的管理员来说，SearchMetrics提供的服务最明晰，列出了网站各个项目的下载大小与所需时间，包含不同网速下的耗时预测。

WSO则提供了一份更为详细的分析，不仅有更多的耗时预测与内容统计，还会分析每个对象的header与详细内容，提出恰当的优化建议。

Pagetest（用AOL发布的同名开源工具组建）是家设计与域名都不起眼的网站，然而它提供的测试范围却比上述任何一款都要强大。不仅可以选择发起测试的服务器（包括中国江苏的一台），还可以测试“重复访问”的速度，也就是测试有缓存时的浏览速度，这对分析网站的真实表现很有帮助。此外它与Pingdom一样可以储存历史数据，方便回顾查询。

测试网站设计表现的工具

“首先要按网页标准设计，尊重网页可用性”之类的话省去N行。

Google的三剑客，Analytics，Optimizer与Webmaster Tools更适合商业网站与宏观统计。它们在细节数据收集上还是有些欠缺的。最近人气很高的Heatmap统计就是其一，它能直观展现网站访问者的表现（相比Analytics记录链接的点击数更为有效）。

客栈最近再次启用了Reinvigorate，这家beta了三年的网站访问统计，最近推出新版公测，这其中就包括了我一直想尝试的Heatmap服务。以下是两个例图。

这是萌番一周的点击区域加亮图，点击越多的地方越亮。不难发现类似用户登录与账户管理的右侧导航受到主要关注。与此同时，一些不可点击的元素，例如用户评论的标题，也会被关注，说明萌番的首页设计还需要修改。

这是客栈上篇旁门左道文的24小时点击密度，根据文章内容，我们不难理解为何投票与链接是旅客关注的重点。

Heatmap统计已经出现在不少商用统计服务中，CrazyEgg是其中的佼佼者。不过它们的价格大多数都过于高昂（上千美元一年），免费的Reinvigorate值得各位申请尝试（这服务貌似没有邀请系统）。

PS：假如你使用独立服务器，不妨测试开源的ClickHeat，它提供本地Heatmap统计服务。不过正如出名的Piwik，它们都爱耗费大量的资源，用在虚拟主机上，不是你的数据库超载，就是CPU使用过量，再不然就是内存耗尽。一句话，量力而行——Piwik与ClickHeat的统计可能比第三方服务要准确，但免费的午餐不存在。

PPS：Reinvigorate的国内访问速度颇慢，使用WordPress的旅客可以用WP Minify插件将其本地化。顺便一提，WordPress上自动合并JS与CSS文件的插件还真不少，包括历史悠久的WP JS与WP CSS。

PPPS：本文只是抛砖引玉，欢迎旅客推荐更有趣的服务。

ppk对手机浏览器行为的研究可谓无人能及，大量的实物测试告诉他，手机浏览器是下一个地狱。除非开发者知难而退，成为特定品牌的奴隶，重复IE时代的错误。ppk在DIBI上的演讲[PDF]，应该是我读过的最直观的解释了（包括测试页面）。

我们距离“该网页游戏所需的CPU最低配置”不远了。我预测IE9的GPU加速或许能让微软风光一把（其他浏览器不会落后太久）。这个JS游戏引擎的作者Paul Bakaus是jQuery UI的开发者，他称引擎会支持IE较早版本，并且可以在iPhone与网本上流畅运行。

youtube via hacker news

相比在Youtube发布日々の音色而名气大涨的川村真司，四畳半神話大系ED的另一个制作者細金卓矢的名气更多体现在制作者圈子里。正如动画结尾的介绍，ED的原型是他用Flash制作的Madrix（字幕还拼错了）。按照作者的说法，这次改用了After Effects。

顺便一提，四畳半神話大系是款相当酷的新番，只要你别念着人物设计。请确保你在观看本作的时候是清醒的，因为它让观众压力很大。

只能用神作来形容的Javascript游戏开发库，代号Akihabara（秋叶原），利用了HTML5的小部分特性，制作纯(X)HTML + Javascript的游戏。和以往常见的游戏库不同，这个库的运行速度相当快，它运行塞〇达传说的流畅度与精细度让我惊叹！

这个游戏库惹人喜爱的另一个地方是它的独立性，放弃jQuery这类常用的跨平台库意味着Akihabara可以用最高效的代码完成功能；事实上，Akihabara库的源代码十分易读，对网页游戏开发将来趋势有兴趣的旅客不妨看看。

via ajaxian

PS: 说起网页游戏，就不得不说最近宣布由韩国Mgame开发的《美少女梦工厂OL》。本来让一群“爸爸”在游戏大厅交流育女信息就够让人头大了，这次还准备把养女党（抱歉）带到手机与网页上。虽然觉得RIA更有可能成为网页版的构架基础，但要有HTML5的版本就拽死了！“爸爸开个Chrome再来好好教育你”之类的台词浮想联翩……

你真的懂CSS？那就来理解一下他的最新杰作：“在不知道图片大小尺寸的情况下，仅使用CSS与(X)HTML完成图片的跨浏览器等比缩放”吧！听起来简单，看起来简单，却不是三脚猫网页开发者能解决的。假如你嫌页面源代码太乱，自己下载这个精简版玩玩吧～

Afterthought:

1. This is NOT a secure solution, although Mallory is not currently equipped to handle response from Charlie, it certainly can be adapted to do so (eg. filter incoming traffic, script injection).

2. I am almost certain Bob cannot trick Charlie into establishing a HTTPS connection with Alice, but I could be wrong, as one of the pre-condition for securing connection is for Alice to NOT give the key to a third-party, which we will in this case.

3. As a temp solution this should work seamlessly with West Chamber (which filters fake responses so Alice can maintain the connection), the difference between server Bob and Web Proxy/VPN/SSH tunnel/whatnot is that data from Charlie goes directly to Alice, so Bob’s bandwidth/CPU cost can be kept to minimal.

4. As mentioned in the diagram, each Bob should only handle a limited amount of users, otherwise it will be flagged as DoS. On the plus side, since no service other than authentication or request forging is offered by Bob, it has limited exposure, making it harder to identify.

5. If you think about it, this is effectively “a MITM solution to a MITM attack” :-) Just to keep the cat-n-mouse game exciting.

UPDATE: anchors added to image.

UPDATE2: what Mallory does is “ICMP DoS attack” (not to be confused with “ICMP flood”), once West Chamber can handle forged CM(control message), this MITM plan will be achievable.

对于大多数社会人来说，有假期的年已经过完了。店长也是，只不过我的假期似乎都花在这个叫萌番的网站上了。正确的说，从1月中旬开始计算，我大概花了100个小时在该网站的开发和设计上……对于当前的完成度，我还是比较满意的。

在四处宣传该网站招揽白老鼠之后，萌番也从alpha进化为可以见人的beta了，于是开始公测。注册邀请码是beta，其余请见网站自身说明。

关于这个网站的开发原因，我会在今后的文章中说明清楚。现在旅客们只要知道它是捏它营与萌番老站的合体，基于萌翻频道的代码库，利用了我测试贴纸生成器与宅种培育室的经验就行了。呼，希望这是我做的最后一个ACG相关的网站项目……

那么，我们有空再谈。

A Way Back上有一篇重新审视网站字体排序的文章。虽然中文世界的字体堆栈一般只有宋体和雅黑两种（而且是浏览器默认，不是CSS定义……），但随着不同操作系统的出炉，默认字体的比率也发生了变化，这篇文章尝试探索CSS字体家族定义的优化（仅用系统内的默认字体，而不是embed）。顺便一提，此站也是经典的blogazine + typography爱好者。

先定义问题：大家都知道，CSS超链接的outline属性一直是为键盘用户增加易用性的好帮手（按Tab键focus下一条链接，是除Safari Win外的默认操作）。可以说，outline通常伴随着:focus事件出现。但如果你重新定义了:focus的样式，这个边框就显得很多余了。

对于标准的浏览器而言（IE8+，FF2.0+等），定义:focus时的outline:0足以解决问题。但不支持:focus的IE6和只支持超链接:focus的IE7的黑点边框又怎么解决呢？

今天花了点时间研究这个问题，最早发现的解决办法是通过Javascript解决。思路是：既然IE6和7的outline不是标准的outline（无法通过CSS定义），那肯定有某种JS可以解决。通过这篇Cody Lindley的老文章我们知道hideFocus可以禁用IE的特殊边框。

<a href="#test" onfocus="this.hideFocus=true;">link</a>

但这个方式要求每个链接都有onfocus属性，实在不太美观。Cody Lindley选择用getElementsByTagName对应添加，这是第一种思路。

在上述文章留言中有一个变种方案：既然只有IE不听话，我们用CSS Expression替换不就好了？把JS写入CSS文件，用Conditional Comment避开其他浏览器（只有IE支持CSS Expression，但我有洁癖，喜欢避免CSS警告）。

a { outline:expression(hideFocus='true'); }

众所周知，CSS Expression很耗费资源，若你的页面上链接很多那就更折磨CPU了。因此我们需要一个纯CSS的方式，cssplay的Stu Nicholls老头说纯CSS的方式可行，但没几个人看懂了他给的神奇例子。各位可以用IE去测试，每块拼图都是超链接，Tab键和右键点击却不会有黑色边框。

我花了点时间研究它的CSS，发现原来通过在超链接里附加其他inline标签，通过CSS定位可以做到隐藏IE边框的效果。

首先是HTML

<a href="#test"><span>关于萌番</span></a>

然后是CSS


a { position:relative; margin:0 48px 0 0; }
a span { position:absolute; top:-1px; left:0; cursor:pointer; white-space:nowrap; }
a:hover { background:transparent; }
a:hover span { background:#1C72B7; height:17px; overflow:hidden; }
a:active { background:transparent; }
a:active span { background:#FFF799; height:17px; overflow:hidden; color:#F4B036; }
a:focus { background:transparent; }
a:focus span { background:#FFF799; height:17px; overflow:hidden; color:#F4B036; }


基本原理是让超链接完全坍塌，IE的focus边框就不会显示了。把文字藏在span标签中，再绝对定位于链接区域里（不理解position的请看这篇文章），这样坍塌时文字就不会被隐藏了。加入white-space:nowrap避免文字换行，cursor:pointer模仿鼠标指针，最后定义span为我们希望链接显示的样式，完成对黑点边框的回避。

当然纯CSS方式也有问题：由于链接标签坍塌，我们没办法让标签宽度自适应文字长度。为避免文字相互重叠，这里使用margin增加链接的宽度，换成display:inline-block与width的组合亦可……对于特定宽度的需求，我暂时想不到任何绕过办法。

客栈的吹毛求疵到此为止，我可以满足的休息了。有CSS恶趣味的旅客不妨进一步意淫。

Faster Image Insert的用途很简单：把WordPress那个该死的Thickbox上传系统移动到编辑界面的metabox下，并提供批量插入（单个图片可选插入，见上方截图）等便利的功能增强；同时不修改原有的上传系统，避免制造内部错误。

这款由客栈自行开发的插件也公开半年了，前日更新后，总下载量已达17,000次。根据我的访问统计（访问原始开发页面的用户），使用它的网站从流量超高的网页设计站到北美出名的摄影师博客都有——希望对准备新番评论，长篇图解和照片分享的旅客有用。

对于已经在使用FII的旅客，本插件1.5.0版的使用情况如何？我还没收到任何Bug报告。（新版需要先保存文章，是为了避免WP2.9冲突）

最近看Future of Web Design的几个演说文档时越发觉得CSS设计早已超越“让IE6正常工作”，“让页面看起来很炫”这么古老的范畴了。易用性将在用户浏览器的多样化中逐渐被重视。“支持Mac和Linux”？不，这也是任何真正设计者应该烂熟于心的知识了——我们说的是Accessibility，假设用户没有鼠标？假设用户禁止了Javascript？这都是Web 2.0继续红火下去需要考虑的事情。

例子？Patrick Lauke的Better CSS outline suppression和CSSplay的全新菜单设计都是起点。

如果你和客栈一样在电子版权的问题上对自身要求渐趋严格，或者你只是想下载一些真正合法的字体让自己的良心好过一些。那Font Squirrel绝对是史上最方便的字体网站，他们精心整理着所有可以合法用于商业用途的免费字体（自然也允许个人网站/图片设计使用），省去你盯上某款字体却发现版权只允许个人使用的叹息。

PS：本人认为国内最近频繁出现的抄袭问题，除去资金与时间的调配不足外，更显露出整个行业对版权的无意识。退一万步说，抄袭者至少缺乏应有的强烈愧疚感与恐惧感；存在这群高枕无忧的从业者也印证了一条道理：漠视版权者终将成为侵犯版权者。