Question

有没有办法获取Modernizr检测到的所有功能的列表？

功能的当前命名非常不直观，例如检查功能“画布”，您只需要调用Modernizr.canvas但是为了检查“forms-placeholder”或“forms_placeholder”（它取决于无论您是在页面上还是在生成的代码中检查功能名称，都必须致电Modernizr.placeholder

在功能命名方面似乎没有规则。我甚至无法找到所有这些功能的完整参考，尤其是“非核心”功能。 modernizr.com上的文档很差。它也缺乏一个很好的教程。我所能做的只是猜测它的名称，因为只有其中一些被包含为<html>标签的类名（例如，你不会在那里找到“输入类型”或“输入属性”）。

我只需要在支持特定功能时调用某些功能，例如：

if(Modernizr.canvas){
 // draw canvas
}

我试图检测浏览器是否支持.toDataURL('image/png')功能，但Modernizr脚本只返回“todataurljpeg”和“todataurlwebp”，即使“todataurlpng”是somwhere in there。

如何通过JavaScript检索所有Modernizer.features名称？任何链接到一些好的参考或教程将是赞赏（显然不是来自Modernizr主页的那些）。

Answer 1

我认为你最大的问题是你正在混淆你的版本。在当前的稳定标记2.8.1中，这是todataurl的测试：

// canvas.toDataURL type support
// http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl

// This test is asynchronous. Watch out.

(function () {

    if (!Modernizr.canvas) {
        return false;
    }

    var image = new Image(),
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext('2d');

    image.onload = function() {
        ctx.drawImage(image, 0, 0);

        Modernizr.addTest('todataurljpeg', function() {
            return canvas.toDataURL('image/jpeg').indexOf('data:image/jpeg') === 0;
        });
        Modernizr.addTest('todataurlwebp', function() {
            return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
        });
    };

    image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
}());

（来源：https://github.com/Modernizr/Modernizr/blob/v2.8.1/feature-detects/canvas-todataurl-type.js）

您特别注意到＆＃39; todataurlpng＆＃39;是不在场。

现在，这是大师级考试（3.0 beta）：

/*!
{
  "name": "canvas.toDataURL type support",
  "property": ["todataurljpeg", "todataurlpng", "todataurlwebp"],
  "tags": ["canvas"],
  "builderAliases": ["canvas_todataurl_type"],
  "async" : false,
  "notes": [{
    "name": "HTML5 Spec",
    "href": "http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl"
  }]
}
!*/
define(['Modernizr', 'createElement', 'test/canvas'], function( Modernizr, createElement ) {

  var canvas = createElement('canvas');

  Modernizr.addTest('todataurljpeg', function() {
    return !!Modernizr.canvas && canvas.toDataURL('image/jpeg').indexOf('data:image/jpeg') === 0;
  });
  Modernizr.addTest('todataurlpng', function() {
    return !!Modernizr.canvas && canvas.toDataURL('image/png').indexOf('data:image/png') === 0;
  });
  Modernizr.addTest('todataurlwebp', function() {
    return !!Modernizr.canvas && canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
  });

});

（来源：https://github.com/Modernizr/Modernizr/blob/master/feature-detects/canvas/todataurl.js）

有它！

文档比你想象的要好，但3.0 beta是一个重大的重写，文档还没有更新（主要是因为它还没有实际发布）。请记住，如果您认为某些内容应该存在或者未在文档中提及，则可能是测试版中的 new 。

至于所有功能检测的列表，还有docs，这仍然是您最安全的选择。我也found this nifty site，但看起来，尽管它在描述中说的是，该工具正在引用主分支，因此，从3.0 beta开始，带有所有新的和更改的检测。所以现在可能有些偏僻。

如何获取Modernizr功能的完整列表

1 个答案: