Web 平台功能检测：面向全球受众的 JavaScript 渐进式增强

在不断发展的 Web 开发领域，确保在各种浏览器和设备上提供一致且无障碍的用户体验至关重要。渐进式增强与强大的功能检测相结合，为实现这一目标提供了有力的策略。这种方法允许开发者构建能够利用最新 Web 技术的网站，同时为老旧或功能较弱的浏览器优雅地降级功能。本指南为全球受众量身定制，全面探讨了 Web 平台功能检测和 JavaScript 渐进式增强。

什么是渐进式增强？

渐进式增强是一种 Web 开发方法论，它优先考虑核心内容和功能。其核心是构建一个适用于所有人（无论其浏览器或设备如何）的基本、可用的网站。然后，利用功能检测，为使用现代浏览器的用户通过高级功能来增强体验。可以将其想象为先建造一个坚实的地基，然后再添加装饰性的点缀。

渐进式增强的反面是优雅降级，即先为最新浏览器构建，然后再设法使其在旧版浏览器中正常工作（或至少不会崩溃）。通常认为，渐进式增强是一种更健壮、更面向未来的方法。

为什么渐进式增强对全球受众很重要？

Web 是一个全球性平台，用户通过各种各样的设备和浏览器访问网站，这些设备和浏览器对现代 Web 技术的支持水平各不相同。以下是渐进式增强对于触及全球受众至关重要的原因：

• 无障碍性：一个结构良好、语义正确的网站为无障碍性提供了坚实的基础。依赖辅助技术的残障用户仍然可以访问核心内容和功能。
• 浏览器兼容性：并非每个人都使用最新版本的 Chrome 或 Firefox。许多用户，尤其是在某些地区的用户，可能正在使用旧版浏览器或功能有限的浏览器。渐进式增强确保您的网站即使在这些浏览器上仍然可用。
• 性能：通过从轻量级核心开始，仅在支持时才添加增强功能，您可以提高网站性能，尤其是在世界许多地区普遍存在的较慢网络和性能较差的设备上。
• 弹性：渐进式增强使您的网站更能抵抗意外错误或浏览器不一致性。如果某个特定的 JavaScript 功能失败，核心功能仍然可用。
• 面向未来：Web 标准和浏览器技术在不断发展。渐进式增强使您能够在不破坏旧版浏览器用户体验的情况下，拥抱新功能。

功能检测：渐进式增强的关键

功能检测是确定特定 Web 浏览器是否支持某项功能或 API 的过程。这使您可以根据浏览器的能力选择性地应用增强功能。与依赖可能不可靠的浏览器嗅探（检测浏览器名称和版本）相比，功能检测提供了一种更准确、更健壮的方法。

功能检测如何工作

功能检测通常涉及检查全局对象（如 window 或 document）上是否存在某个属性或方法，或者尝试使用特定的 API 并捕获任何错误。如果该属性或方法存在，或者 API 调用成功，您就可以假定该功能受支持。

常见的功能检测技术

1. 属性检测：检查全局对象上是否存在某个属性。
2. 方法检测：检查全局对象上是否存在某个方法。
3. API 检测：尝试使用特定的 API 并捕获任何错误。
4. CSS 功能查询：使用 CSS 的 @supports 规则来检测对 CSS 功能的支持情况。

JavaScript 功能检测示例

以下是一些 JavaScript 功能检测的实际示例：

1. 检测 Geolocation API 支持情况

Geolocation API 允许网站访问用户的地理位置。然而，并非所有浏览器都支持此 API。以下是检测其支持情况的方法：

            if ("geolocation" in navigator) {
  // Geolocation API is supported
  navigator.geolocation.getCurrentPosition(function(position) {
    // Do something with the user's location
    console.log("Latitude: " + position.coords.latitude);
    console.log("Longitude: " + position.coords.longitude);
  }, function(error) {
    // Handle errors
    console.error("Error getting location: " + error.message);
  });
} else {
  // Geolocation API is not supported
  console.log("Geolocation is not supported by this browser.");
  // Provide alternative functionality or a fallback
}
            

              
                Copy
              
            
          

