atppp’s Blog

第三届 CSS 裸奔节来了！CSS Naked Day，皆在推动 Web 标准。一个具有良好 (x)html 结构层次的网页，即使没有加 CSS，也应该具有高度的可读性。不过，为啥要裸奔，难道网页有漂亮的风格不好吗？可以看比方这里。

祝大家裸奔快乐。

P.S. Firefox 里可以通过菜单 View -> Page Style -> No Style 关闭 CSS。Opera 也有类似的功能。

PHP 里函数多如牛毛，加进去又没什么统一规划，搞得现在成了命名法大杂烩，比如：

• obj_verb 型的：array_slice() http_inflate()
• verb_obj 型的：create_function() parse_str()
• verbobj 不加下划线：setcookie() addslashes()
• 直接把 POSIX 传统函数拿来用的：opendir() fopen()
• 这种算什么呢：error_reporting() htmlspecialchars() 特别是这个 htmlspecialchars 命名毫无章法
• 新老 DOM 类函数不一样：一个叫 getAttribute()，另一个叫 get_attribute()
• 你可能会说，那同类函数可能命名法就一致了吧？也不全是，日历函数：
  • verb_obj：cal_days_in_month()
  • 大写首字母不加下划线：JDDayOfWeek()
  • 突然又全小写了：jdtounix()

（其实 PHP 函数名不分大小写，最后这俩只是文档故意添乱） 晕死。有人说，你真弱，用多了就全熟了。好吧，我是比较弱，可是我知道有人在知名大公司天天写 PHP 还是和我一样晕……PHP 函数命名为什么这么乱？给俩链接：

• 20 possible reasons why PHP function names and parameters are weird
• Do You PHP? 里第二部分：The Ugly Duckling of Programming Languages

换个话题，最近 PHP 的 substr 函数被人改坏了。

There was a small inconsistency between PHP 5.2.1 and 5.2.2. In PHP 5.2.1, substr($str, $start) returns the full $str if ($start < 0 && abs($start) > strlen($str)). But starting from PHP 5.2.2, FALSE would be returned. Before 5.2.2, this behavior was conveniently used to extract at most N last characters of a string, e.g. $str = substr($str, 30); limits $str to at most 30 characters and truncate from the beginning if necessary. However, this no longer works! See also: diff-5.2.1-5.2.2, bug 41375. This is likely to change back in PHP 5.3, given what’s recently been done on PHP_5_3 branch.

PHP Doc 有正方呼吁：This is a small inconsistency, one of those things that makes the life of a PHP programmer like hell. Bugzilla 上反方辩护：The fact that it worked up until 5.2.1 doesn’t mean that you should have used it. 这个问题其实最开始只是因为别的原因无意间改错的，但是 PHP 内部却有人坚持错误，有人报告这个问题也被归类为 Bogus（意思就是说，RTFM，回家好好读文档去）。其实文档也不明确，现在基于各种原因，PHP 5.3 分支上又改回去了，真是搬起石头砸自己的脚。

说个微软搬石头砸自己脚的故事。IE 最开始搞出 {client,offset,scroll}{Top,Width,Height,Left} 十二个很有意义的 HTML 属性用来方便的设置/获取对象大小/位置等信息，实在是一个很好很强大的发明，基本也铁定进 HTML5 了。不过 IE 里面的制造标准不明确，各类元素定义略有不同，反倒别的浏览器抄得更和谐。搞到现在的局面是，微软自己发明的东西，反倒被 QuirksMode 说成 IE 里 incorrect/buggy，不如别的浏览器“正确”，真是衰啊。

今天又碰到有人说 IE6 不支持 PNG 透明色，真是无语……所以干脆跑上来拜一下康神好了。上面三张图分别是 PNG-8，PNG-24 和 GIF。IE6 不支持的只是 PNG 的 alpha 通道（256 级可调半透明色），PNG-8 索引色里的完全透明色还是支持的。正常浏览器能看到三尊金色背景的康神；IE6 里中间那尊 PNG-24 康神则没有金色背景。

P.S. IE6 可以用 filter 弄 alpha 通道。

GIF 是一个变态的格式，不但当年有专利方面的问题，而且只能支持 256 色，还没有 full alpha 通道，只不过现在还没有别的通用格式可以替代其动画功能，所以 GIF 还是一个相当流行的格式。PNG 1996 年发布的时候就希望打倒 GIF，但是 PNG 的软件支持发展比较慢，特别是 PNG 不支持动画，导致 GIF 一直到现在还没有被打倒。（GIF、JPEG 和 PNG 的比较）

PNG 小组的保守派一直强调，祖先定下规矩，PNG 只能存储一张图片。于是，他们在 1996 年就开始琢磨另一种全新的动画格式，叫做 MNG，但是十多年过去了，MNG 却已经销声匿迹。MNG 错在哪里？MNG 的结构太复杂了。PNG 当初作为一种全新的格式，就经过了好几年才开始普及；而 MNG 除了多一个动画功能，也没有太多的好处。Mozilla 浏览器曾经支持过 MNG，但是 2003 年夏天很诡异的把 MNG 支持去掉了。You can support, and then unsupport？这不禁让我想到盖茨在 Bill Gates’ Last Day at Microsoft 中所说的“you can retire, and then unretire?”

Mozilla 去掉 MNG 支持的事情曾在 Bugzilla 上引起轩然大波（Bug 18574 195280）。去掉 MNG 的主要原因是 Mozilla 里维护 MNG 库的 tor 力不从心不想干了。MNG 复杂的结构导致其解码库比 Mozilla 里别的所有图片格式的解码库总和还要大，虽说这 200 kB 的解码库即使在当时 2003 年也根本不算什么，但这是 tor 列举的移除 MNG 支持的第一个理由，因此也常被人误读为 Mozilla 去掉 MNG 的根本原因。MNG 创始人之一 Gerard Juyn 曾写道：

Mozilla 1.4 still supports MNG, but current builds have it removed. The decision was made to save space…

FireFox is the lean and mean descendant of Mozilla…

这之后 MNG 的日子越来越不好过，目前主流浏览器里只有 Konqueror 原生支持 MNG，别的都要装插件（Konqueror 算主流浏览器么？）。libpng 目前的维护者 Glenn Randers-Pehrson 在 2007 年承认：

After 6 years or so since MNG-1.0 was approved, it seems clear that it is not really going anywhere, mostly due to claims that it is too complex.

互联网发展了这么多年，通用动画格式仍旧只有存在各类问题的 GIF 一种。 2004 年，Mozilla 有两个人痛定思痛，发明了一种基于 PNG 的动画格式，叫 APNG。APNG 比 MNG 好在什么地方？APNG 是对 PNG 格式的一个极小扩展，而非完全从头打造一个全新格式。首先，它和老 PNG 标准完全兼容，不认识 APNG 格式的浏览器可以正确显示 APNG 动画里的第一帧图片；其次，由于它只是对 PNG 格式的一个小扩展，所以支持 APNG 非常简单，PNG 库也只会增加大概 5% 的大小。不过比较搞笑的是，2004 年 APNG 提出之后那两个猪头一直没空实现它，一直到 2006 年有一个机会他们在 Google Summer of Code 找了个小弟 Andrew Smith 实现了 APNG 解码，现在最新的 Firefox 3 beta 和 Opera 9.50 beta 都已经支持 APNG。

APNG 的出现，自然是给渐渐死亡的 MNG 重重一击。PNG 邮件列表上争吵声此起彼伏。2004 年，PNG 创始人之一 Thomas Boutell 在《MNG 已死，有事烧纸》一文中回顾到：

PNG is moderately successful, but it never did replace GIF. That’s mainly because Netscape sprang animated GIF on the world when the PNG specification was nearly final, without saying a word or once suggesting that we include animation.

When animated GIF appeared, I lobbied the PNG group for simple, GIF-style animation support in PNG, … I lost out to those who made eloquent arguments for a more complete animation format (So much for dictatorship. At least I was benevolent.). MNG, the all-singing, all-dancing, all-merciless animation format, took a long time to standardize and was rejected by both major web browser vendors …

Very recently, two young turks decided to invent a simple new animated-PNG format (apng) … It is kicking up a shitstorm on the long-dormant PNG mailing list. The old-timers and the young turks are trying to hash out an agreement. I agree for the most part with the young turks and their design choices.

I could not be more pleased with this development.

Andrew Smith 在 libpng 的 apng 补丁发布网站提到一句 MNG：

MNG already existed at that time but was too big/fancy for most people to accept as an image format (this is the first and last time I mentioned this flamy topic).

