M

MLOG

中文

了解如何使用渐进增强和特性检测来构建健壮且可访问的 Web 应用程序。本指南提供全球视角、实际示例和最佳实践。

渐进增强：特性检测 - 为全球用户构建具有弹性的网络体验

在不断发展的互联网格局中，确保您的 Web 应用程序可访问、高性能且面向未来至关重要。实现这一目标最有效策略之一是渐进增强，这是一种设计理念，它侧重于构建在各种设备和浏览器上都能正常工作的核心功能，同时根据用户环境的功能添加增强功能。渐进增强的关键组成部分是特性检测，它允许开发人员在实现特定功能之前确定浏览器是否支持该功能。这种方法可确保一致的用户体验，尤其是在全球多样化的技术领域中。

什么是渐进增强？

渐进增强是一种 Web 开发策略，它从坚实、可访问的基础开始，然后根据浏览器或设备允许的情况逐步添加高级功能。这种方法优先考虑所有用户的内容和核心功能，无论其设备、浏览器或互联网连接如何。它遵循“网络应适用于所有人，随处可用且信息丰富”的理念。

渐进增强的核心原则包括：

为什么特性检测至关重要

特性检测是渐进增强的基石。与其依赖浏览器嗅探（根据用户代理字符串识别用户浏览器），特性检测则关注浏览器*能做什么*。这是一种更可靠的方法，因为：

特性检测方法

有几种检测浏览器功能的方法，每种方法都有其优点和缺点。最常见的方法是使用 JavaScript 检查特定功能或 API 的存在。

1. 使用 JavaScript 检查功能

此方法最普遍且灵活。您可以使用 JavaScript 代码检查特定浏览器功能是否可用。

示例：检查 `fetch` API（用于从网络获取数据的 JavaScript）


if ('fetch' in window) {
  // 'fetch' API 已支持。使用它来加载数据。
  fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // 处理数据
    })
    .catch(error => {
      // 处理错误
    });
} else {
  // 'fetch' API 不支持。使用 XMLHttpRequest 等回退。
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.json');
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 处理数据
    } else {
      // 处理错误
    }
  };
  xhr.onerror = function() {
    // 处理错误
  };
  xhr.send();
}

在此示例中，代码检查 `window` 对象中是否存在 `fetch` 属性。如果存在，则浏览器支持 `fetch` API，代码可以使用它。否则，将实现回退机制（使用 `XMLHttpRequest`）。

示例：检查 `classList` API 支持


if ('classList' in document.body) {
  // 浏览器支持 classList。使用 classList 方法（例如，add、remove）
  document.body.classList.add('has-js');
} else {
  // 浏览器不支持 classList。使用替代方法。
  // 例如，使用字符串操作来添加和删除 CSS 类
  document.body.className += ' has-js';
}

2. 使用 CSS 功能查询（`@supports`）

CSS 功能查询，由 `@supports` at-rule 表示，允许您根据浏览器是否支持特定的 CSS 功能或属性值来应用 CSS 规则。

示例：使用 `@supports` 为使用 Grid Layout 的布局设置样式


