時計坂一刻館三号室

浏览器的特征探测

Chappell.Wat — Thu, 21 Jan 2010 19:40:43 +0800

【2010.01.21 更新】
Google 的 Closure Compile 会将 IE 的判断代码“压缩”成：


"\u000b"==="v"

要么压缩后替换回 "\v" ，
要么换其它方法判断 IE 。

【2010.01.03 发表】
在撰写此文之前，
陈成告诉我 Nicholas C. Zakas 大师几天前刚好写了一篇名为
《特征探测并非浏览器探测 (Feature detection is not browser detection) 》
的文章。
文章里“深刻”批判了 MooTools 所使用的特征探测法，
但真正令人信服的理由似乎在文中也并无体现，
只是说 MooTools 因 Firefox 3.6 的变化而被迫发布了一次升级，
然后说：

“当浏览器（功能）愈发地接近彼此，想从“特征”去区别它们将变得越来越困难和危险。
(As browsers grow closer together, looking at “features” to separate them will become more difficult and risky.)”

当然啦，
不仅是 Javascript ，
服务端想要统计客户端也必须依靠 User-Agent （以下简称 UA），
而对于 UA Spoofs ，
尼古拉斯的看法是：

“你必须永远尊重浏览器所告知你的 UA 。
(You should always honor exactly what the browser is reporting as a user-agent.)”

因此从前后端统一的角度，
我个人还是赞同这一观点的。

但从另一方面看，
现在浏览器内核虽稍显得固定，
但集成多种内核出来闯荡江湖的浏览器也不少，
而且它们在中国的占有率都不是一般的高，
（但它们对 UA 的管理则不是一般的糟糕）
我想这是尼大师所没有料到的。
（值得一提的是马桶 3 的 web-kit 模式这次提供了 UA 特征符）

因此我觉得对于特征探测不可一棒子敲死，
而对于 UA 嗅探法也不能一味地捧上天，
能够准确判断出浏览器继而进行正确的 Hack 来确保完整体验才是王道。

呃……
写了这么多，
完全是针对尼大师的新文有感而发，
我预想中的正文从这里开始——

[...]

修复 Firebug 对无子节点的非自闭合标签的“识别问题”

Chappell.Wat — Thu, 21 Jan 2010 19:32:10 +0800

【2010.01.21 更新】
前天发布的 Firebug 1.5 已经修复了这个 Bug。
本文将停止更新。
（实际上自发布后也没更新过 =_,=）

【2009.07.06 发布】
题目很拗口，
事实上想用一句话清楚地描述这个问题并不容易，
那么还是看图说话吧：

请打开淘宝网首页，
用 Firebug 查看“公告栏”区域的圆角区域（如下图），

圆角的右上部分是用一个无子节点的 SPAN 标签实现的（如下图）：

那么问题出现了：
由于它是无子节点的，
因此它被 Firebug “误认为”是一个自闭合标签。

在实时编辑代码时问题亦然（如上图）。
而事实上 Firebug 遵循的 XML 标准，
这样处理是完全没有问题的。

无子节点的 SPAN 标签是否存在“语义问题”将不是本次讨论的重点，
毕竟我们还处于比较落后的兼容时代，
平时难免会遇到类似的麻烦。
特别是前端工程师将 Demo 页面完成交付开发工程师来拼装模板时，
如果开发工程师使用 Firebug 来复制代码，
那么在 IE 下将由于“SPAN 标签未被闭合”而发生错位（如下图）：

[...]

分享一段用于分解 URL 的正则表达式

Chappell.Wat — Sat, 02 Jan 2010 22:46:52 +0800

PHP 有一个名为 parse_url 的函数，
其方便之处我就不多置喙了，
总之，
使用它可以将一个形如

http://user:pass@quchao.com:80/about-me/?t=100102#hash

的 URL 分解并返回这样一个数组：


Array

(

    [scheme] => http

    [host] => hostname

    [user] => username

    [pass] => password

    [path] => /path

    [query] => arg=value

    [fragment] => anchor

)

而当 F2E 们越来越多地编写与异步、分页和浏览历史等功能相关脚本时，
频繁地操作 URL 就成了一件恼人的事情。
于是不才模仿 parse_url 编写了一段正则来完成这个功能：


