让您的网站在现代 Web 和 Microsoft Edge 上脱颖而出的 5 种方法

Martin Beeby

3.50/5 (5投票s)

2015 年 9 月 25 日

CPOL

4分钟阅读

9003

我想分享五种方法，您可以让您的网站为现代 Web 互操作性做好准备，同时并行测试 Microsoft Edge。

Edge 是微软推出的新一代网页浏览器，它配备了新的渲染引擎——EdgeHTML——并且运行在 Windows 10 操作系统之上。由于从 Windows 7、8 和 8.1 升级到 Windows 10 对大多数用户来说是免费的，因此可以预见，未来几个月内将有大量 Edge 用户访问您的网站。Edge 标志着与过去的告别，实际上是对 Internet Explorer 旧版本的彻底重写，我相信许多 Web 开发者都会对此表示欢迎。有鉴于此，我想分享五种方法，以便您可以为您的网站做好现代 Web 互操作性的准备，并同时测试 Microsoft Edge。

更新您的 JavaScript 库

像 jQuery 这样的常用库通常会在新浏览器版本发布时进行更新以解决 bug。通过简单地更新您的 JS 框架，您可以避免许多与 Edge 兼容性相关的 bug。在我们内部研究中，我们发现排名前 20,000 的网站中有 57% 使用的 JavaScript 框架存在一些 bug，而这些 bug 在该库的更新版本中已被修复。您可以使用网站扫描器来确定您的网站是否使用了过时的 JavaScript 框架。

避免使用 CSS 前缀

CSS 前缀由浏览器供应商使用，以便在新的、新兴的 CSS 功能尚未被 W3C 完全批准之前实现它们。如果供应商实现了 CSS 前缀，它看起来会像下面的例子（这是 IE 特有的 'hyphens' 功能的实现，用于跨越多行自动断字）

-ms-hyphens: auto;

网站经常会出现缺少供应商特定的前缀，或者在通用 CSS 属性不需要的时候实现了供应商特定的前缀。这可能导致网页在 Microsoft Edge 或其他现代浏览器中渲染不正确。

浏览器供应商现在使用前缀的频率越来越低，因为它们会带来管理上的问题。有些浏览器，包括 Microsoft Edge，很少甚至从不使用前缀。

如果可能，请避免使用供应商特定的前缀。但是，如果您绝对必须使用供应商前缀，请使用 Grunt PostCSS来自动化您 CSS 中前缀的管理。

避免浏览器检测

有些网页使用浏览器检测技术来确定网页如何在许多不同的浏览器版本中呈现。我们建议使用特性检测；这是一种首先确定浏览器或设备是否支持特定特性，然后根据此信息选择最佳体验进行渲染的做法。

特性检测是浏览器检测的绝佳替代方案，并且通常通过流行的 JavaScript 库，如 Modernizr，或通过特性检测代码来实现。特性检测通常与 Polyfills 一起使用，以便在不支持这些现代特性的旧浏览器中实现它们。

有关如何使用 Modernizr、Polyfills 和其他兼容性技术的更多详细信息，请参阅 Martin Kearn 的文章“调整、现代化和优化您的网站”。

告别插件

Edge 不支持插件，因此现在是时候考虑如何摆脱 Flash 和 Silverlight 等专有插件了。Edge 支持 Flash，但 Flash 是与浏览器捆绑提供的，而不是使用插件架构，并且由 Edge 团队与 Adobe 合作进行集中更新和修补。对于某些网站来说，摆脱插件非常简单。然而，许多网站会发现这很困难，特别是那些提供媒体内容的网站。Edge 团队已在 Edge 博客上提供了有关如何迁移到 HTML 以实现高级内容的指导。

确保 Edge 渲染模式

如果缺少 <!DOCTYPE> 指令或未指定基于标准的文档类型，Edge 可能会错误地显示您的页面。扫描器会运行一个简单的测试来确定您的网站设置是否正确，因此请输入您的网站 URL 并快速了解它是否通过。如果您想查看实际测试的样子，可以在 GitHub上查看扫描器的代码。

资源

宣布 Windows 10 中 F12 开发人员工具的最新改进
关于我们新浏览器 Microsoft Edge 的技术讲座
Build 2015 的 Web 开发讲座