IE 10 预览： HTML5先睹为快

 《IE10 Preview: HTML5 First Look》

http://www.sencha.com/blog/ie10-preview-html5-first-look/
作者：Michael Mullany

译者：sp42/zhangxin09

在过去的一年里，我们已经把 HTML5 技术簇的每一环，都置于各款主流手机、平板中进行一连串的测试。作为 HTML5 应用程序的运行平台来说，各大移动设备表现是怎么样的呢？总得来说， 苹果、黑莓和 HP 的平板有抢眼的表现，而 Android 则表现平平。不过，尚未最终确定，对于代号“冰淇淋三明治 Ice Cream Sandwich"的 Android 4.0 系统，我们还是期待它能够上一个台阶。

Over the last year we’ve been putting every new major mobile platform through a battery of tests to assess how they stack up as an HTML5 application platform. So far, it’s been thumbs up on Apple, RIM and HP tablets and thumbs down on Android tablets. But we’re still crossing our fingers that the Ice Cream Sandwich release of Android will make the grade.

到目前为止，我们没有花太多时间在 Windows 手机上面，主要因为 Windows Phone 7 的浏览器表现如此之差，仍不值得去评价。然而，上周在 Windows Build 发布会上我们体验了 Windows 和 Internet Explorer 10 的一个开发者预览版本，于是想分享一下我们有关 HTML5 的第一体验印象。简单地讲，那体验虽然是在一个特制的机子上跑的 IE10 预览版本。但不得不说,那是我们看到的最好表现的 HTML5 呈现。过去十多年时间，微软一直轻视”纯 Web“的开发。而如今，正洗心革面般的卷土重来。

To date, we haven’t spent time on Windows phones, mostly because the Windows Phone 7 browser was so poor that it wasn’t worth evaluating. However, at the Windows Build conference last week we got our hands on a developer preview tablet running Windows 8 and Internet Explorer 10. We wanted to share our first impression of the HTML5 experience. Simply put, (and with the caveat that we were running on the notably overpowered developer preview hardware) the IE10 HTML5 experience is one of the best we’ve seen on any platform to date. After a decade of web neglect, Microsoft is back with a vengeance.

Win8 的 Web 平台 The Windows 8 Web Platform

我们先大致了解一下 Windows 8 的一些情况再进入 Win8/IE10 于 HTML5 的细节部分。这一回，微软的确下重本在 Web 技术上，使之有机会参与原生 Windows 8 应用的开发。也就是说，你可以通过 JavaScript/HTML/CSS 开发原生的 Win 应用程序。

Before we go into the details of HTML5 support in Win8/IE10, it’s probably worth stepping back and covering some essentials of Windows 8. Windows 8 represents a big shift in Microsoft strategy because it makes web technologies a Tier 1 development option for native Windows apps. 

To repeat: applications developed in JavaScript/HTML/CSS can now be built and distributed as native Windows applications.

面对图形、I/O、硬件设备等的许多 Windows 核心服务，无论 .Net 程序员、C++ 程序员，抑或 JavaScript 程序员均是可以用一视同仁的态度去看待。微软的消息是，现在你可以使用 Web 技术建立任何原生的 Windows 应用程序。

The core Windows services for graphics, i/o, device access etc. all have JavaScript bindings equally as rich as the bindings for developers working in .NET or C++. The Microsoft message is that you can now build any native Windows app using web technologies.

既然如此，如果我在传统方式下的基于 Web 页面的 IE10 开发，与你在 Win8 原生程序的开发，比较起来肯定不一样。首先第一个区别是访问资源的不同。对于 Web-based 的应用程序，你不可能访问系统保护的资源，如摄像头，打印机等。若把你的程序打包为原生应用程序，就可以访问摄像头，但必须事前在程序清单中指明我这个程序需要访问到摄像头才能使用。接下来就是在 Windows 应用商店中发布应用，必须符合若干技术指标和政策这样的前提才能正式发布。

