Modernizr-正确的方法来填充polyfills/使用自定义检测 [英] Modernizr - Correct way of loading polyfills / using custom detects

问题描述

我想在网页上使用一些新的HTML5表单属性和输入类型.一些浏览器已经支持它们，而其他浏览器则不支持.那就是为什么我要使用Modernizr的原因-那就是我的麻烦开始了.

I want to use some new HTML5 form attributes and input types on a webpage. Some browsers already support them, others don't and never will. Thats why I want to use Modernizr - and thats were my trouble begins.

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

To my understanding, Modernizr alone is not a polyfill but a script that can test if the browser is capable of some new HTML5 / CSS3 stuff. If necessary, a polyfill can be loaded which "emulates" these features so they can be used in non-supporting / older browsers. This is correct I guess?

关于测试/加载:用Modernizr加载polyfills的正确或最佳方法是什么?
在文档中，我发现了这一点:

Regarding the testing / loading: Whats the correct or best way to load polyfills with Modernizr?
In the documentation I found this:

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

但是有些页面也这样做:

but some pages also do it like this:

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

此外，我实际上如何知道如何调用这些功能?像 Modernizr.geolocation 这样的东西对于每个特征检测肯定存在吗?

Also, how do I actually get to know how these feature detects are called? Something like Modernizr.geolocation surely exists for every feature detect?

在Modernizr GitHub存储库中，也有许多用户贡献的功能检测器.如何在我的Modernizr版本中实现这些功能?还是只使用他们的构建器是最好的?

In the Modernizr GitHub repository, there are also many user contributed feature detects. How do I implement these into my version of Modernizr? Or is it the best to just use their builder?

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

In Safari, the HTML5 form validation works, but there is no UI for displaying error messages. Basically, the feature is just half implemented. That's why Modernizr gives a false positive in Safari, like already mentioned here: https://github.com/Modernizr/Modernizr/issues/266 Apparently someone fixed this with such a custom test, but I still don't understand how to use it.1

推荐答案

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

The two techniques you're seeing are both valid.

对于 yep / nope 版本，这是加载要包含在单独文件中的polyfill的理想方法.这不必是Javascript，也可以是CSS文件.

In the case of the yep / nope version, this is the ideal way of loading a polyfill that is to be included from a separate file. This doesn't have to be Javascript -- it can also be a CSS file as well.

对于标准JS if()块，如果在同一JS文件中有一个依赖于块功能的代码(要根据需要切换进出)，则此功能将更加有用关于该功能是否可用.

In the case of the standard JS if() block, this would be more useful if you had a block feature-dependent code in the same JS file that you wanted to switch in or out depending on whether the feature was available.

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

So both variants have their place.

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

However, you may also see the if() block option being used to include separate JS files, because the yep / nope syntax was not available in some earlier versions of Modernizr. Yepnope is actually an entirely separate library that has been incorporated into Modernizr in order to make the syntax for loading polyfill files more readable.

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

Re your question about how to know what the features are that Modernizr can detect, the answer is, of course, in the Modernizr documentation.

在文档( http://modernizr.com/docs/)中找到标题为由Modernizr检测到的功能".其中列出了所有检测到的功能，以及Modernizr为其指定的名称.

Look in the docs (http://modernizr.com/docs/) for the section entitled "Features detected by Modernizr". This has a list of all the features detected, along with the name given to it by Modernizr.

重新检测到您提到的损坏功能-链接到的故障单被标记为已关闭一年左右，并且从故障单上的注释中可以看出，好像已将改进测试的代码添加到了主要的Modernizr中代码.确保您正在运行最新版本，然后再次检查它是否对您有用.

Re the broken feature detect you mentioned -- the ticket you linked to was marked as closed nearly a year ago, and it looks from the notes on the ticket as though the code for the improved test have been added to the main Modernizr code. Make sure you're running the latest version, and double-check whether this is working for you.

这篇关于Modernizr-正确的方法来填充polyfills/使用自定义检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！