Web 开发中用于更好兼容性的功能检测

在关于IE9 为 Web 开发人员带来的新特性的讨论中，我谈到了如何使您的网站/应用程序更具兼容性。 在本文中，我将尝试给出会议的重点。

相同的标记

在开发网站/应用程序时，我们需要努力使用在所有浏览器中提供相同标记的功能。 当我们知道某个功能在所有浏览器中都兼容时，我们可以放心地使用它，而不用担心它会破坏我们的布局。 例如，使用大多数 HTML 元素，例如 input 元素，在每个浏览器中看起来都一样。 另一方面，目前大多数浏览器不支持新的 HTML5 视频元素。

浏览器检测

在过去，当我们想要使我们的网站与每个浏览器兼容时，我们会检测浏览器，然后应用相关的样式/功能/JavaScript，以便创建我们的网站外观和行为。 这种检测是基于一个错误的假设，即我们知道浏览器下一个版本将如何工作。 像这样的错误假设可能会在新版本的浏览器发布时破坏网站。 这种思维方式正在逐渐消失，并被一种更好的方法所取代——功能检测。 您应该使用此方法的唯一情况是针对旧版浏览器做出假设。 以下代码显示了这种假设

// Target legacy only<!--[if IE lte 7]>
     // Legacy browser-specific code
 <[endif]—>

在该示例中，我们检查是否处于旧版 IE 中，例如 IE6，然后应用一些特定于旧版浏览器的代码。

特性检测

功能检测是一种在您的网站中使用以确保您的网站与大多数 Web 浏览器兼容的好方法。 在这种方法中，您会查看浏览器中是否存在特定的对象、方法、属性或行为。 如果您首先检测标准，这将确保您在较新的浏览器中获得最佳体验（这些浏览器可能支持这些标准）。 此外，标准化的功能往往更稳定，并且在大多数浏览器中具有更好的互操作性。 那么它是如何工作的呢？ 以下示例可以向您展示一种使用功能检测的方法

if( window.addEventListener ){
    // Code for browsers with addEventListener}
else{
    // Code for browsers without addEventListener}

此检查将在具有 addEventListner 实现的 IE9 中通过，但在 IE8 和更低版本的 IE 中，它将进入 else 语句，并且您可能会使用 attachEvent 方法。 功能检测方法被广泛用于 JavaScript 框架，例如 jQuery。

摘要

当您想要使您的网站与浏览器兼容时，您应该首先寻找所有浏览器都为您提供相同标记的功能。 如果您针对旧版浏览器，可以使用浏览器检测方法。 否则，请使用功能检测方法。 另外，请记住首先测试标准，以便为您的用户提供最佳体验。