浏览器的特征探测

作者:屈超(Chappell.Wat) 发布时间:August 13, 2010 分类:程式::五代

【2010.08.13 更新】
增强了 IE6 的区分能力。
当然更可以使用 IE 自己的条件编译,
只是有的压缩器支持度有限,
不便于日常开发。

【2010.04.18 更新】
更加严格地区分出了 IE 9,
增强了 Opera 的区分能力,
并将 Chrome 的判别特征换成了引擎特性 [via],
这样你就能看出国内哪些浏览器是从 Chrome 的内核改过来的了,
大家可以动手试试。 :)

【2010.04.17 更新】
IE 9 在我看来改进非常大:
有我所关心的对 Mutation Events 的支持,
还有事件模型的 W3C 化等等……
本文中我就不多冗述,
有机会再另文探讨。
由于在项目中大量使用特征判断,
IE 9 在这方面最显著的变化是:
之前那则“最短的 IE 判断法”已经失效,
一起被修复的还有一直伴随 IE 的数组 Bug:
非空数组字面量的最后一个元素缺失的问题(即:[null,]),
因此现如今的最短记录保持者(6字节的 !-[1,])也已然失效。(而且不支持 CC 压缩)
你也不要尝试使用 addEventListener 方法来判别,
因为 IE 9 已经支持了。(事件的改进非常大,这很好)
所以说 IE 已经越来越靠近标准,
如果在项目中有对 IE 进行特殊处理的代码,
你可能需要在 IE9下重新检查一下了。

由于我个人依旧是 XP 的忠实拥趸,
而 XP 又很悲剧地无法安装 IE 9,
所以一些测试是在 Haitao Jia 同学的协助下完成,
在此表示感谢。
也正因为如此,
我没有进行覆盖面太广的测试。
不过目前所发现的唯一“幸存”下来的 IE 系列 Bug 依旧与刚提到的数组 Bug 有关,
微软修复了字面量里的 Bug 却忘了当字符串被 split 成数组后却涛声依旧啊。
虽然判断起来稍微麻烦了点,
但不管怎样这是我目前发现的仅剩不多地可以用来判断 IE 全系列的代码:

阅读剩余部分...

YUI 全系列 Dom/Node 组件 getXY 方法的一个 Bug

作者:屈超(Chappell.Wat) 发布时间:April 28, 2010 分类:程式::五代

因工作关系我已有些时日没用 YUI 写代码了,
这次由于项目需要我阅读了一些脚本库的代码,
无意间发现了这个 YUI 里 (Dom || Node).getXY() 的小 Bug。
查看了手边的 YUI 2 和 3 的多个版本代码,
均存在此问题。(怀疑其影响全系列)
时间不多,
抽睡前的一点时间写下来吧。

问题描述如下:
当浏览器不支持 node.getBoundingClientRect() 方法时,
我们会选择通过 offset 系列属性一层层向上计算偏移值,
最后得到一个“可能有错误的”元素坐标。
要修正这个错误,
我们需要沿着节点树一层层向上判断是否某个祖先“出现”了滚动条,
如果有,对不起,阉了。

大体的思路是这样没错,
YUI 也确实这样处理了,
而且它也知道元素定位方式中还有一种游离于布局之外的 fixed,
只可惜它没在碰到 fixed 元素时及时刹车,
结果就是在一种较特殊的布局下会多删一次滚动条高/宽度,
导致坐标计算错误。
可叹可叹,
它曾那么接近幸福。

所以当某个有滚动条的页面里存在一个 fixed 定位的元素,
而你又要用 YUI 去取该元素所包含的某个子元素的坐标时,
Bug 就出现了。
文字描述显然不够直观,
请猛击如下链接来查看不才基于 YUI2YUI3 所构建的示例。
(由于该 Bug 只影响不支持 node.getBoundingClientRect() 的浏览器,
请选用诸如 Firefox 2 / Chrome 1 / Safari 3 等浏览器来打开示例,
顺便在这里感谢 IE 团队为我们贡献了如此好用的一个方法)

阅读剩余部分...

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

作者:屈超(Chappell.Wat) 发布时间:January 21, 2010 分类:程式::五代

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

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

请打开淘宝网首页,
Firebug 查看“公告栏”区域的圆角区域(如下图),

淘宝网“公告栏”圆角

圆角的右上部分是用一个无子节点的 SPAN 标签实现的(如下图):

a blank non-self-closing tag issue of firebug - source viewing

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

a blank non-self-closing tag issue of firebug - source editing

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

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

阅读剩余部分...

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

作者:屈超(Chappell.Wat) 发布时间:July 20, 2009 分类:程式::五代

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

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

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

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

阅读剩余部分...

[090219] 为 Firebug 修复外部编辑器的乱码 Bug……

作者:屈超(Chappell.Wat) 发布时间:February 19, 2009 分类:程式::五代

【最近更新】

同步更新至 1.3.2 版,
并增加供 Firefox 3.1+ 使用的1.4.0a12 版本。

如果你看过我的上一篇文章……
应该已经了解我要解决的这个 Bug 究竟是怎么一回事儿……

很不幸 FirefoxFirebug 都有类似 Bug ……
也即在外部编辑器中查看网页 HTML 源码的乱码问题……
该 Bug 在 Firebug 的历代版本中均存在……
除了 Windows 我也在 Mac 版上发现了该 Bug ……

但与 Firefox 本身的问题不同……(见我前一篇文章
Firebug 采取的另外一种方式来处理……
但显然也没能够逃脱产生乱码的“厄运”……

Bug 具体的描述如下……
如果你通过 Firebug 的菜单命令配置过外部编辑器……
(Tools -> Firebug -> Open With Editor -> Configure Editors)
那么配置完毕后将在你的右键上下文菜单中显示 Open With Editor 命令组……(如下图)

Open with editor in Firebug

通过这个命令组……
你可以选择不同的编辑器对当前的网页源码进行查看和编辑……
确实非常便捷……
但是……
当你想用 Firebug 的这一功能查看任何包含有非 ASCII 字符的网页时……
你则可能遇到下面两种问题……

第一种……
当你想要查看任何包含非 ASCII 字符的线上页面源码时……
你可以正常打开它……(因为 Firebug 用 ascii 字符命名 tmp 文件)
但你看到的内容将是存在乱码的……(如下图)

Encoding bugs with viewing online source file in firebug

第二种……
当你把一个文件名中包含非 ASCII 字符的文件拖进 Firefox ……
并想要查看其源码时……
你的编辑器却连文件都无法打开……(如下图)

Bug with viewing local source file in Firebug

研究 Firebug 源码后得知……
对于第一种情况……
是由于 Firebug 没有对 Unicode 的源码进行转码所致……
而第二种情况……
则是因为 Firebug 在向编辑器发送命令行参数时没有对文件名进行转码……
(如果你还想追问我为何 Firebug 的源码面板没有乱码……
我可以顺便告诉你:因为这些流程都在 Firefox 内部……)

知道了造成 Bug 的原因……
我们就可以操刀开始解决了……

对于第一种情况……
只需要将其转为 UTF-8 编码即可……
打开 profile\extensions\firebug@software.joehewitt.com\content\firebug\firebug.js 文件……
搜索:

temporaryFiles.push(file.path);

在其下方添加代码:

// Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 start
data = convertFromUnicode('UTF-8', data);
// Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 end

对于第二种情况……
则稍微复杂一点……
因为通过命令行发送参数到系统时需要根据系统的 non-unicode 默认编码来转码……
(由于条件所限我这里仅针对 Windows 进行修改)
比如我虽然使用英文系统……
但是为了完美支持中文我将字符集改成了 936 ……
那么我就需要将那个“乱码”文件名转为 GB2312 或 GBK……
其它语言的用户请按情况修改……(如果你看得懂的话)
同样是打开 profile\extensions\firebug@software.joehewitt.com\content\firebug\firebug.js ……
搜索:

args.push(localFile);

在其下方添加代码:

// Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 start
if ('WINNT' === getPlatformName()) {
localFile = convertFromUnicode('GB2312', localFile);
}
// Hacked by Chappell.Wat @ QuChao.com on 2008-10-14 end

这样就大功告成了……
自动判断系统 non-unicode 默认编码的方法我已经找到……
有待我测试后更新……
在此之前请各位还是手动修改吧……
@081015 更新:
我今天测试的时候发现……
某些情况下 Firebug 的代码并不能完全处理 UTF8 的 BOM 头……
所以我们再写一段代码来自己清除它……
打开 profile\extensions\firebug@software.joehewitt.com\content\firebug\lib.js ……
搜索:

var segments = [];

在其下方添加代码:

// Hacked by Chappell.Wat @ QuChao.com on 2008-10-15 start
var fileLen = stream.available();
if ('UTF-8' === charset && fileLen > 3) {
var bom = sis.readBytes(3);
if (String.fromCharCode(239, 187, 191) !== bom) {
segments.push(bom);
}
}
// Hacked by Chappell.Wat @ QuChao.com on 2008-10-15 end

不过这样做是否会有什么副作用我暂时还不知道……
是否修改就看你个人选择了……

最后……
为懒人们提供修改完成的版本……(v1.2.1)
不堪乱码困扰的你一定要下载……
Bug 我也会提交到Firebug 的官方讨论组……
希望以后不用劳烦我们自己修改就能避开这种恼人的问题……

【更新记录】

[081015]:  提供 1.2.1 版本;
[090219]: 更新至 1.3.2 版,并增加供 Firefox 3.1+ 使用的1.4.0a12 版本;

【下载链接】

Firebug v1.3.2 for Firefox 3.1-:
国外: http://www.quchao.com/projects/mozilla/firefox/extension/firebug-1.3.2-fx_fixed_by_quchao.xpi
国内: http://vip.yyjoy.com/chappell/mozilla/firefox/extension/firebug-1.3.2-fx_fixed_by_quchao.xpi

Firebug v1.4.0a12 for Firefox 3.1+:
国外: http://www.quchao.com/projects/mozilla/firefox/extension/firebug-1.4.0a12_fixed_by_quchao.xpi
国内: http://vip.yyjoy.com/chappell/mozilla/firefox/extension/firebug-1.4.0a12_fixed_by_quchao.xpi