html - Modernizr - 加载 polyfills/使用自定义检测的正确方法

Question

我想在网页上使用一些新的 HTML5 表单属性和输入类型。有些浏览器已经支持它们，有些则不支持，也永远不会支持。这就是我想使用 Modernizr 的原因——这就是我的麻烦开始的原因。

据我了解，Modernizr 本身并不是一个 polyfill，而是一个可以测试浏览器是否支持某些新的 HTML5/CSS3 内容的脚本。如有必要，可以加载“模拟”这些功能的 polyfill，以便它们可以在不支持/较旧的浏览器中使用。我猜这是正确的吗？

关于测试/加载:使用 Modernizr 加载 polyfill 的正确或最佳方法是什么？
在文档中我发现了这个:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

但有些页面也这样做:

if (Modernizr.touch){
   // bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
   // bind to normal click, mousemove, etc
}

此外，我如何真正了解这些特征检测的调用方式？像 Modernizr.geolocation 这样的东西肯定存在于每个特征检测中？

在 Modernizr GitHub 仓库中，也有很多用户贡献的特性检测。 如何将这些实现到我的 Modernizr 版本中？或者只使用他们的构建器是最好的？

在 Safari 中，HTML5 表单验证有效，但没有用于显示错误消息的 UI。基本上，该功能只实现了一半。这就是 Modernizr 在 Safari 中给出误报的原因，就像这里已经提到的:https://github.com/Modernizr/Modernizr/issues/266显然有人用这样的自定义测试解决了这个问题，但我仍然不明白如何使用它。 1

Answer 1

您看到的两种技术都是有效的。

在 yep/nope 版本的情况下，这是加载要从单独文件中包含的 polyfill 的理想方式。这不一定是 Javascript——它也可以是 CSS 文件。

在标准 JS if() block 的情况下，如果您在同一 JS 文件中有一个 block 特性相关的代码，您想要切换进或出取决于关于该功能是否可用。

所以这两种变体都有自己的位置。

但是，您可能还会看到 if() block 选项用于包含单独的 JS 文件，因为 yep/nope 语法在某些早期版本的 Modernizr 中不可用。 Yepnope 实际上是一个完全独立的库，它已被合并到 Modernizr 中，以使加载 polyfill 文件的语法更具可读性。

关于如何知道 Modernizr 可以检测到哪些功能的问题，答案当然在 Modernizr 文档中。

在文档 ( http://modernizr.com/docs/ ) 中查找标题为“Modernizr 检测到的功能”的部分。它包含检测到的所有功能的列表，以及 Modernizr 为其指定的名称。

关于您提到的损坏的功能检测——您链接到的票证在将近一年前被标记为已关闭，从票证上的注释来看，好像改进测试的代码已添加到主要的 Modernizr代码。确保您运行的是最新版本，并仔细检查它是否适合您。