这样的争吵持续了很久，2007 年 4 月 PNG 小组投票决定是否允许 APNG 进入官方 PNG 标准，投票以 10:8 否决这个建议，PNG 小组里的顽固分子仍旧相当排斥直接在 PNG 格式上动手动脚支持动画。

标准的诞生，基本上是一个先有鸡还是先有蛋的问题。世上本没有使用 PNG 的人，也没有支持 PNG 的浏览器，更没有制作 PNG 的软件；然而几年过去，三者相互影响并都稳步上升。MNG 一开始面对的也是同样的境地，但却没有流行起来。APNG 其概念本身并不优美，是对 PNG 标准的粗暴践踏，但是因为有的放矢，射中要害，却得到了两个主流浏览器的认可。标准的诞生就是一场恶战，不一定最好的技术就会胜利，TCP/IP 就是一个例子。新标准和新公司一样，只有好的想法和技术并不能成功，市场团队同样重要。市场做好了，烂东西也能变成好东西。

有人对开源软件盲目崇拜，认为软件开了源就是万事大吉，其实缺少了经济利益驱动的开源软件往往官僚更严重，即便在开源团队内部，权威照样存在，更不用说在用户层面上的反馈了。开源不等于开放，开源也不等于民主。AA 软件的 XX 功能能不能改改？你丫不会自己改啊？AA 软件为什么没有 YY 功能？你大爷的你爱用不用。AA 软件的 ZZ 功能是不是有 bug？放屁，这叫 feature！Bugzilla 上这么多反对的声音，Mozilla 的 MNG 支持照样被去掉了。群众力推 APNG，无论其多么的符合实际需求，照样能被 PNG 小组里的老东西打倒。

最后，有人问过我，是否看好 APNG。我想我也预测不了世界范围的图片格式流行趋势，不过如果 IE 不支持 APNG 的话，APNG 还是只能局限在应用程序界面上使用，很难成为网页上的通用图片格式。

（以上所有引文中的下划线都是我加的）APNG 的几个网站：

• Better animation in Firefox 3
• apng: the animated PNG
• APNG Specification

如果你看到上面三个跪拜图都是动画，那么恭喜，你现在用的是世界上最先进的浏览器。上面从左到右分别是：动画 SVG，动画 PNG，和最古董的动画 GIF。GIF 的弱点对于懂行的人显而易见，对不懂行的人说了也白说，我就不多说了。现在最新的 Opera 9.50 版可以看到三个动画；Firefox 3 开始支持动画 PNG，但是还不支持动画 SVG。

P.S. 记一下 ImageMagick 生成动画 GIF 的命令：

convert -dispose previous -delay 10 *.png kxnorz.gif

SVG（全称 Scalable Vector Graphics）是下一代矢量图形格式，这玩意儿和 MathML 一样，都是基于 XML，都是 W3C 上个世纪就开始搞的东西，但是一直到现在这俩难兄难弟还不是非常流行。所以，我就做个广告吧，矢量图形格式最大的好处就是放大不失真。如果你的浏览器支持 SVG，就能看到下面的图形。四大菜系里只有 IE 是需要装插件的，Firefox Opera Safari 都原生支持 SVG。

（这是我高中很傻很天真的时候搞的签名 ATP，扫描到电脑里然后用 Adobe Illustrator 矢量化。）

人物介绍：

• 王强：网景（Netscape）公司老雇员，后成为 Mozilla 基金会骨干，主管外联；
• 艾利：互联网世界警察 W3C 高层，负责协调 CSS3 进度；
• 炮尔：微软（Microsoft）资深工程师，参与编写 CSS3 文字模块标准；
• 盖兹：微软创始人之一，人称盖老板。

【第一幕】2001 年 5 月，艾利给炮尔打电话。

艾利：老炮啊，我，艾大妈。

炮尔：哎呦妈呀，好久不见嘞呀，你最近忙啥呢？

艾利：我还那样，我跟你说啊，我今天没空跟你扯。明天我们这儿有个会，要开始搞 CSS3 文字模块了，你来不来插一腿？

炮尔：啥？你们 CSS2 都没搞利落呢怎么就上 CSS3 了？我告诉你啊，上次你欠的债还没还呢，你让 Mozilla 把我们微软的 word-wrap 和 word-break 给实现了不就齐活了？还搞啥屁标准啊！

艾利：Mozilla 他们不干啊，他们非要个标准。我说，我私下早就说好让你们写标准了，你到底来不来？

