标签: modernizr

我在看 Modernizr，它应该可以帮助进行特征检测，这应该是确定您的网站是否与给定的网络浏览器兼容的蜜蜂膝盖，但我没有看到任何表明我可以使用它来检测自定义 HTML 的内容我们在内容中创建和定义的元素。

如果它不是现代的，我如何可靠地检测浏览器是否能够以“HTML 5”的方式处理自定义 HTML 元素？

我正在构建一个网络应用程序并且刚刚安装了 ssl。

一切似乎都很好，除了我在不安全的连接上加载字体时遇到的这两个错误。控制台表明这是 Modernizr 正在做的事情，但我不知道在哪里以及如何修复它。

这是控制台输出：

The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4

我实际上使用 TypeKit 作为我的字体，所以我不知道这些 Google 字体在页面上做什么以及为什么 Modernizr 会加载它们。

在 Modernizr v3 之前，我使用的是 yepnope.js

Modernizr.load 和 yepnope.js 都已弃用。我们现在如何有条件地调用样式表或 javascript 文件？

适用于 Modernizr v2.5.3 的示例：

Modernizr.load({
  test: Modernizr['object-fit'],
  nope: ['./dist/scripts/object-fit.js'],
  complete: function(){
  if (!Modernizr['object-fit']) {
   jQuery(".poster img").imageScale({
   scale: "best-fill", 
   rescaleOnResize: true
   });
  }
 }
});

我尝试使用Modernizr的检测的支持date和datetime输入字段（HTML5），但这些变量总是返回false，即使他们的支持（在Chrome IE）：

if(Modernizr.inputtypes.datetime) {
    jQuery("#what").html("Yes, I know datetime input fields.");
} else {
    jQuery("#what").html("Sorry, what is a datetime input field?");
}

#what {
    padding : 2em;
    margin  : 2em;
    text-align : center;
    
    border : 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="what">Well... I'm not sure.</div>

通过研究这个问题，这个错误似乎是一个老习惯。

我该如何解决？

我为我的网站编写了一个 chrome 扩展，但发现扩展在 chrome 的移动浏览器上不起作用。现在，该网站会检查用户是否安装了扩展程序。如果用户不这样做，网站会要求用户通过内联安装来安装扩展。

问题是，如果用户在移动设备上运行 chrome，我不想提示用户安装扩展程序，因为它不起作用。我想检查浏览器运行扩展的能力，而不是移动设备的用户代理嗅探。Modernizr 似乎没有对此进行检查。有任何想法吗？

Chromium 警告我我的事件侦听器不是被动的。

美好的。

我不会在那里使用event.preventDefault()，所以我愿意让它被动。

但是当我阅读详细说明时，该示例使用 Modernizr 来检查该属性是否可用。

addEventListener(document, "touchstart", function(e) {
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

但是我没有安装 Modernizr，我发现为这个非常具体的用例设置它很痛苦。

所以问题是：如果我盲目地写会发生什么：

$el.addEventListener('touchstart', () => {}, {passive: true})?

在旧浏览器中？

我的猜测是该对象可能被评估为true，对吗？没有错误要上升？

我正在使用html5boilerplate和Modernizr库.我的应用程序是使用jQuery构建的.Modernizr和jQuery都内置了特征检测,但我的理解是Modernizr更完整.我打算使用Modernizr进行特征检测,除非有充分的理由为此使用jQuery.

我的应用程序仅适用于更现代的浏览器(例如IE7 +,Firefox,Chrome,Safari和更新的Opera),但它在IE6中仍然有效.我想确保用户在使用旧版浏览器(如IE6)时会看到一个很大的警告.如果他们还没有使用Chrome浏览器或其他HTML5兼容浏览器,我还想显示"建议".

我不想使用用户代理测试.

• 是否有一个特定的功能列表,我应该测试,以确定用户是否使用IE6？
• 是否有特定的功能列表,我应该测试以确定用户是否使用相当合规的HTML5浏览器(Chrome,Safari,IE9等)进行浏览

刚刚开始一个新的HTML5项目并使用modernizr.js

我注意到在modernizr docs页面上它说你可以使用以下内容:

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.6.1.min.js');
      }
    }
  }
]);

所以在我的HTML中我有这个:

<script src="scripts/modernizr-2.0.6.js"></script>
<script>
Modernizr.load([
    {
        load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
        complete: function () {
            if ( !window.jQuery ) {
                        Modernizr.load('scripts/jquery-1.6.1.min.js');
            }
        }
    }
]);
</script>

但看着萤火虫,没有jquery正在装载.

我错过了一些明显的东西吗？

干杯,阿迪

你能不能让我清楚一点Modernizr.

如果我使用一个功能(比方说border-radius),我使用较旧的浏览器运行它.现代化程序是否会自动将css添加到页面中,或者我应该编写代码以使控件呈现为具有边框.如果第二种情况属实,那么我为什么要使用Modernizr呢？

我在尝试使用Modernizr版本的yepnope加载脚本时遇到问题,并且无法理解为什么它们不同.如果我使用yep nope加载脚本,它可以正常工作:

<script type="text/javascript" src="/js/yepnope.1.0.2-min.js"></script>
<script type="text/javascript">
yepnope([  
    '/js/fancy-box-2.0.4/jquery.fancybox.css',  
    '/js/jquery-1.7.min.js',  
    '/js/jquery.form-defaults.js',  
    '/js/jquery.cycle.all.js',  
    '/js/jquery.easing.1.3.js',  
    '/js/fancy-box-2.0.4/jquery.fancybox.js',  
    '/js/functions.js',  
    'http://use.typekit.com/uoy8fub.js'
]); 
</script>

但如果我尝试使用Modernizr打包版本的yep nope我无法得到任何东西加载...帮助？

<script type="text/javascript" src="/js/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Modernizr.load([  
    '/js/fancy-box-2.0.4/jquery.fancybox.css',  
    '/js/modernizr-2.0.6.js',  
    '/js/jquery-1.7.min.js',  
    '/js/jquery.form-defaults.js',  
    '/js/jquery.cycle.all.js',  
    '/js/jquery.easing.1.3.js',  
    '/js/fancy-box-2.0.4/jquery.fancybox.js',  
    '/js/functions.js',  
    'http://use.typekit.com/uoy8fub.js'
]); 
</script>