怎么检测浏览器是否支持HTML5特性？

检测浏览器是否支持特定的 HTML5 特性，可以使用几种方法：

1. Modernizr:

Modernizr 是一个流行的 JavaScript 库，可以检测浏览器对各种 HTML5 和 CSS3 特性的支持。它会创建一个包含各种特性检测结果的 JavaScript 对象，你可以使用它来根据浏览器的功能调整你的代码。

if (Modernizr.canvas) {
  // 浏览器支持 canvas 元素
  var canvas = document.createElement('canvas');
  // ... 使用 canvas ...
} else {
  // 浏览器不支持 canvas 元素
  // ... 提供替代方案 ...
}

2. @supports CSS 查询:

@supports CSS 查询允许你根据浏览器是否支持特定的 CSS 特性来应用样式。虽然这主要用于 CSS，但它也可以间接地用于检测 HTML 特性，特别是那些与 CSS 紧密相关的特性，例如 display: grid 或 display: flex。

@supports (display: grid) {
  .container {
    display: grid;
  }
}

在 JavaScript 中，你可以使用 CSS.supports() 方法来检查 @supports 查询的结果:

if (CSS.supports('display', 'grid')) {
  // 支持 grid 布局
}

3. 元素对象检测 (特性检测):

对于某些 HTML5 特性，你可以直接在 JavaScript 中检查它们是否存在于相关的 DOM 元素上。例如，要检查浏览器是否支持 Geolocation API，你可以检查 navigator.geolocation 对象是否存在：

if (navigator.geolocation) {
  // 浏览器支持 Geolocation API
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
} else {
  // 浏览器不支持 Geolocation API
}

类似地，你可以检查特定元素的属性或方法是否存在：

var video = document.createElement('video');
if (video.canPlayType) {
  // 支持 video 元素和 canPlayType 方法
}

4. try...catch:

对于某些 API，你可以尝试使用它们，并在 try...catch 块中捕获任何错误。如果出现错误，则表示浏览器不支持该 API。

try {
  localStorage.setItem('test', 'test');
  localStorage.removeItem('test');
  // 支持 localStorage
} catch(e) {
  // 不支持 localStorage
}

选择哪种方法？

• Modernizr: 对于需要检测大量特性的情况，Modernizr 是一个很好的选择，因为它可以为你处理很多繁重的工作。

• @supports: 最适合直接在 CSS 中处理样式差异的情况。

• 元素对象检测/特性检测: 对于特定元素或 API 的简单检测，这是最直接和最有效的方法。

• try...catch: 对于可能引发错误的 API，这是一个不错的选择，但应谨慎使用，因为它可能会掩盖其他错误。

通常情况下，推荐使用特性检测 (元素对象检测) 或 Modernizr。try...catch 应该作为最后的手段，因为它可能会掩盖其他错误。 @supports 主要用于 CSS，但在 JavaScript 中配合 CSS.supports() 使用，也是一种有效的方式. 选择哪种方法取决于你的具体需求和项目规模。