.container {
  display: flex; /* 浏览器不支持 grid 的回退 */
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

在此示例中，`.container` 最初使用 `flex` 布局（一项广泛支持的功能）。`@supports` 规则检查浏览器是否支持 `display: grid`。如果支持，则应用规则内的样式，用网格布局覆盖初始的 flex 布局。

3. 库和框架

一些库和框架提供内置的特性检测功能或简化该过程的实用程序。它们可以抽象出检查特定功能的复杂性。常见示例包括：

示例：使用 Modernizr


<html class="no-js" >
<head>
  <!-- 其他 meta 标签等 -->
  <script src="modernizr.min.js"></script>
</head>
<body>
  <div class="my-element"></div>
  <script>
    if (Modernizr.borderradius) {
      // 应用 border-radius 样式
      document.querySelector('.my-element').style.borderRadius = '10px';
    }
  </script>
</body>
</html>

在此场景中，如果浏览器支持 `border-radius`，Modernizr 会将 `borderradius` 类添加到 `` 元素。然后，JavaScript 代码检查此类并应用相应的样式。

实际示例和全球考量

让我们探讨一些特性检测的实际示例以及如何实现它们，同时考虑可访问性、国际化（i18n）和性能等全球性考量。

1. 响应式图片

响应式图片对于根据用户的设备和屏幕尺寸提供最佳图像尺寸至关重要。特性检测在有效实现它们方面起着至关重要的作用。

示例：检查 `srcset` 和 `sizes` 支持

`srcset` 和 `sizes` 是 HTML 属性，它们向浏览器提供有关图像源选项的信息，使浏览器能够为当前上下文选择最合适的图像。


<img
  src="image-fallback.jpg"
  srcset="image-small.jpg 480w, image-medium.jpg 768w, image-large.jpg 1024w"
  sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"
  alt="图像描述"
>

`srcset` 属性指定带有其宽度的图像源列表。`sizes` 属性根据媒体查询提供有关图像预期显示尺寸的信息。

如果浏览器不支持 `srcset` 和 `sizes`，您可以使用 JavaScript 和特性检测来实现类似的结果。`picturefill` 等库为旧浏览器提供了垫片。


if (!('srcset' in document.createElement('img')) || !('sizes' in document.createElement('img'))) {
  // 使用 picturefill.js 等垫片
  // picturefill 链接：https://scottjehl.github.io/picturefill/
  console.log('使用 picturefill 垫片');
}

这种方法可确保所有用户都能获得优化的图像，无论其浏览器如何。

2. Web 动画

CSS 动画和过渡可以显著增强用户体验，但它们也可能分散注意力或对某些用户造成问题。特性检测允许您仅在适当的时候提供这些动画。

示例：检测对 CSS 动画和过渡的支持


if (Modernizr.cssanimations && Modernizr.csstransitions) {
  // 应用动画类
  document.body.classList.add('animations-enabled');
} else {
  // 使用静态 UI 或不带动画的更基本体验
  document.body.classList.add('animations-disabled');
}

通过为旧浏览器或用户选择减少运动（通过 `prefers-reduced-motion` 媒体查询）的用户禁用动画，您可以提供更流畅、更具包容性的体验。

动画的全球考量：请注意，一些用户可能有前庭障碍或其他可能由动画触发的状况。始终提供禁用动画的选项。尊重用户的 `prefers-reduced-motion` 设置。

3. 表单验证

HTML5 引入了强大的表单验证功能，例如必填字段、输入类型验证（例如，email、number）和自定义错误消息。特性检测允许您利用这些功能，同时提供优雅的回退。

示例：检查 HTML5 表单验证支持


if ('checkValidity' in document.createElement('input')) {
  // 使用 HTML5 表单验证。
  // 这是内置的，不需要 JavaScript
} else {
  // 实现基于 JavaScript 的表单验证。
  // Parsley.js 等库可能很有用：
  // https://parsleyjs.org/
}

这确保了即使使用 JavaScript 实现，旧用户也能获得表单验证。考虑提供服务器端验证作为最终的安全和稳健层。

表单验证的全球考量：确保您的错误消息已本地化且可访问。使用用户的语言提供清晰、简洁的错误消息。考虑全球范围内使用的不同日期和数字格式。

4. 高级布局技术（例如，CSS Grid）

CSS Grid Layout 提供了一种创建复杂、响应式布局的强大方法。但是，确保旧浏览器得到妥善处理很重要。

示例：将 CSS Grid 与回退结合使用


.container {
  display: flex;  /* 旧浏览器的回退 */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

此代码使用 `flexbox` 作为不支持 `grid` 的浏览器的回退。如果浏览器支持 `grid`，则使用网格进行渲染。这种方法创建了一个响应式布局，在旧浏览器中能够优雅地降级。

布局的全球考量：为不同的屏幕尺寸、纵横比和输入方法（例如，触摸屏、键盘导航）进行设计。在全球使用的各种设备和浏览器上测试您的布局。如果您的目标受众包括阅读 RTL 脚本的用户（例如，阿拉伯语、希伯来语），请考虑右到左（RTL）语言支持。

特性检测的最佳实践

为了最大化特性检测的有效性，请遵循以下最佳实践：

解决可访问性（a11y）问题

可访问性是渐进增强的关键组成部分。特性检测有助于确保您的网站对残障用户可访问。

国际化（i18n）和特性检测

在构建全球性网站时，请考虑 i18n。特性检测可以通过促进特定语言的内容和行为来为您的 i18n 工作做出贡献。

结论：面向未来而构建

渐进增强和特性检测不仅仅是技术实践；它们是 Web 开发的基本原则，可帮助您为全球受众创建包容、高性能和有弹性的 Web 体验。通过采纳这些策略，您可以构建能够适应不断变化的技术环境的网站，确保您的内容可供所有用户访问和吸引，无论其设备、浏览器或位置如何。通过专注于核心功能、拥抱特性检测以及优先考虑可访问性，您可以为所有人创造更健壮、更用户友好的 Web 体验。

随着 Web 的不断发展，渐进增强的重要性只会越来越大。通过今天采纳这些实践，您就是在投资您的 Web 应用程序的未来，并确保它们在全球数字生态系统中取得成功。

可操作的见解：