web前端：IE 浏览器的创新

　　IE，是美国微软公司（Microsoft）推出的一款网页浏览器。截至2010年9月止，统计的数据显示IE占有率高达59.65%。虽然它依然是使用最广泛的网页浏览器，但与2003年最高时相比[1]，市场占有率逐年下降。

　　IE曾是web创新的先驱，但最近几年因为对web标准的支持落后于其他浏览器以及低版本IE的各种bug而被人诟病。雅虎的NicholasC.Zakas带我们回顾了IE在web发展过程中扮演的辉煌角色，让我们能以一个更客观的眼光来看待IE。看完这篇文章，也许大家都会对IE浏览器有一定的改观，这也是我翻译这篇文章的目的。

　　译文

　　在InternetExplorer成为大家都恨之入骨的浏览器的很久以前，它曾是整个互联网的创新驱动力。有时候我们很难记得那些在IE6成为全世界Web开发者的灾难之前IE所作的贡献。不管你信不信，正因为有了IE4~6，才会有我们现在所知的web开发。IE的一些独特的功能过去就曾是事实标准，后来成为了官方标准最终进入了HTML5规范。人们也许很难相信，对于我们现在认为理所应当的功能中有很大一部分都应该要想到IE，但快速地回顾一下历史可以让我们知道的确如此。

　　DOM

　　如果IE是一个人人都痛恨的浏览器，那么「文档对象模型」（DOM）就是人人都痛恨的API了。你可以说DOM过于繁琐、不适合Javascript甚至是有些荒谬，而且这些也都没错。然而，DOM还是给了开发者通过JavaScript来访问网页的每个部分的途径。曾经你一度只能通过JavaScript访问页面中某些特定的元素。IE3和Netscape3只允许程序访问表单元素、图片以及链接。Netscape4改进了这一点，把程序可访问的范围通过document.layers扩展到了它特有的layer元素。IE4作了进一步改进，把这个范围通过document.all扩展到了页面的所有元素。

　　从很多方面来说，document.all算是document.getElementById()的最初版本。你还是要使用元素的ID来通过document.all访问它，例如document.all.myDiv或是document.all["myDiv"]。最主要的区别就是IE使用了一个集合而非方法，而这和其他当时的访问方法比如document.images及document.forms是相吻合的。

　　IE4也第一个引入了用document.all.tags()来通过标签名字获取一个元素列表的功能。无论从哪点来看，这都是document.getElementsByTagName()的最初版本，而且工作方式完全相同。如果你想获取所有的div元素，你可以使用document.all.tags("div")。甚至在IE9中，这个方法仍然作为document.getElementsByTagName()的一个别名存在。

　　IE4同时也为我们引入了可能是有史以来最流行的私有DOM扩展：innerHTML。看起来微软的那帮人是认识到了通过编程手段来建立一个DOM有多么痛苦，所以把这个便捷方法，连同outerHTML一起提供给我们。事实证明这两个方法都非常有用，已经在HTML5中被标准化了[1]。随它们一同而来的用来处理纯文本的API——innerText以及outerText——同样被证明足够有影响力，因为DOMLevel3已经引入了与innerText行为相似的textContent[2]。

　　按照同样的思路，IE4引入了insertAdjacentHTML()，这是又一种将HTML插入文档中的方法。虽然这花了更长的时间，但最终也被编入了HTML5[3]，而且目前已被各浏览器广泛支持。

　　事件

　　在开始时，JavaScript并没有事件机制。网景和微软都作出了尝试，并且分别得出了不同的模型。网景给我们带来了事件捕获，其思想是一个事件先发送到窗口，然后是文档，然后一个个直到最终到达预期的目标。网景浏览器6以前的版本都仅支持事件捕获。

　　微软采取了一个相反的方法，设计出了事件冒泡。他们认为一个事件应该先从实际的目标出发，然后在上层节点触发直到文档。IE9以前的浏览器仅支持事件冒泡。虽然随着官方的DOM事件规范发展，同时包含了事件捕获和事件冒泡，但大多数web开发者都只使用事件冒泡，而把事件捕获仅仅留在JavaScript类库中的一些解决方案和小技巧中使用。

　　除了创造了事件冒泡以外，微软还创造了一系列后来也最终被标准化的额外事件：

　　contextmenu–当使用鼠标副按键点击一个元素时触发。在IE5中首次出现，后来被编入了HTML5[4]。现在已被所有主流浏览器所支持。

　　beforeunload–在unload事件前触发，允许你阻断页面的退出。最初由IE4引入，现在也为HTML5的一部分[4]。

　　mousewheel–在鼠标滚轮（或类似设备）被使用时触发。首个支持此事件的浏览器是IE6。就像其他一样，目前也是HTML5的一部分[4]。唯一不支持此事件的主流桌面浏览器是Firefox（但其支持一个可用来替代的DOMMouseScroll事件）。

