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 文件。

在标准 JSif()块的情况下，如果您在同一个 JS 文件中有块依赖于功能的代码，并且您想根据该功能是否可用来切换或切换，这将更有用。

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

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

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

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

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