炮尔：标准？啥标准？我们微软就是标准！你去外头看看多少人用我们的浏览器！

艾利：嘘，你们和网景打官司呢，别大声嚷嚷，小心 Mozilla 也告你！

炮尔：好好好，老大我服。明儿个几点开会？我今晚就飞过去。

【第二幕】第二天，W3C 会议室。

王强：炮工您好您好，很高兴见到您。听说你们 IE6 快发布了，恭喜恭喜啊！

炮尔：哪里哪里！不过我们是真的觉得这个版本很好很强大啊！

王强：听说一大批银行网站在 BETA 版上运行都有问题？嘿嘿，嘿嘿！

炮尔：这个……这个……

（艾利姗姗来迟，进入会议室）

艾利：欢迎来到 W3C，谢谢大家光临。我们 W3C 是世界上最大的互联网组织，技术实力雄厚……

炮尔：（打断）喂，你别打官腔行不行，我一会儿还要去看脱衣舞呢，难得老婆管不着我。

艾利：好那我们就直接进入正题，今天我们要协调开始 CSS3 文字模块的工作，最好下个星期就能发布一个草稿。

炮尔：大家都知道，微软早在 IE 5.5 就实现了伟大的 word-wrap 和 word-break 属性，大家只要照搬微软的文档，标准就出来了。我给大家举个例子，加了这个属性的 div，哪怕碰到再长的文字也不会把 div 撑破，比如：

王强：首先，我赞赏微软在这方面先驱的工作，但是我并不觉得我们可以把微软这两个东西拿来直接作标准，比如同样属性的 div，可能会有这样的景象：

王强：apart 一词被硬生生拆成了两行，这是不容许的。我觉得在这个断词换行领域，我们还有很长的路要走。

会议不欢而散，过了一个星期炮尔勉强拷贝了一下微软的文档发布了第一个 CSS3 文字模块草稿。

【第三幕】 一年后，2002 年 5 月，炮尔给王强打电话。

炮尔：小王啊，我去年请你看了脱衣舞秀，你怎么也不还个人情啊。这不 CSS3 文字模块二稿都快出了，你们 Mozilla 浏览器怎么在断词换行功能上连个动静都没有啊。

王强：这玩意儿不好搞啊。就上个月，我们才找中国佬谈过，各类标点符号能不能放行首行末的规则就快把我搞晕了。

炮尔：这个好办，我直接把我们的代码送给你们吧。我说，你还是给你们开发组施加一点压力，我这 CSS3 草稿发布出来就我们微软一个浏览器支持，我们律师怕人家告我们垄断那。

王强：还不光那一个操蛋的标点问题呢，这不我刚又收到一封中国佬的信，说他们新出了个规定，“毛主席”三个字中间也不能换行……

炮尔：我操，这都文革时候的事儿了，他们忽悠你呢。

王强：不光中文，别的语言也有问题。就说英语好了，一个词在什么地方断行，就是一个很技术的问题。比如 fucking，我是断成 fu-cking 呢，还是 fuck-ing，这很有讲究啊。

炮尔：你他妈骂我干嘛？

王强：我没骂您，我就是举个例子。再比方说了，德语 ss 中间不能断，阿拉伯语……

炮尔：行了，你们就不能随便先起个头，你们社区这么多免费劳动力，你起个头，大家自然就能贡献了。

王强：不瞒您说，这个断词换行我们开会认为是核心引擎功能，只能我们自己干。既然是核心，就不能随便乱搞，要搞就要搞个能用的。您看，光英文断词我们就得输进去整一个大英词典，工作量很大啊。

炮尔：好好，我理解。那你觉得啥时候能搞出来？

王强：今年吧，我们人都招好了，就等着写代码了。

【第四幕】镜头快速切换好几年的时光。

2003 年，Mozilla 基金会成立。断词换行功能毫无经济利益，被无限期搁置。

2004 到 2005 年，新版本 Firefox 连续发布，开发以短平快为宗旨，断词换行功能的呼声在 Bugzilla 上堆积如山，但 Mozilla 基金会视而不见。

2006 年，IE 7 开发组送给 Mozilla 一个蛋糕，祝贺 Firefox 2 发布。王强吃了一块蛋糕，感觉里面有异物，从嘴里拉出一张纸条：“你们他妈的怎么还不搞断词换行？”。

【第五幕】2008 年 1 月，盖兹在办公室找炮尔谈话。

盖兹：老炮啊，你看啊，我再过几个月就退休了，我这辈子就俩愿望，一个是把我发家的 BASIC 语言搞大，VB 搞得很成功，我很开心；还有一个我希望我们强大的 IE8 能成为 W3C 标准，你看，这只剩下没几个月了，你知道我退休前就这么一个心愿……

炮尔：盖老板，我很努力了，可是 W3C 一直不出 CSS3 标准，我也没办法啊。

盖兹：今年过年不是刚给他们送了一箱蚁力神吗？他们怎么不买帐。

炮尔：盖老板您有所不知啊，蚁力神出事儿了；而且 Mozilla 基金会刚给 W3C 送了一箱脑白金，恐怕 Firefox 还没钱开发断词换行功能，不让 CSS3 发布呢。

盖兹：好吧我知道了，你先出去吧。

盖兹给艾利打电话。

盖兹：艾大妈啊，我盖兹。

艾利：哎呦，您老还健在？

盖兹：我好得很，我问你啊，CSS3 咋还不发布呢，老子都快退休了。

艾利：这可不怪我啊，您给 Mozilla 基金会打个电话问问吧。对了啊，HTML 5 出草稿了，你们来不来插一腿？

盖兹：得，我不敢了，先这样吧，我还忙呢。

盖兹狠狠的拨了 Mozilla 基金会的号码。

“您好，这里是 Mozilla 基金会，捐钱请按 1，送钱请按 2，给钱请按 3，……和活人说话请按 0。”

盖兹按了 0，正好是王强接的。

“您好，这里是 Mozilla 基金会，我是王强，May I help you？”一口地道的伦敦腔。

“喂，我是盖老板，你大爷的你们到底什么时候搞他妈的断词换行？”

嘟……嘟……嘟……嘟……嘟……嘟……

（情节纯属虚构，如有雷同，实属巧合。）

路人甲：可是好像真事儿就是这样。

路人乙：笨！这叫艺术源于生活！

网站设计里的流氓行为一般人注意不到，但是作为一个技术愤青，每看到一个流氓设计，我就会骂一次。

• 偷输入焦点。有些网站的输入框是这样设计的：当鼠标移上去就获得了输入焦点，然后不用点鼠标就可以直接键盘输入了。这看似人性化，实则却非常违背常理，我喜欢在哪里输入就在哪里输入，怎么我动一动鼠标移过了你的输入框你就认为我要在你那里输入了呢？你傻不傻啊，请问有哪一个 windows 程序是这样设计的？难道你要跟我说某类诡异的 X window 窗口管理器么？你真要提醒我这儿有个输入框可以，变变色比方说，但是你不要把我的输入焦点抢了啊。
• 搜索框里提示这里可以搜索。一般这类搜索框是这样设计的：初始设置文字 ’search here…’；onfocus() 判断如果内容是 ’search here…’ 则清空输入框；onblur() 判断如果内容是空则重置输入框内容为 ’search here…’。这个很聪明的设计看似节省了提示文字的空间，但在我看来实在是可以列入 SB 吉尼斯纪录。你要提示这儿有个搜索框，写在搜索框旁边会死啊？一个好好的网页难道就缺这么一点儿空间吗？网页搞得密密麻麻号称信息密度高的网页一般来说可读性却很低。而且，如果我在框里输入了东西，’search here…’ 就出不来了，我反而不知道这个输入框是干啥的了。另外，我还有一个习惯是在网页里面选中文字拖进搜索框进行搜索，对于这类 SB 设计的输入框，我拖文字进去就变成了 ’search h选中的文字ere…’，真是傻极了。
• 滥用 javascript。有些网站哪怕一个普通链接也要用 javascript 函数来跳转，搞得我没办法直接在新窗口打开这个网页。你要搞点小动作可以在 <a 的 onclick() 里面搞，href 给我好好的写上目标网页的 url 有这么难吗？
• 滥用 flash。flash 是个好东西，但是不要滥用。比方网站导航结构不要用 flash，要不然没装或者关掉 flash 的地方就不能正常使用网站了。
• 某个门户网站把广告和搜索结果搞得几乎一模一样的 style，faint。还有漂浮广告，随便乱弹新窗口，等等等等，批判这些的貌似很多，我就不写了……