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()块，如果您在同一个JS文件中有一个与块特性相关的代码，根据该功能是否是要切换或更改，这将更有用可用。

所以两种变体都有它们的位置。

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

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

在文档（http://modernizr.com/docs/）中查找标题为“Modernizr检测到的功能”的部分。其中列出了检测到的所有功能，以及Modernizr为其提供的名称。

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

Answer 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');
  });
}

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

2 个答案: