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

【问题标题】：Modernizr - Correct way of loading polyfills / using custom detectsModernizr - 加载 polyfills/使用自定义检测的正确方法
【发布时间】：2017-01-08 23:16:47
【问题描述】：

我想在网页上使用一些新的 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

【问题讨论】：

标签： html modernizr polyfills

【解决方案1】：

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

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

在标准 JS if() 块的情况下，如果您在同一个 JS 文件中有一个块功能相关的代码，您想根据该功能是否可用来切换该功能，这将更加有用。

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

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

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

查看文档 (http://modernizr.com/docs/) 中标题为“Modernizr 检测到的功能”的部分。这有一个检测到的所有功能的列表，以及 Modernizr 给它的名称。

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

【讨论】：

yepnope 现已弃用。

【解决方案2】：

从 Modernizr v3 开始，通过 Modernizr.load() 使用 Yepnope 一直是 deprecated。一个不错的选择是使用 jQuery：

if (Modernizr.geolocation){
  console.log('match');
} else {
  // load polyfill
  $.getScript('path/to/script.js')
  .done(function() {
    console.log('script loaded');
  })
  .fail(function() {
    console.log('script failed to load');
  });
}

【讨论】：