IE9如何减轻网页前端工程师负担

作为一名网页前端工程师，无论你是对IE9充满期待，还是继续保持反对，它都在全球引起来一股IE9热，很多前端工程师都在讨论IE9以及对标准的支持。虽然目前IE9还没有全面的支持HTML5标准（不全面支持的原因），但已让大家减轻了不少的负担。

当一个网页前端工程师面对 IE9 时，他可以抛开多少 IE hacks（当然，不可能是 100%），以下我就针对几项比较常被提及的 IE hacks 来作讨论（如果您有更多的看法，欢迎留言指教）。

HTML5 的新标签 (IE8+)

其实从 IE8 开始便支持了像是 <header>、<footer>、<nav>、<section> 等等在 HTML5 规格书（草案）里定义的新标签，如果你想让你的网页在 HTML 标签上就具有良好的语意（搜寻引擎最佳化也会建议您这么做），那么现在就可以直接使用这样的标签来制作网页。

<canvas> 标签

以往想要在网页上产生一个 2D（或 3D）的图案，除非是利用 server 产生图片，不然就是得藉由其它 plugins 来解决（主流就是 Flash）。举例来说，若是要在页面上根据一些数据画出图表（chart），在目前多数的网页上都是利用这两个方式来完成（即便你使用了 Google Chart Tools 也一样通过这两种方式产生）。而在 IE9 之后，IE 也有了<canvas> 标签，这便提供了网页前端工程师利用 JavaScript 在 <canvas> 标签上绘制 2D/3D 的图形，不必假借其它的 plugins。

向量图形（SVG）支持

SVG 是一种用 XML 来描述图形的语言，这种图形的好处是可以任意地缩放，甚至还可以内嵌 JavaScript 来作到动态的效果。或是用来作为 CSS 的背景图等等。举例来说，CSS3 虽然有一个关于渐层色彩（gradients）的模组，但是目前只有 WebKit/Gecko 核心的浏览器有支持（语法还不太一样），而在支持 SVG 的浏览器上，便可以利用 SVG 来产生渐层。所以说 SVG 的应用层面是相当广泛的。

<video> 及 <audio> 标签

试想，若是要在网页上嵌入一张图片（gif, jpg 或 png），只需要利用 <img> 这个标签就可以完成，那是因为浏览器内建了这些影像文件的解码器，所以不必靠其它的 plugins 就能完成内嵌的工作。

而影音的部份就没有那么快乐了，一直以来要在网页上呈现影片或声音，都得仰赖著 Flash Player 或 Windows Media Player 的 plugins 来嵌入影音（其中又以 Flash 最为流行，因为几乎大部份的电脑系统都会安装）。这样一来，如果网页前端工程师想在页面上对某个内嵌的影音做处理，那还得另外去修改（甚至要先学习）plugin 的内容，这样的负担及开发成本实在是不轻。

在 IE9 导入 <video> 及 <audio> 标签之后，总算是赶上一些先进浏览器，也使得网页前端工程师几乎也能像内嵌图片一样，只需要用一个标签就能嵌入影片，甚至还能利用 CSS/JavaScript 来改变、控制它呈现的方式。

比较麻烦的就是目前各家浏览器所内建的影音解码器不尽相同（因为专利的问题），以影片来说大致上可以归纳成两种文件、压缩格式：

mp4 文件；h.264 压缩格式
Safari（及其家族：iPhone/iPad 上的 Mobile Safari）、Chrome 及 IE9 支持
webm 文件；vp8 压缩格式
Chrome、Firefox 4、Opera 10.6 支持（IE9 宣称若使用者电脑有安装 codec 即支持）

不过还好 <video> 标签提供了让浏览器选择支持的文件来播放的语法，像是这样：

...
<video width="320" height="180" poster="movie.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
</video>

完整的 CSS3 选择器（Selector）及 document.querySelector

使用过 jQuery 这个 JavaScript library 作开发的网页前端工程师一定都体会过 CSS3 的选择器有多好用，现在在 IE9 的对于 CSS 的支持也逐渐往 CSS3 的各模组来挺进。除了可以在 CSS 文件中撰写 CSS3 选择器的语法，像是：

#item > item:first-child { .... }
:tree-node:nth-child(2) { .... }
input[type=check]:checked { .... }

之外，从 IE8 之后也可以在写 JavaScript 而想要取得 DOM 物件时，利用 document.querySelector / document.querySelectorAll 来像 jQuery 一样利用 CSS3 选择器来取得 DOM 物件。

CSS 的 display: inline-block (IE8+)

一个 HTML 网页上的元素，除了表格及少部份特殊的标签之外，大多数的标签在画面呈现上主要分为 inline 及 block。但是 inline 的元素无法设定 width/height，而 block 元素又一定会换行，而 inline-block 正好是一个不用换行，但又可以设定 width/height 的元素，大量减少使用 float 的机会。

CSS: 新的色彩模组

除了可以用 color name 或是 #AAAAAA 方式来表示色彩之外，IE9 也开始支持使用 rgba/hsla 等函数来描述色彩，同时也正式加入 opacity 属性的支持。

CSS: 新的背景及框线模组

IE9 开始支持多重背景图的功能，也就是能在 background-image 中填入多个图片的值，同时也支持了像是 background-clip 的属性。

而另一个等待很久的就是圆角矩形的支持，从 IE9 之后，可以直接使用 border-radius 属性（前面不用加上前置词）来做出圆角矩形的效果。

CSS Web Font 模组

其实 IE 从很早以前就开始支持这样的语法，让 designer 可以利用 CSS 指定特定的字型来显示文字，若浏览者的电脑上未安装该字型，也可以根据语法中的位置来下载字型档，这样就不必特别把文字做成图片，而造成许多不便（改变大小要重新换图等等）。

原生的 XMLHttpRequest (IE7+)

很多人刚开始接触 AJAX 这个技术时，一定都会看过不少为了 IE(6) 没有原生的 XMLHttpRequest 物件，而必须通过 ActiveXObject 来产生的程序码，其实早在 IE7 时，就已经提供了原生的 XMLHttpRequest 供 JavaScript 程序码使用，当然，在 IE9 仍然是直接拿来用。

标准的 DOM Level 2 / Level 3

IE9 之后大幅支持了 DOM Level 2 及 Level 3 的标准，除了加入许多 DOM 操作的函式（像是 getElementsByClassName 等）、属性（）之外，在事件处理方面，过去总是得为了 IE 而写出这样的程序码：

var dom = document.getElementById('foo');
if (foo.addEventListener) {
foo.addEventListener('click', onClick, false);
} else {
foo.attachEvent('onclick', onClick);
}

在 IE9 之后，event binding (unbinding) 就可以统一写成 addEventListener / removeEventListener 的标准。

结论

从目前IE9所提供的 features 來看，未来网页前端工程师要针对 IE 作的 hacks 可望大幅减少，这使得我们可以从修修补补中摆脱出来，把精力放在真正的代码编写上。

不管你喜不喜欢IE9，IE9已经来了，大型的web应用的时代也到来了，你准备好了吗？

via：ericsk