　　mouseenter–mouseover的非冒泡版本，被微软在IE5中引入，用来克服mouseover使用时带来的困扰。这个事件已被DOMLevel3事件规范正规化[5]。同样被Firefox及Opera支持，但Safari和Chrome都（暂时？）不支持。

　　mouseleave–与mouseenter对应的mouseout的非冒泡版本。在IE5中被引入，目前被DOMLevel3事件规范标准化[6]。浏览器支持和mouseenter一样。

　　focusin–focus事件的冒泡版本，用来帮助更好地管理页面上的聚焦行为。最初在IE6中被引入，现在已成为DOMLevel3事件规范的一部分[7]。目前没有被很好地支持，尽管Firefox关于其实现的开过一个bug。

　　focusout–blur事件的冒泡版本，用来帮助更好地管理页面上的聚焦行为。最初在IE6中被引入，现在已成为DOMLevel3事件规范的一部分[8]。和focusin一样，没有良好支持但Firefox接近了。

　　<iframe>

　　框架一开始是作为一个私有功能被引入NetscapeNavigator2的。这包括了<frameset>、<frame>以及<noframes>。其背后的思想其实很简单：那时每个人都在使用调制解调器，往返于服务器之间的代价颇高。主要的应用场景是提供一个只加载一次的带有导航元素的框架，然后其他框架可以由导航控制来做单独的变化。利用将导航作为一个单独页面来节省服务器渲染时间以及数据传输量在当时是一个巨大的胜利。

　　IE3也支持框架，因为他们当时在web上正变得非常流行。但是，微软为此功能增加了自己的私有标签：<iframe>。这个元素背后的基本想法是在一个页面中嵌入另一个页面。在Netscape的实现中你需要创建三个页面（导航页、内容页以及框架集）来实现静态导航，而在IE中你只需要两个页面（带有导航的主页面以及<iframe>中的内容页）就能创建出同样的功能。起初，这曾经是IE和NetscapeNavigator间的主战场之一。

　　<iframe>逐渐变得更流行，因为它在创建框架集时更加省事。Netscape在版本4中引入了和<iframe>功能十分类似的<ilayer>来进行反击。当然，<iframe>最终胜出并且成为了目前web开发的一个重要部分。网景的框架和微软的<iframe>都曾被HTML4标准化，但网景的框架后来在HTML5中被废弃（不建议使用）了。

　　XML与Ajax

　　尽管XML已经像很多人所料的那样在现今的web上被大量使用，但是对XML进行支持的领路人仍然是IE。它是第一个支持在客户端通过JavaScript进行XML解析以及XSLT变换的浏览器。不幸的是，它是通过ActiveX对象来表示XML文档以及XSLT处理器的。但Mozilla的人显然认识到了其中的可取之处，因为他们后来用DOMParser、XMLSerializer和XSLTProcessor创造了类似的功能。其中前两个已经成为了HTML5的一部分[9]。虽然基于标准的JavaScriptXML处理方式和IE提供的版本差异较大，但它无疑是深受IE影响的。

　　客户端的XML处理都是IE对XMLHttpRequest的实现的一部分，最开始由IE5以ActiveX对象的形式引入。其中的想法是希望可以在一个网页中从服务器获取一个XML文档并且允许用JavaScript把这个XML当做DOM来进行处理。IE的版本需要你使用newActiveXObject("MSXML2.XMLHttp")，这也使得它依赖于版本字符串，而且让开发者要费尽功夫去测试、使用最新版本。再一次，Firefox站出来，通过创建一个当时还是私有的、与IE版本接口完全同名的XMLHttpRequest对象来清理这一片混乱。此后其他浏览器复制了Firefox的实现，最终使得IE7也增加了一个不需要使用ActiveX的版本。当然，使得每个人为JavaScript感到振奋的Ajax革命背后的驱动力正是XMLHttpRequest。

　　CSS

　　当想到CSS的时候，你可能不会对IE有多少好感——毕竟它对于CSS的支持往往是滞后的（至少直到IE10都是如此）。然而，IE3却是第一个实现了CSS支持的浏览器。当时，网景正在力推另一个类似的提案：JavaScript样式表（JSSS）[10]。从名称就可以看出，这个提案用JavaScript来定义关于页面的样式信息。Netscape4引入了JSSS和CSS，整整比IE落后了一个版本。其中对CSS的支持并不尽如人意，常常需要将样式翻译为JSSS以便应用[11]。这也意味着在Netscape4下，如果JavaScript被禁止了，CSS也无法正常工作。

