IE9 发布了,技术部,你们懂的……

前几天 IE9 Beta 发布了,在性能和对 Web 标准上有大幅提升,我快要考虑从 Firefox 再回到 IE 了,因为在 Windows 下用 IE 有很多好处,首先它是最能将大多数网站按照设计者意图显示出来的浏览器,而且它与 Windows 其他程序能比别的浏览器更无缝地工作。比方说,在 Windows 中,一个回车是由一个 r 和一个 n 连着的,而基于 UNIX 的系统是只有一个 n 。在 IE 中,一个回车就是一个 rn ,但是 Linux 出身的 Firefox 就只是一个 n ,而 Mac 出身的 Safari 也是单独一个 n (尽管 Mac OS 中应该是单独一个 r)。如果有人想测试可以下载这个网页,输入包含回车的一个字符串然后观察 ASCII 码。从 IE 中复制网页内容到剪贴板中也是最符合 Windows 习俗的,比如我可以复制一个表格,然后粘贴到 Excel 中,就是所期望的结果,但是在 Firefox 中复制再粘贴却是制表符分隔的文本。 IE 的收藏夹和链接也是与 Windows 集成的,它们甚至是可定义路径的用户文件夹。 IE 应该是用了大量 Windows 的库(DLL),而这些库广泛也被用在其他 Windows 程序中;另一方面,很多程序的部分功能也是用 IE 内核实现的。最后,我个人常用的 Windows Live Writer 和 OneNote 在 IE 中都有插件,可以方便地从 IE 中将选定的部分或整个页面输出到相应程序中。 Firefox 有一点值得一提的是 Sync 插件,它可以将个人的收藏夹、历史记录、表单数据等备份到服务器上,这样重装系统什么的就很方便。但是,既然 IE 的收藏夹是系统个人文件夹,那就可以把它设置为一个位于非系统分区的文件夹中,而且 Windows Live Sync 也可以将收藏夹同步到服务器上,但是历史记录和表单数据貌似无法备份。

介绍 IE9 前先列出两个网址:

IE9 下功夫支持了 HTML5 和 CSS3 。IE 以前的版本的性能极度受人诟病,但是 IE9 至少在 HTML5 的 <video> 和 JavaScript 操纵 <canvas> 上的性能表现十分出色。,这得益于它充分利用显卡加速。在一些 demo 中, IE9 能以最正确的方式渲染一些 CSS3 。这是一些最本质的改变,也是开发者最关心和乐于看到的。猛击这里了解更多。但是当前的 IE9 还是个 Beta 版,还有很多问题,最显著的是经常会崩溃。

我还记得初中时买的一张 Windows Me 的盗版碟上写着:“集成最新 IE5.5 永不过期”。而我对浏览器最早有概念还是大概初三时 IE6 刚出的时候。我热衷于把各个电脑都部署上 IE6 ,但它实际上有什么好处我却不太知道,那时我离网页开发还很远,只看到一些表面现象,比如下载对话框的变化、图标更漂亮一些、更整洁的工具栏、多了个“媒体”侧边栏(后来消失了)。它在当时还算是一个合格的浏览器,但微软的错误在于就把它放着不管了,一放就是5年,互联网中的5年可以发生翻天覆地的变化,但这个糟糕的浏览器顽固地占领了绝大部分市场份额,搞得开发者焦头烂额。后来的 SP 增加了一些安全特性和弹出式窗口拦截程序,但没有改进内核。

IE7 发布的时候都是我进工作室以后的事情了。有些数据表明 IE7 比 6 对标准的支持的进步微不足道,但是在实践中我感觉 IE7 有明显的改进,经常是一个页面在 IE7 、火狐、 Opera 甚至我的手机浏览器中显示都正常而唯独 IE6 不正常。

IE7 在功能上显著新增的有:更简洁的界面、标签浏览、搜索框、 RSS 订阅。注意后两者,它们是与开发相关的。具体地讲,我就是因为 IE7 新增的这两个特性对就业网进行了一些改进:首先是做了几个 RSS 源,但除此之外为了让浏览器感知到一个页面有可订阅的 RSS ,需要增加几个标签,如图所示(单击图片放大)。

