IE11 开发人员指南以及6大新增功能

IE11 开发人员指南以及6大新增功能

微软在上周刚刚发布Windows 8.1预览版的同时发布了IE11浏览器,下面来一起盘点下IE11 中的新增功能。

一、兼容性

Internet Explorer 11 Preview 合并了几项更改,旨在改进与 Web 标准、其他浏览器和实际网站的兼容性。这些更改提升了对流行 Web 标准的支持,同时有助于防止早期网站无法正确地显示内容。

这些更改包括:

User-agent 字符串更改

对于许多旧网站,针对 IE11 Preview 的一些最明显的更新涉及用户代理 (User-Agent) 字符串:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv 11.0) like Gecko
//IE10
//Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)

如果将新的 user-agent 字符串与较早版本的 Internet Explorer 报告的字符串进行比较,你会发现以下更改:

  • 兼容 (“兼容”) 和浏览器 (“MSIE”) 令牌已删除。
  • “like Gecko” 令牌已添加(以便与其他浏览器一致)。
  • 浏览器版本现在由新版本 (“rv”) 令牌报告。

这些更改有助于防止错误地将 IE11 Preview 标识为较早的版本。

通常,应避免检测特定浏览器或浏览器版本。 基于此类测试的假设易于在更新浏览器时导致误报。 相反,在你需要使用功能时检测功能并使用渐进增强为不支持所需功能的浏览器或设备提供简化体验。

在极少数情况下,可能有必要对 IE11 Preview 进行唯一标识。 使用 Trident 令牌来执行此操作。

文档模式更改

Windows Internet Explorer 8 中引入了文档模式,这些模式可以实现从早期版本的浏览器支持的功能转换为现行标准和其他浏览器指定的功能。 Windows Internet Explorer 的后续版本继续使用此转换,方法是引入对行业标准所定义功能的支持的同时,引入模拟早期版本所支持功能的新文档模式。

当许多网站已更新为向其他浏览器提供更丰富的体验时,某些网站仍继续使用现有的旧功能支持向 Internet Explorer 提供旧体验,即便最新版本的浏览器支持为其他浏览器呈现的体验。

从 IE11 Preview 开始,边缘模式成为首选文档模式;它代表可供浏览器使用的现行标准的最高支持。

使用 HTML5 文档类型声明启用边缘模式:

<!doctype html>

Internet Explorer 8 中引入了边缘模式并且后续版本中也提供了该模式。 注意,边缘模式支持的功能会限制为呈现内容的特定浏览器版本支持的功能。

从 IE11 Preview 开始,已弃用文档模式,除了临时情况外不应再使用。 应更新依靠旧功能和文档模式的站点以反映现行标准。

如果必须针对特定文档模式以便在重新运行站点以支持现行标准和功能时允许运行站点,则请注意,你使用的是转变功能,以后的版本中可能不提供该功能。

如果你当前在针对旧文档模式使用 x-ua-compatible 标头,那么可能你的网站无法反映对 IE11 Preview 可用的最佳做法。 有关详细信息和帮助,请参阅 modern.ie。

旧 API 添加、更改和删除

许多网站查找支持旧 (HTML4) 功能的浏览器,目的是提供针对早期浏览器优化的体验。 对于支持旧功能和现行标准(如 HTML5、CSS3 等)的浏览器,这是一个问题。 如果站点在搜索现行标准支持之前检测到旧功能,则可以为支持现行标准的浏览器提供旧体验和更丰富的体验。

因此,IE11 Preview 添加、更改、删除了许多默认的旧功能:

  • navigator.appName 属性现在会返回 “Netscape” 以反映 HTML5 标准和匹配其他浏览器的行为。
  • navigator.product 属性现在会返回 “Gecko” 以便反映 HTML5 标准和匹配其他浏览器的行为。
  • XDomainRequest> 对象被 XMLHttpRequest 的 ORS 替换。
  • 已添加对 __proto__ 的支持。
  • 已添加 dataset 属性。

另外,为了支持现行标准指定的功能,已删除若干旧 API 功能:

删除 API 功能 替代功能
attachEvent addEventListener
window.execScript eval
window.doScroll window.scrollLeftwindow.scrollTop
document.all document.getElementById
document.fileSizeimg.fileSize 使用 XMLHttpRequest 可提取源。
script.onreadystatechangescript.readyState script.onload
document.selection window.getSelection
document.createStyleSheet document.createElement(“style”)
style.styleSheet style.sheet
window.createPopup 使用 diviframezIndex 值很高)
二进制行为 变化;使用基于标准的等效,如 canvas、SVG 或 CSS3 动画
旧数据绑定 使用框架提供的数据绑定,如 WinJS

这些更改在某种程度上可阻止编得不好的 user-agent 检测机制(错误地)将 Internet Explorer 标识为较早版本。 因此,依靠现行标准的站点按预期显示。

URL 字符编码

IE11 Preview 更改了 URL 的字符编码。 具体来说,现在使用 UTF-8 字符编码对查询字符串和 XHR 请求进行编码。

此更改会影响所有 URL,但以下除外:

  • 定位名称组件(也称为“片断”)。
  • 用户名和密码组件。
  • file:// or ftp:// protocol links。

这些更改与其他浏览器行为匹配并简化了跨浏览器 XHR 代码。

自定义数据属性