说明：此代码检查 geolocation 属性是否存在于 navigator 对象上。如果存在，它会尝试获取用户的位置。如果该属性不存在，它会提供一条回退消息，例如建议用户手动输入其位置或提供不同的基于位置的服务。

2. 检测 Web Storage API 支持情况

Web Storage API（localStorage 和 sessionStorage）允许网站在用户的浏览器中本地存储数据。以下是检测其支持情况的方法：

            if (typeof(Storage) !== "undefined") {
  // Web Storage API is supported
  localStorage.setItem("name", "John Doe");
  console.log(localStorage.getItem("name"));
} else {
  // Web Storage API is not supported
  console.log("Web Storage is not supported by this browser.");
  // Use cookies or other alternative storage mechanisms
}
            

              
                Copy
              
            
          

说明：此代码检查 Storage 对象是否已定义。如果已定义，它会假定 Web Storage API 受支持，并继续存储和检索数据。如果未定义，它会提供一条回退消息，指示应使用 cookie 或其他存储机制。

3. 检测 `classList` API

`classList` API 提供了一种便捷的方式来操作元素的类。以下是检测其是否存在的方法：

            var element = document.getElementById("myElement");

if (element && element.classList) {
  // classList API is supported
  element.classList.add("active");
} else {
  // classList API is not supported
  // Use older methods for class manipulation
  element.className += " active"; // Or a more robust polyfill
}
            

              
                Copy
              
            
          

说明：此代码首先使用 `document.getElementById` 获取一个元素。然后，它检查该元素是否存在*并且*是否具有 `classList` 属性。如果两者都为真，则使用 `classList` API 添加 "active" 类。如果不是，则使用回退方法，这可能是简单的类名拼接或更全面的 polyfill（稍后解释）。

4. 检测 `IntersectionObserver` API

`IntersectionObserver` API 允许您高效地监视元素何时进入或离开视口。这对于懒加载图片或在元素可见时触发动画非常有用。

            if ('IntersectionObserver' in window) {
  // IntersectionObserver API is supported
  let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // Do something when the element is visible
        console.log('Element is visible!');
        observer.unobserve(entry.target); // Stop observing after the element is visible
      }
    });
  });

  let element = document.querySelector('.lazy-load');
  if (element) {
    observer.observe(element);
  }
} else {
  // IntersectionObserver API is not supported
  // Fallback: Load the content immediately
  let element = document.querySelector('.lazy-load');
  if (element) {
    // Load the content immediately (e.g., set the image source)
    element.src = element.dataset.src;
  }
}
            

              
                Copy
              
            
          

说明：此代码检查 `IntersectionObserver` 是否存在于 `window` 对象中。如果存在，它会创建一个新的观察者并观察一个具有 `.lazy-load` 类的特定元素。当该元素变得可见时，它会记录一条消息并停止观察该元素。如果不支持 `IntersectionObserver`，它会立即加载该元素的内容。

CSS 功能查询 (@supports)

CSS 功能查询使用 @supports 规则，提供了一种检测 CSS 功能支持情况的方法。这使您可以根据浏览器的能力应用不同的样式。例如：

            @supports (display: grid) {
  /* Styles to apply if grid layout is supported */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}

@supports not (display: grid) {
  /* Styles to apply if grid layout is not supported */
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: 30%;
    margin: 1%;
  }
}
            

              
                Copy
              
            
          

说明：这段 CSS 代码首先检查浏览器是否支持 display: grid 属性。如果支持，它会应用样式来创建网格布局。如果不支持，它会应用样式来创建一个 flexbox 布局作为回退。

优雅降级与渐进式增强：深入探讨

虽然优雅降级和渐进式增强都旨在为各种浏览器提供可用的体验，但它们的方法有很大不同：

• 优雅降级：从为最新浏览器构建开始，然后尝试使其在旧版浏览器中工作。这通常涉及使用 hack 或变通方法来解决兼容性问题。
• 渐进式增强：从一个适用于所有人的基本、可用的网站开始，然后为使用现代浏览器的用户增强体验。

