7

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

4

2 回答 2

5

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

对于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 代码中。确保您运行的是最新版本，并仔细检查这是否适合您。

于 2013-01-27T20:02:15.077 回答
0

从 Modernizr v3 开始，通过 Modernizr.load() 使用 Yepnope 已被弃用。一个不错的选择是使用 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');
  });
}
于 2017-01-08T15:16:47.917 回答