　　而那时IE对CSS的实现仅限于字体族、字号、颜色以及背景，但这个实现却是优质且可用的。与此同时，Netscape4的实现却很容易出问题、难以使用。是的，在很小的程度上，IE导致了CSS的成功。

　　IE还给我们带来了其他最终被标准化的对CSS作的创新：

　　text-overflow–用来在文字超出容器大小时显示省略号。在IE6中首次出现并已在CSS3中被标准化[12]。目前已被各主流浏览器支持。

　　overflow-x与overflow-y–允许你在两个独立的方向上对内容溢出进行控制。这个属性在IE5中首次出现，后在CSS3中规范化了[13]。目前已被各主流浏览器支持。

　　word-break–用来指定词语之间的换行规则。最初在IE5.5中出现，现已被CSS3规范化[14]。除Opera外的所有主流浏览器均支持。

　　word-wrap–指定了浏览器是否应该在词语中间换行。在IE5.5中被创造出来，现已被CSS3标准化为了overflow-wrap[15]，尽管所有主流浏览器都以word-wrap的形式支持它。

　　另外，许多CSS3中新的视觉效果都应该感谢IE所奠定的基础。IE4引入了私有的filter属性，从成为了第一个可以做下面这些事的浏览器：

　　根据CSS的指示来生成渐变（CSS3：渐变）

　　用alpha滤镜来创建半透明元素（CSS3：opacity以及RGBA）

　　将一个元素旋转任意的角度（CSS3：用transform配合rotate()）

　　为一个元素应用阴影（CSS3：box-shadow）

　　为一个元素应用一个矩阵变换（CSS3：用transform配合matrix()）

　　除此之外，IE4有一个被称为「过渡」的功能，它允许你用滤镜创建一些基本的动画。这个功能主要是基于通常在PowerPoint中可用的过渡功能，例如淡入或淡出、棋盘变换等等[16]。

　　所有这些功能都以某种方式成为了CSS3的主要功能。在1997年发布的IE4就有了这些功能，而我们现在才开始在其他浏览器中享受到这些功能，实在是很惊人的。

　　其他对HTML5的贡献

　　HTML5中很大一部分都来自IE及其引入的API。这里有一些本文之前还没提到过的内容：

　　拖放–HTML5中最酷的部分之一就是原生的拖放功能[17]。这个API源自IE5，而且在HTML5中已有描述，且变化非常小。主要的区别是增加了draggable属性来把任意元素标记为可拖放的（IE用了一个JavaScript调用——element.dragDrop()来做这件事）。除此之外，这个API与原始版本近乎相同，目前已被各主流桌面浏览器所支持。

　　剪贴板的访问–现在已从HTML5中分离出了自己的规范[18]，赋予了浏览器在某些情况下访问剪贴板的能力。这个API最初出现在IE6中，随后被Safari模仿，它将clipboardData从window对象中取了出来，放到了剪贴板事件的event对象中。Safari的改动被保留为HTML5版本的一部分，而且剪贴板的访问在所有除Opera以外的主流浏览器中也都已被支持。

　　富文本编辑–用designMode进行富文本编辑是在IE4中被引入的，因为微软希望给Hotmail用户们一个更好的文本编辑体验。后来，在IE5.5引入了contentEditable，以用作一个更轻量级的进行富文本编辑的方法。随之而来的是可怕的execCommand()方法以及它的一些附属方法。不论好坏，这个富文本编辑的API已在HTML5中被标准化[19]，而且目前已经被所有主流桌面浏览器以及移动Safari和Android浏览器所支持。

　　结论

　　尽管嘲笑IE很简单也很流行，但事实上，如果不是它所作的贡献，我们不会拥有我们目前所知的web。如果没有XMLHttpRequest和innerHTML，web会怎样？它们正是web应用的Ajax革命的催化剂，许多新的功能都是基于它们构建的。可笑的是当我们回望这个已经成为互联网上的「坏小子」的浏览器的历史，会发现没有它，我们不会处在今天所在的位置。

　　是的，IE自身有瑕疵，但对于互联网的历史的绝大部分时间，它都是推动技术进步的浏览器。现在我们处在一个大规模浏览器竞争以及创新的时代，却很容易忘记我们从哪里一路走来。所以当你下次遇见正在做IE相关工作的人时，请别投去羞辱和番茄。相反，要谢谢他们帮助IE一路走到今天，也使web开发者成为世界上最重要的工作之一。

　　InternetExplorer最初是从早期一款商业性的专利网页浏览器SpyglassMosaic派生出来的产品。在1996年，微软通过给予季度费用和部分收入从Spyglass中取得了SpyglassMosaic的授权。虽然SpyglassMosaic的名字与NCSAMosaic（首款应用得最广泛的网页浏览器）甚为相似，但SpyglassMosaic则相对地较不出名以及使用了NCSAMosaic少量的源代码。