渐进式增强通常被认为是一种更健壮、更可持续的方法，因为它从一开始就优先考虑核心功能和无障碍性。随着新浏览器和新技术的出现，优雅降级可能更难维护。

Polyfills：弥合差距

Polyfill（或 shim）是一段代码，它提供了浏览器原生不支持的功能。Polyfills 通过提供缺失功能的 JavaScript 实现，让您可以在旧版浏览器中使用现代 Web 技术。

Polyfills 如何工作

Polyfills 的工作原理通常是检测浏览器是否支持某个特定功能。如果该功能不受支持，polyfill 会使用 JavaScript 提供该功能的实现。此实现可能依赖于其他现有的浏览器 API 或技术来实现所需的功能。

Polyfills 示例

• es5-shim: 为许多 ECMAScript 5 功能提供 polyfill，例如 Array.forEach 和 Array.map。
• fetch: 为用于发出 HTTP 请求的 fetch API 提供 polyfill。
• IntersectionObserver polyfill: 为 `IntersectionObserver` API 提供 polyfill。

有效使用 Polyfills

虽然 polyfills 很有用，但明智地使用它们很重要。过度使用 polyfills 会增加页面加载时间并对性能产生负面影响。可以考虑使用像 Webpack 或 Parcel 这样的构建工具，来自动地仅为特定浏览器包含所需的 polyfills。

另外，可以考虑使用像 Polyfill.io 这样的服务，它会根据用户的浏览器提供 polyfills。这确保了用户只下载必要的代码。

JavaScript 渐进式增强的最佳实践

以下是实施 JavaScript 渐进式增强的一些最佳实践：

1. 优先考虑核心内容和功能：从构建一个适用于所有人（无论其浏览器或设备如何）的基本、可用的网站开始。
2. 使用功能检测：使用功能检测根据浏览器能力选择性地应用增强功能。避免浏览器嗅探。
3. 提供回退方案：当某个功能不受支持时，提供一个提供类似或替代体验的回退方案。
4. 明智地使用 Polyfills：使用 polyfills 来弥合现代浏览器和旧版浏览器之间的差距，但要明智地使用它们以避免性能问题。
5. 全面测试：在各种浏览器和设备上测试您的网站，以确保其按预期工作。像 BrowserStack 和 Sauce Labs 这样的工具可以帮助进行跨浏览器测试。
6. 考虑无障碍性：确保您的网站对残障用户是无障碍的，无论其浏览器或设备如何。使用语义化 HTML，为图片提供替代文本，并遵循 WCAG 指南。
7. 优化性能：为网站性能进行优化，尤其是在较慢网络和性能较差的设备上。最小化 HTTP 请求，压缩图片，并使用缓存。
8. 使用内容分发网络 (CDN)：CDN 可以通过将您网站的资源分发到世界各地的服务器来帮助提高网站性能。这可以减少延迟并改善不同地理位置用户的加载时间。
9. 监控和分析：使用分析工具跟踪网站使用情况并确定需要改进的领域。监控性能指标，如页面加载时间和错误率。

渐进式增强的未来

在当今多样化的数字环境中，渐进式增强仍然是一项至关重要的 Web 开发策略。随着 Web 技术的不断发展，以及用户从日益广泛的设备和浏览器访问 Web，渐进式增强的原则将变得更加重要。拥抱功能检测、提供优雅的回退方案以及优化性能，将是为全球用户提供包容性和无障碍 Web 体验的关键。

结论

Web 平台功能检测和 JavaScript 渐进式增强是为全球受众构建健壮、无障碍和高性能网站的基本技术。通过优先考虑核心内容和功能，使用功能检测来选择性地应用增强功能，并为不受支持的功能提供优雅的回退方案，您可以确保您的网站对每个人都适用，无论其浏览器或设备如何。拥抱这些原则将帮助您为所有人创造一个更具包容性和无障碍的 Web。