The WebKit Monoculture

曾经有一个IE Monoculture,其他浏览器为了能让网站兼容自己(实际上是兼容的,只不过被User-Agent Sniffing给挡住了),不得不给特定网站提交虚假的User-Agent。

那个时代在Chrome与Firefox等等现代化浏览器的夹击下消失了。

今天我们迎来了新的WebKit Monoculture,它存在于移动浏览器领域——由于最大的两个移动OS系统均默认使用WebKit渲染,导致开发者又开始制作仅支持WebKit的网站。

更糟糕的是,由于iOS是移动网站开发者的主要测试对象,而它不允许WebKit渲染核心以外的浏览器,导致不少网站又回到上世纪的User-Agent Sniffing,仅允许WebKit浏览器访问移动版,将Firefox Mobile/Internet Explorer 10等浏览器拒之门外。

结果是,本在移动平台上独当一面的Opera不得不转投WebKit引擎以存活(并大幅度裁员)。而Mozilla最新发布的Firefox OS,不得不独立保存一个巨大的UA欺骗列表……

没错,我们又回到了向网站提交虚假User-Agent的时代,即便标准早已存在,即便WebKit根本不是统一的游览器乃至渲染系统

The WebKit Monoculture,或者说iOS Monoculture,将是2013年最让人担忧的阴影之一。

让我们拭目以待。

(顺便一提,2d.AM v3将在3月初发布。我们相信它能把移动浏览器的最大优势发挥出来,不管你用的是哪一款。)

Opera与输入法(IME)的小故事

Firefox在输入法(IME)下的行为曾经让不少开发者烦恼,它和IE与Chrome的主要区别是,后两者在IME输入时都会触发keyup事件,而Firefox在完成时才会触发keyup事件。后来Firefox与IE、Chrome都实现了DOM Level 3里的Composition Event,有了类似compositionupdate的更新事件,于是也就没了支持上的问题(Mozilla也拒绝了来自开发者对keyup事件触发行为更改的请求,转为推荐使用Composition Event)。

Continue reading “Opera与输入法(IME)的小故事”

Opera 10

opera10

以前参加Opera的讲座就有这种感觉,他们知道如何迎合用户群,而不是按照自己的想法把最新最酷的技术都打包成一个浏览器(尽管他们在Web应用支持上颇为激进)。这并不妨碍Opera 10成为先进的浏览器,ACID3满分,Turbe加速,都是Opera 10炫耀的资本。

Opera PC接下来的任务明显是Unite,但个人还是希望他们把Opera的网页兼容性再提高一些,以及改改他们那个不稳定的JS引擎。另外,Firefox与Opera下的文字行高似乎也不太一样……

opera10-1

opera10-2

玩玩浏览器

003

004

在痛苦的升级完Chrome与Safari之后(你该知道不安原厂设定安装是多么麻烦……),我专门测试了下这两只进入稳定版的浏览器。Chrome 2.0貌似内存占用大大减少了,其实只是他们更新了内存管理页的显示方式(把Flash插件分开计算当然少占很多内存……);然后是Safari 4,他们总算把Flash插件的问题解决了,虽然占用内存比较多,但经过土豆与新浪的折磨还能回到100M以下,说明在乔布斯回老家的时候,他们还是稍微考虑了下那17位Safari Win版用户的心情。

测试发现的神奇情况包括:土豆网的设计让Opera内存溢出,在关闭标签页之后仍保持100M以上;以及Safari在留言回复的textarea里总显示小一号字体,尽管Inspector里摆明是12px,他却偏要渲染成10px。

这年头,不管你爱用多标准多小众的浏览器,最后还是得常备5-6种主流浏览器以防万一……

谷歌浏览器战群雄 Google Chrome Showdown

google chrome

既然客栈已给IE7,Firefox 2/3,Opera 9和Safari for Windows等等浏览器做过评测,支持平等机会的我们没理由放过Google Chrome,这款10岁网络霸主的新beta产品。为增加娱乐性,我们决定通过各浏览器亲卫队最喜欢也最鄙视的大乱斗解决:Google Chrome 0.2 vs Firefox 3.0.1 vs Internet Explorer 7 vs Opera 9.52 vs Safari 3.1.2 for Windows!高潮迭起,请勿错过!1)

回归正题,相信浏览器爱好者们已经非常清楚几位老选手的底细了,这里只介绍新人“股沟鸽”的内涵配置。

Google Chrome (ver0.2.149.27)

  • 页面渲染引擎:WebKit/525.13(Safari 3.1.2使用WebKit/525.21)

  • 图像渲染引擎:Skia(Google自行开发,还缺乏部分功能,例如text-shadow和border-radius)2)

  • Javascript引擎:V8(Google自行研发,适合运行结构性强的JS代码) 3)

FF,IE,Opera和Safari的支持者,看清楚对手的嘴脸了吗?让我们进入第一个环节。

Continue reading “谷歌浏览器战群雄 Google Chrome Showdown”

Opera 9.x 网页简体中文显示错误临时解决之道