So… what will be the differences between simply developing a web-based app for use by IE10 and developing a web app that gets delivered as a Win8 native app? The first difference is the resources that you’re allowed to access and how you’re allowed to access them. As a web-based app, you don’t get access to protected system resources such as camera, printers etc. To package your web app as a native app, you must create a permissions manifest file describing the protected resources that your app wants to access, and then submit your app to the (forthcoming) Windows app store. On submission, it will be checked for compliance with a battery of technical and policy tests.

其实现在 Build 的状况还不太清楚，但我们猜想，Windows 平台上的 Web 演化某种程度上将体现在应用商店的符合性测试（compliance testing）上。

Although it wasn’t altogether clear from Build, our guess is that app store compliance testing will be Microsoft’s mechanism for controlling web technology evolution on the Windows platform.

HTML5支持 HTML5 Support

说了那么多，IE10 到底啥新玩意? 大体说，突出为可视的 UI 元素方面的。过去三年中不断被热炒的 HTML5 和 CSS3 技术，统统在 IE10 中实现（所谓“预览版”中的）。 其实 IE9 的时候已经看得出微软已迈出一大步，起码搞了个 Canvas 硬件加速。但 IE10 则持续不懈，拿出来更多：

So, what’s new in IE10? A huge number of new features, particularly in the area of UI elements and effects. The IE10 preview supports almost every visual HTML5 and CSS3 feature that’s been introduced in the last three years and several more besides. IE9 was already a serious step-up for Microsoft with capabilities such as hardware accelerated Canvas, but IE10 introduces much more including:

• 2D 和 3D 质量都很好，很流畅。反锯齿和透视（perspective）明显优于许多其他浏览器，恐怕只有打开硬件加速才能有这么流畅。
  CSS Transforms and Transitions: 2D and 3D transforms work smoothly and at high quality. Anti-aliasing and perspective handling for 3D transformed elements is visibly superior to many other browsers. And the smoothness of transforms is impressive which means that they’re probably hardware accelerated.
• WebKit 那一套 CSS 的语法， 业已在 IE10 中通通全面实现，换句话说，即把 -webkit 替换为 -ms 就搞定。这不，肯定对 Sencha Animator 大大的好事情。CSS Animations: are fully implemented with the syntax pioneered by WebKit. This is very exciting for us because it means that Sencha Animator animations play easily on IE10 with a simple find/replace of –webkit to –ms.
• CSS3 Shadows，包括文字和箱子都支持阴影（连 inset 阴影都有），把其他阴影的特效结合起来完美无缺。
  CSS3 Shadows: both text and box shadows are completely supported (including inset shadows!). Combining shadows with other effects works flawlessly.
• CSS3 渐变（Gradients）。全面兼容 webkit/mozilla 新样式语法和新选项，充分支持圆形和椭圆形的径向渐变。
  CSS3 Gradients: fully supported with new style webkit/mozilla syntax which allows circular and elliptical radial gradients among all the other options
• 不仅如此，还有 WebWorker、web fonts、Indexed DB、SVG filters、flexbox layout。算算好像剩下 Border-image 没有。
  And that’s just the start. There are also web workers, web sockets, web fonts, Indexed DB, SVG filters, flexbox layout. Border-image seems to be the only thing not implemented.

值得注意的是，特别是对开发人员培训，以及如何寻找微软平台搭售，都有没有在此列表中说明。微软只是简单地提出标准草案，并没有扩展或具体的目标提出。

Remarkably, particularly for developers trained to look out for Microsoft platform tie-ins, there are none on this list. Microsoft simply implemented the draft standards with no extensions or gotchas.

微软的先拨头筹 Microsoft Gets Some Firsts