^(?<scheme>[^:]+):\/\/(?:(?<username>[^:@]+):?(?<password>[^@]*)@)?(?:(?<hostname>[^/?#:]+):?(?<port>\d*))(?<path>[^?#]*)(?:\?(?<query>[^#]+))?(?:#(?<fragment>.+))?$

令人惋惜的是 Javascript 的正则引擎还不支持自定义分组名，
也不支持大多数的非捕获分组，
因此在 JS 里使用需要“精简”成这样：


'http://user:pass@quchao.com:80/about-me/?t=091226#test'

.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+))?(?:#(.+))?$/);

当然，
分解出来的各部分顺序与原函数还不尽相同，
必要时大家可以另外封装一层来使用。

最后照例上图：
（虾米，这玩意儿也有图？！）

p.s. 我记得有个可以图形化显示正则匹配过程的网站，
相当地有趣，
~~敬请各位留言告知。~~
已经找到，
地址是：http://osteele.com/tools/reanimator/，
可惜功能还不是很强……

完善 TBCompressor 对 CSS 文件的压缩过程

Chappell.Wat — Thu, 26 Nov 2009 23:45:43 +0800

玉伯同学近期发布了 Closure Compiler 和 YUI Compressor 的右键菜单插件，
而之前基于 YUI Compressor 的同类型工具被称为“TBCompressor”，
（为了区别真正的 YUI Compressor 我用了本文的标题）
一直以来大家伙儿都用这个组合来压缩 JS 和 CSS 文件，
基本上没有什么问题——
除了作者在 compressor.cmd 中所注释的这种情况：
“对于 css 文件，只有（略），情况很少，手工处理”。

那么这次的完善就是针对上述情况而作，
将以前需要手工完成的内容继续交由 cmd 来处理。

请编辑 compressor.cmd 并找到如下代码：


if "%~x1" == ".js" (

    copy /y "%RESULT_FILE%" "%RESULT_FILE%.swp" > nul

    "%JAVA_HOME%\bin\native2ascii.exe" -encoding GB18030 "%RESULT_FILE%.tmp" "%RESULT_FILE%"

    del /q "%RESULT_FILE%.tmp"

)

替换为：


copy /y "%RESULT_FILE%" "%RESULT_FILE%.tmp" > nul

"%JAVA_HOME%\bin\native2ascii.exe" -encoding GB18030 "%RESULT_FILE%.tmp" "%RESULT_FILE%"

del /q "%RESULT_FILE%.tmp"



REM 5. 对于 css 文件，替换 \uxxxx 为 \xxxx by quchao

if "%~x1" == ".css" (

    SETLOCAL ENABLEDELAYEDEXPANSION

    FOR /f "delims=" %%u IN ('more /s "%RESULT_FILE%"') DO (IF %%u NEQ "" SET "u=%%u" & SET "u=!u:\u=\!" & >>U ECHO,!u!)

    SETLOCAL DISABLEDELAYEDEXPANSION

    MOVE U "%RESULT_FILE%"

)

以上代码基于 YUI Compressor 的右键菜单插件，
事实上修改方法同样适用于 TBCompressor ，
~~明早我将知会玉伯。~~
已知会他，
他选择使用一个软件来实现替换过程，
最终效果一样，
那么大伙儿自行选择吧。

比较懒的同学可以直接下载不才修改后的版本：
DropBox 下载：compressor.cmd
下载后直接覆盖同名文件即可。

[UserScript] Web Assets Detector 1.4.4

Chappell.Wat — Thu, 12 Nov 2009 23:30:03 +0800

【最近更新】
改用 Canvas 来绘制图标，
另外增加了对 FlowPlayer、LongBoo、UIZE 和 Scripty2 的探测支持，
当然啦，
还有近期最吸引眼球的 Closure Library 。
Google 真是慷慨，
不仅是 Library ，
其它的“编译”和调试等配套工具也一并提供下载了，
在此膜拜一下。

============ 分割线 ==============
【090920 更新】
本脚本的首席贡献者兼热心粉丝 Jerone 君再次提出了宝贵意见，
他希望本脚本能支持被延迟载入的脚本，
由于这类脚本的加载都发生于 Dom 树完成之后，
于是我增加了对 DOMNodeInserted 的监听来搞掂该需求。
该版本非必要更新，
但依旧推荐各位跟进。

【090906 更新】
脚本越来越大，
自身的数据管理就成了问题，
这次的更新主要是把样式和数据从核心脚本里剥离了出来，
脚本也从 28.8k 缩减至 1.9k （当然没有计算样式和数据部分）。
这样的改动有利于我对数据进行维护，
以后还将考虑将数据单独分发以实现静默更新。
这次就暂不提供这样的功能了，
改革要慢慢的来。
该版本建议所有用户更新。

【090520 更新】
心里想着“这个脚本应该也能用来探测 CSS 库”，
于是就尝试着写出来了，
用的是 Xpath，
效率上应该还不错。
其它的改进还包括美化了 UI，
应该不会有人抱怨说鼠标上移后看不清文字了吧？
关于识别范围我还想说一句：
不想让这个脚本变成臃肿的东西，
（事实上目前 icon 数据已经有很大一段了）
希望支持的只是应用较广的框架和库，
否则探测也没什么意义。
在我自己看来本身也就是个玩意儿而已。

【090401 更新】
今天要分享的是名为 JavaScript Library Detector 的油猴脚本。
（已更名为：Web Assets Dectector）
虽然已经有非常多的同类产品，如
「Library Detector」和「WTFramework」。
特别要提的是「WTFramework」，
虽然名字有涉嫌粗口，
但其 70+ 库/框架的覆盖率可不是盖的。

不过我这玩意儿的优点还在于处理了库/框架之间的依赖关系。
（貌似也仅次一项？）
就跟某人所说一样，
这是个体力活儿，
真要有精力应该写个扩展探测整个网站的环境：
从服务器签名到物理地址，
从 Alexa 排名到 PageRank 再到 SEO 分析结果，
要不要最后再公开站长的三围？
所以还是见好就收吧。

【目前该脚本所支持的库/框架】

[...]

[090806] Fiddler Switch 1.5 - Firefox Extension

Chappell.Wat — Thu, 06 Aug 2009 23:46:03 +0800

[最近更新]

修正初次化后的首次点击无法正常启动 Fiddler 的缺陷，
并针对 Firefox 3.5 后一些组件的改动进行更新，
可支持目前最新的 Firefox 3.6a1pre 。

最近接连发了很多 Mozilla 向的东西，
不知有没有吓到大家。
打铁要趁热，
今天我又带来一款 Firefox 扩展，
名曰“Fiddler Switch”。

做前端开发的朋友应该对 Fiddler 不陌生，
而不做前端的似乎又很少能够用到它，
所以对于 Fiddler 我这里就不多做介绍了，
实在不了解的可以稍微 Google 一下。

那么该扩展的功用就是在 Firefox 状态栏添加一个开关，
点击它便可以自动启动或关闭 Fiddler 。

你可能觉得这是一个相当简单的过程。
诚然！
有很多方法能让你一键启动程序，
但由于 Fiddler 对 HTTP 的监控是以 Proxy 的方式，
而 Fiddler 仅能为 IE 自动切换代理，
所以对于使用 Firefox 的朋友，
频繁地去更改代理设置，
不要太麻烦哟~
（当然你可以将 fiddler 端口写进 pac ）

本扩展的出现将解决前端开发者的这一烦恼（-__-），
前端工程师们：
如果你想在 6:00 PM 整点下班，
请义无反顾的安装吧！

介绍完毕，
提供下载：

[...]

修复 Thunderbird 内置的“附件提醒”功能

Chappell.Wat — Mon, 20 Jul 2009 12:41:24 +0800

大概从 Thunderbird 3 的某个 beta 版本开始，
“附件提醒 (Attachment Reminder)” 就成为其内置的一项功能了。
而在此之前，
是需要安装一些扩展才能获得相应功能的。

然而这个新功能并不尽如人意，
首先它不对标题栏进行检查；
其次其检查关键字的效率并不令人满意；
当然最严重的是：
它并不支持中文。
（应该说是非 ANSI 字符）
这种 bug 这应该算 Mozilla 系列的诟病了。
可能由于 Thunderbird 3 的装机量着实不高，
我在 Bugzilla 中没有搜寻到相关的缺陷报告。

既然没有，
咱们就自己动手修。
“说时迟，那时快”，
当你们看到本文的时候，
其实我已经完成 bugfix 了。
在此特别感谢 SpriteVan 君充当了小白鼠。

可能有的观众才刚刚打开电梯，
还不知道 Thunderbird 3 内置的附件提醒功能究竟如何使用，
下面就请容我置喙一下，
向大家介绍该功能的使用方法：

[...]

米高，请沿着月光之路走好。

Chappell.Wat — Fri, 26 Jun 2009 09:38:11 +0800

近来我很少发表技术外的日志，

但今天绝对是例外。

看到米高去世的消息倍感震惊，

心情难以言表，

发文以缅怀，

祝他一路走好。

一个时代的结束！

Firefox 下动态插入 CSS 多行文本……

Chappell.Wat — Tue, 28 Apr 2009 22:40:09 +0800

不多介绍，
明白人儿都知道我的意思。
其实也可以说是动态插入样式单的标签。

首先，
对于 Content 级的脚本，
我们可以这么写：


(document.getElementsByTagName('head')[0] || document.documentElement)

    .appendChild(document.createElement('style'))

    .appendChild(document.createTextNode((<quchao><![CDATA[

        /* Multi-line CSS Text Goes Here; from QuChao.com */

]]></quchao>).toString()));

值得注意的是 Firefox 虽然支持 CDATA 文本，
但在使用时要小 hack 一下。
该方法可以用于 GreaseMoneky 等执行于 Content 级别的脚本里，
当然 Web 里也没有问题啦。

其次，
对于 Chrome 级别的脚本，
我建议这么写：

[...]

[UserChrome.JS] Show as HTML Temporarily for Thunderbird 3

Chappell.Wat — Mon, 23 Mar 2009 02:35:54 +0800

【090716 更新】
v1.1: 兼容 3.1a1pre。

最近有种想把自用脚本整理并分享出来的冲动，
因为扩展这种东西实在太麻烦了，
远不如一个脚本来得痛快。
但 UserChrome.JS 脚本相对于扩展来说数量又太少，
很多功能必须靠自己动手写，
所以，
期待更多的朋友加入这一行列。

如果你还没听说过 UserChrome.JS ，
那么我建议你阅读这些个帖子入门先，
引用之前某次我在部门分享中用来介绍它的话：
UserChrome.JS 是 Chrome 层的 GreaseMonkey，
是 Firefox Extension 的简单形式。
本文主旨是分享昨天写的一个脚本，
之后的分享将不再对它做介绍。
（但或许会考虑另撰一文来介绍
我自定义 FireFox 和 Thunderbird 的经验）

========== 正文开始 =============

Thunderbird 用户本来就少，
Thunderbird 3 的用户应该就更少了，
而使 UserChrome.js 来自定义 Thunderbird 的用户怕是少上加少，
很不幸，
我就是其中那个很装 13 的之一。

今天要给大家分享的是名为 Show as HTML Temporarily 的脚本，
一些 Thunderbird 用户会想到 Allow HTML Temp，
没错，
功用一样，
但该扩展目前尚不能很好支持 Thunderbird 最新的 XUL 结构，
我所习惯的位于 Mail Header Bar 的按钮已然失效，
每次想要激活 HTML 功能鼠标要跑很远，
既然我最想要的功能已经没了，
我毫不犹豫的卸了它，
“没有了咱就自己写”。

邮件头这一块的 XUL 结构变过数次，
直接导致我前几次的脚本失效，
所以今天提供的脚本仅能适用于最新的 Thunderbird 3 的 Nightly 版本。
（还在使用旧版本的童鞋也请赶快跟进吧）

在使用之前你还得弄清你所设置的默认显示邮件的格式，
如果你已经默认选中以原始 HTML 方式查看邮件，
我想你根本用不着类似的扩展或脚本了。
（综合考虑安全和实用性，
我建议还是选择 Simple HTML）

确认这一点之后，
请加载该脚本，
它会在你的 Mail Header Bar 上增加一个名为 Show as HTML 的按钮，
阅读 HTML 格式的邮件时遇到需要加载线上图片的情况，
点击一下就能“暂时地”以原始 HTML 的格式显示该邮件，
一来节省下不必要的流量，
二来也比默认全部加载要安全得多。

以上周的译言快讯为例，
这是治疗前：

点击后：
疗效不错嘛……

顺便提一下，
Picasa 的外链相当好用；
而 Yupoo 已成明日黄花，
把免费用户当猴耍，
可叹。

【更新日志】
[090323] v1.0: 初始发布；
[090716] v1.1: 兼容 3.1a1pre。

【提供下载】
http://watsilla.googlecode.com/svn/trunk/userchrome.js/thunderbird/show_as_html_temporarily/show_as_html_temporarily.uc.js