(首先要说的是本文只针对网页设计者和Opera使用者而写,无关者请无视,不要主动弹出来喊“用什么浏览器的飘”,我会让你的留言一起飘到数据库地狱去。)

before

接下来谈谈店长这个小发现,自从Opera 9发布以来店长就一直被它奇怪的中文渲染所困扰,字体大小不一,比重也变化多端(见上图),无论使用页面CSS进行怎样的定义,始终没办法改变它的渲染行为。无奈之下只得放弃Opera,换用Firefox。如今FF早已经成为我的首选,但Opera的问题依旧困扰着我。

直到我发现了这个页面

症状描述:Opera 9.x在使用简体中文的系统上(Windows和Linux)渲染中文字体时字符集选择错误,准确的说,是将简体中文用繁体字符集渲染。

影响范围:部分简体中文系统,平台不限;出现问题的页面编码为utf-8;Opera 9.2系列(当前稳定版本)均有可能出现此问题,9.5开发版我没有测试。

解决办法

这里分为两个部分谈,首先说网页设计者怎样绕过这个问题

之前提供的链接也解释了,Opera之所以会选择和CSS内设定font-family不同的字符集是因为国际化(i18n)的需求,浏览器在页面没有设定特定语言(lang属性,几乎可用在任何html元素上)的会自行决定字符集,这个决定无法通过CSS更改。

要让Opera分辨简体字和繁体字也简单,在html元素上添加lang属性即可,用"zh-hans"作为值,按照W3C说法这比zh_CN的更受认可;如果是XML文档可以顺便加入xml:lang="zh-hans",以免Opera的检查过于严格,两者都符合(X)HTML标准,可并存。

如果你只想页面上部分元素使用简体字渲染,也请参考之前的链接,里面有详细的HTML+CSS范例。

解决了设计者的困挠,用户又该如何让Opera正确渲染没有加入lang属性的页面呢?

User Javascript,Opera很早就支持类似Firefox上Greasemonkey的自定义JS功能,它的设定在工具->首选项->高级->内容的栏目下,设定一个文件夹,Opera会读取里面所有的.js文件。我们只要写一个简单的JS来实现为没有lang属性的页面增加正确属性即可,以下实际代码。

// ==UserScript==
// @include http://www.google.cn/*
// ==/UserScript==
document.addEventListener(
'load',
function () {
var lang = document.getElementsByTagName("html")[0].getAttribute("lang");
if(!lang) {
document.getElementsByTagName("html")[0].setAttribute("lang","zh-hans");
}
},
false
);

用过Greasemonkey的同学应该很熟悉这个设计了,我稍微解释一下,顶部注释部分负责限制代码运行的域名,在这里我限制了代码在google.com的域名下才运行(白名单)。

Opera提供了自设的几个强大的Event Listener,但这里我们只要用Javascript DOM的即可,默认设定是在页面读取完毕之后添加lang属性,也就是字体会在页面读取完毕后修正。肯定有更好的做法,但本人JS水平有限,想不到更快更准Fire的方式,有熟练者请赐教。另外input元素的中文字体无论使用哪种方式还是不变,不知道是不是bug,对与我这类开发者来说这已经不是问题了。

最后顺便一提,如果你要在HTTPS这种加密页面内用User Javascript(例如Google Reader),opera:config内User JavaScript on HTTPS的选项必须打开,默认是关闭的。

after

这样一来Opera 9.x在简体Windows上老难题也解决(大半)了,浏览器公国的再度恢复平静。其实Linux上也可用同样的伎俩,只不过它们有更快捷的办法——env lang=zh_CN。

更新:Opera:Config里Force Encoding也是非常重要的值,设置成AUTODETECT-ZH应该可以;店长的设置不知道为什么变成AUTODETECT-JP了,至此input元素的显示问题也解决。我建议有同样问题的旅客先检查你的Force Encoding和首选项里的字体设定(菜单中文显示可以通过设置字体为宋体解决),然后看查看栏目里的用户自定义风格是否无意中启动了(Opera可以覆盖页面CSS),最后再考虑用上诉的解决办法;网页开发者则可在页面里加入lang属性,方便浏览器更好的语言支持。

最后冲刺:客栈24小时主题更新预告。

更新:已经到达体能极限,成功完成IE7,FF2,Opera9的试调,估计Safari也能正常显示。IE6在使用standalone的情况下勉强整理到能用能看的地步,果然从上个自制主题Anime Connection迁移到这个Byte World绝非易事,IE6的功能障碍和它在中国大陆的占有率让开发新主题成为一种折磨……

如果你使用IE6,或者是任何对应的IE shell,例如世界之窗,Maxthon,Greenbrowser等等,请逛一逛新设计,有什么影响阅读的问题请报告。

来客栈的Safari用户比较少(当然我们也不是苹果的fans),如果有看到本文的也请帮忙检查下各类功能。

update01.jpg

主题以大致完成,现在进入排除bug的时光

主题更新告一段落,更多功能今后有时间再加入,至于IE6,它再不死我们只能专门为它制订全套CSS了。