在大幅追赶  UI 相关功能的同时，IE10 亦作为一些新技术的急先锋，如 CSS Region（CSS 地区）和定位式浮动。CSS Region 是一个由 Adobe 规划并提出的样式，能模仿新闻报纸搬的排版布局，也就是不规则跨越多个列的插入文字。使用的时候就像配置浮动元素周围的文本流那样。CSS Region 现阶段仍是处于工作草案的阶段中。 这布局对于有需求从 Web 上面重复一份打印版本的人来说，将是十分有用的。（不过最终，微软还是主推 Grid式布局（可参见译者的另外一篇关于 Grid Layout 的介绍 《实现CSS3 Grid Layout》点击打开链接），哪怕只有 IE 唯一在支持——CSS 工作组几年前已经着手在搞的了。）

In addition to substantial catchup on UI-related features, IE10 also pioneers some new technologies that haven’t made it into other browsers yet such as CSS Regions and positioned floats. CSS Regions is a working draft authored by Adobe that enables newspaper style layouts with features like irregular inserts that span multiple columns, as well as configurable text flow around floating elements. These are very useful for publications that want to duplicate print-style layouts on the web. (Finally, Microsoft is still pushing grid layout, although it continues to be the sole browser that implements it, and predecessor specs have languished in the CSS working group for years.)

IE10 还有一些触控界面的扩展，用来控制元素的滚动和平移/缩放扩展。这些功能都不错。例如 -ms-scroll 这个 CSS 属性控制滚动行为、-ms-content-zooming这个 CSS 属性控制内容的缩放。这些似乎都不是标准的内容，但希望看到一些来自微软的工作草案，也包括这些新的属性。

IE10 also has some nice extensions for touch interfaces that control scrolling and pan/zoom on elements. For example, the new -ms-content-zooming CSS property controls zoomability and the -ms-scroll CSS properties control scrolling behavior. These do not seem to be standards track yet, so it would be good to see some working drafts from Microsoft covering these new properties.

IE10 少了哪一道菜？What’s Missing From IE10?

所有 HTML5 技术的追赶，许多有实现了，却也有一些重大技术没有出现在 IE10 中，鉴于微软平台整体的战略利益——没有也似乎永远不可能有。首先，WebGL 是铁定缺席的。若要控制 3D 图形，虽然 Web开发人员可使用把 JavaScript 绑定到 Windows Direct 图形 API，但只能分发为 Win App 而非网页程序。同样，媒体捕捉和一些设备的 API 也缺席——非不能也实不为也，或者有待微软的战略推进怎么样，但近期推出的可能性很低。这些类型的 API，微软希望你通过本地绑定来执行。

With all the substantial catchup, there are a number of notable HTML5 technologies that haven’t appeared in IE10, and given Microsoft’s platform strategy, seem unlikely to ever show up there. First, WebGL is explicitly off the menu. To work with 3D graphics, it seems that web developers will have to use the JavaScript bindings to Windows Direct graphics APIs and distribute their apps only as Windows apps. Similarly, media capture and Device APIs are missing and given the thrust of the strategy, seem unlikely to show up anytime soon. These are the types of API’s that Microsoft wants you to consume via native bindings.

交到手上的？ And What Will Ship?

或许你们现在不知道，我们为 Windows 8 和 IE10 兴奋得不得了。我们认为微软此举将强化 HTML5 作为跨平台开发技术的优势。但愿我们不用通过包装器就可以直接访问那些有趣的设备 API，但若不存在竞争的关系似乎微软不大愿意那么做。最后，也是至为关键的，就是能否保证，明年 windows 8 的压片那时候，市面上那些低功耗的 ARM 处理器、1GB 内存、价值 $299 的平板机，是否也可以流畅地运行 Win8 程序？

If you couldn’t tell already (!) we’re very excited by Windows 8 and IE10. We think it cements HTML5 as the standard cross-platform app development tech. We wish we didn’t have to use native packaging to get access to interesting device API’s, but Microsoft is unlikely to implement these without a competitive spur. The final, but major, caveat is whether all these technologies will retain their speed and performance when Windows 8 is squeezed onto next year’s $299 tablets which are likely to have a GigaByte of memory and a lower-powered ARM processor.

我们当然希望可以！

We certainly hope so。