IE11 Preview 添加了对 HTML5 自定义数据属性和 dataset 属性的支持,可以提供对它们的编程访问。你可以使用 data- 前缀后跟属性名称的方式来向元素分配数据属性:

<div data-example-data="Some data here"></div>

要获取或设置数据属性的值,请使用此语法:

   // to get
   var myData = element.dataset.exampledata;
   // to set
   element.dataset.exampledata = "something new";
更新反映对基于标准的规范的更改

IE11 Preview 还包括用于支持基于标准的 Web 规范(已更新或仍在发展)的更新。 这其中包括与支持下列功能相关的更改:

弹性框(“Flexbox”)布局更新

使用 IE11 Preview,你可以更新站点来与最新的弹性框标准保持一致并简化跨浏览器的代码。

有关详细信息,请参阅”弹性框(“Flexbox”)布局更新”。

突变观察者

突变观察者是 IE11 Preview 中新的标准 Web 平台功能,提供了对突变事件支持的所有相同方案的快速执行直接替代,以及对属性更改事件支持的方案的替代。
有关详细信息,请参阅”突变观察者”和”将突变事件和属性更改事件迁移到突变观察者”。

指针事件

为了符合万维网联合会 (W3C) 指针事件规范的候选推荐,与 Internet Explorer 10 相比,IE11 Preview 实施已略有更改。

一、F12 开发人员工具

使用全新的 F12 开发人员工具调试代码,解决显示问题,改进性能并提高网页稳定性。

从头开始重建

Internet Explorer 11 Preview 中的 F12 工具已从头开始重建,能够为你带来以下益处:

  • 新且更干净的用户界面。
  • 新的响应、内存以及模拟工具。
  • 常见工具中新的、改进的功能。
  • 更快、更简单的工作流。
使用 UI 响应工具加快网页速度

UI 响应工具,有助于调节页面性能

当页面运行时,新的 UI 响应工具为其提供配置文件,从而标识页面速度减慢的位置以及花费时间过长的进程。开发人员可以观察 CPU 使用率、帧速率与页面行为之间的关系。

CSS、HTML 以及 JavaScript 自动完成

键入 JavaScript、HTML 或 CSS 代码时, 控制台和 DOM 资源管理器工具会提供自动完成建议。自动完成有助于实现以下操作:

  • 使 API 更容易被发现;例如控制台 API 方法。
  • 减少键入错误。
  • 加速工作流。
屏幕和 GPS 模拟

使用模拟工具,你可以在小至 240 像素宽的移动屏幕上,大至 4k 家庭影院屏幕的所有屏幕上预览站点外观。GPS 模拟测试移动网页如何在世界任何位置进行响应。

有意义的内存分析

内存工具,有助于随着时间的推移跟踪内存使用情况,以捕获可降低页面速度或破坏页面稳定性的泄漏

随着时间的推移跟踪内存使用情况是一个重要工具,用于调试页面速度缓慢和崩溃情况。新的内存工具提供了以下内容:

  • 整体内存使用情况的时序表视图。
  • 内存使用情况快照,显示某个给定时间点网页的内存使用情况。
  • 快照比较,查明两个快照之间更改内存使用情况的源。这有助于标识网页运行时和用户与网页交互时显露的内存问题。
  • 高亮显示的孤立元素,显示可以回收元素的位置。
右键单击以检查

使用 IE11 Preview 在 DOM 资源管理器工具中选择页面元素非常轻松。右键单击页面上的元素,然后单击上下文菜单中的“检查元素”,以在 DOM 资源管理器工具中突出显示元素。

三、触控

IE11 Preview 为网站和 Windows 应用商店应用提供了更多默认和自定义触控支持。

四、固定网站

凭借对固定网站和跨设备同步的动态磁贴支持,IE11 Preview 可让你的网站在 Windows 8.1 Preview 开始屏幕和 Windows 设备上具有一流的显示效果。

五、WebGL

IE11 Preview 引入了对 WebGL 的基本支持,WebGL 是一组通过画布元素公开的 API,用于呈现交互式三维和二维图形。

六、视频

凭借对自适应流、内容保护和字幕领域中全新和新兴标准功能的支持,IE11 Preview 将 HTML5 视频提升到了新的高度。

更多 IE11 开发人员指南主题

查看 IE11 Preview 中包含的开发人员功能完整列表,以及可供使用 JavaScript 开发适用于 Windows 8.1 的 Windows 应用商店应用的功能。

总结

Internet Explorer 11是Internet Explorer家族目前最棒的版本,微软正在为大家准备一个真正标准的浏览器。

“IE11 开发人员指南以及6大新增功能”的8个回复

  1. 擦啊,什么玩意啊,当第一眼看上去,开发者工具确实很牛逼,我以为IE11会保留文档模式和浏览器模式的切换功能,后来,找了半天都没找到….上网查了一下,尼玛,微软说可以提供一个免费使用3个月的BrowserStack …什么玩意,一样的要用到谷歌上面的插件,微软你是在找翔啊…

    1. IE11中有这个功能

      开发人员工具,点击左侧最下方的显示屏的图标(仿真),进入到兼容视图选择界面,在里面的“文档模式”选中选择需要的IE版本即可。

  2. User-agent改动应该算是最大的了,IE我觉得应该像其它浏览器,设置一个明显的扩展管理器,而不是现在特别烦人的弹窗,而且还想插就插

发表评论

电子邮件地址不会被公开。 必填项已用*标注