当然,绝不仅是 IE 支持这个,现在感知页面的 RSS 源几乎是浏览器的标配了,甚至很多手机的浏览器也有此功能。而 Firefox 甚至更进一步,可以选择将源订阅到本地或者类似 Google Reader 这类在线服务。

而利用 OpenSearch ,也可以让浏览器的搜索框感知到当前页面可用的搜索引擎,然后添加到浏览器中。为了办到这一点,首先要把一个 XML 文件放到站点中(就业网的文件是这个 URL : http://www.dsjyw.net/common/OpenSearch.xml ),然后也是增加一个标签。效果如下图所示(单击图片放大),因为当前的 IE9 Beta 无法看出效果,所以我用火狐截的图。

IE8 在表面上新增的功能有:兼容性视图( Compatibility View )、集成的开发辅助工具、选项卡着色、隐私( InPrivate )浏览、加速器( Accelerator )和 Web Slice 。

加速器的用法是选定网页的一段文本,然后旁边就会出现一个小图标,单击它就能利用这段文本快速使用一些服务。

但在我个人使用中,这个东西意义不大。我们可以开发个自己的加速器(详情见这里),但做完之后我很怀疑有哪怕一个人会去用。

另一个就是 Web Slice ,用法是在某个网页的频繁更新的部分(比如股票、最新促销等)单独提取出来然后放到链接栏中,然后以后想访问这部分内容时直接在链接栏就可以看,有更新时浏览器还会提醒。

鼠标移到有 Web Slice 的网页部分时,会出现一个绿框。

单击那个绿色的按钮,就会出现一个对话框。

点“Add to Favorites Bar”以后,在链接栏就会多出一个这个项目。单击它就会在一个小窗口内显示这部分的最新内容,而你也无需离开当前正在浏览的页面。

为了设计 Web Slice ,只需把一些 DIV 和 SPAN 加上特定的类名就行了,如图所示(单击图片放大),详细的开发说明见这里

IE9 有一些令人惊讶的新特性,其中最值得一提的莫过于“锁定到任务栏”了。方法是:点住一个选项卡,然后往任务栏上拖,就像把普通程序锁定到任务栏那样,如下图(单击图片放大)。

锁定以后,效果类似下图(注意右边三个图标)。

从任务栏打开网页,那么浏览器按钮颜色也会变成对应的,见下图。工具栏最左边是个窗口图标,单击那个会回到这网站的主页。

更令人惊讶的是,这样锁定的网页还支持 Jump List 的自定义项目!

甚至还有 Overlay Icon (以下两幅图单击放大):

还没完, Windows 7 的任务栏新特性还差什么?对, Thumbnail !我勒个去,还真有这凶残能力啊!(单击图片放大)

我曾经试过应用这些任务栏特性进行桌面开发,费了半天劲才弄得差不多,结果现在网页就能直接定义这些了!

总的来讲,办到这些也并不难。比如为 Jump List 添加任务和自定义区域的方法就如下:添加任务是用特定的 <meta> ,而添加自定义区域及其内部的任务就是用 JavaScript 来操作 BOM 中提供的 window.external 对象(以下两幅图单击放大):

值得一提的是,在 Jump List 的自定义区域,条目是可以被用户自行删除的。而甚至可以使用 JavaScript 给添加一个事件监听函数,当用户删除这里的条目时触发该事件。

对于 Overlay Icon ,是用 JavaScript 控制的,也是作用于 window.external 对象。添加 Overlay Icon 要调用一个方法传进图标 URL 和鼠标提示两个参数,而清除图标的方法则不需要参数。

而 Thumbnail Button 也是用 JavaScript 操纵 window.external 对象实现动态增减的,其中每个按钮可以自定义图标和鼠标提示,当然,为了让它们发挥作用,还要给绑定上一个事件监听函数。

关于这部分有趣的主题的系统指南,请参见这篇文章

而关于 IE9 开发的最完善和权威的资料,请在这里找。


好吧,技术部充满激情的孩子们,你们懂的……

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s