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

我想在网页上使用一些新的HTML5表单属性和输入类型。一些浏览器已经支持他们，其他浏览器不支持，也不会。这就是为什么我想要使用Modernizr - 那是我的麻烦开始。Modernizr - 加载polyfills的正确方法/使用自定义检测

据我的理解，Modernizr本身不是一个polyfill，而是一个脚本，可以测试浏览器是否能够支持一些新的HTML5/CSS3。如果有必要，可以加载一个polyfill来“模拟”这些功能，以便它们可以用于不支持/旧版本的浏览器。这是正确的，我猜？

关于测试/加载：什么是用Modernizr加载polyfills的正确或最好的方法？
在我发现这个文档：

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

来源

2013-01-24 Sven

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

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

来源

2013-01-27 20:02:15 Spudley

'yepnope'现已被弃用。 –

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

来源

2017-01-08 15:16:47 Westy92

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

回答

相关问题