标签: modernizr

使用Twitter Bootstrap实现Modernizr是否可以？

我目前正在使用带有Google的html5shiv的Bootstrap,我想知道我是否可以使用Modernizr,或者只是为了让老版IE浏览器激活HTML5元素而过度杀戮？

提前致谢

我们正在使用ASP.NET Web Optimization Framework进行捆绑和缩小.一个包只包含jquery和modernizr.这一切都适用于jquery 1.8.3,但由于我们更新到1.9.0,组合jquery/modernizer包不再工作了.

bundles.Add(new ScriptBundle("~/st-scripts-load-first.js")
       .Include("~/Resources/JavaScript/jquery-1.9.0.js",
                "~/Resources/JavaScript/modernizr.form-placeholder.js"));

我们在目录中有jquery-1.9.0.js和jquery-1.9.0.min.js.如果没有.min文件,优化框架将自动生成一个.min文件.如果.min文件存在与否则它不起作用.
它适用于编译debug ="true"并且没有缩小或捆绑.

/* Minification failed. Returning unminified contents.
(5,2-3): run-time warning JS1195: Expected expression: *
(11,60-61): run-time warning JS1004: Expected ';': {
(395,2-3): run-time warning JS1195: Expected expression: )
(397,21-22): run-time warning JS1004: Expected ';': {
(397,4590-4591): run-time warning JS1195: Expected expression: )
(398,28-29): run-time warning JS1195: Expected expression: )
(398,84-85): run-time warning JS1002: Syntax error: }
(402,44-45): run-time warning JS1195: Expected expression: )
(408,1-2): run-time warning JS1002: Syntax error: …

我一直跳进Mod​​ernizr位于头部的项目,但它没有被使用(至少对于特征检测).现在,我喜欢Modernizr,我经常使用它进行特征检测,并对需要它的项目进行回退; 然而,我进入它的最后三个项目一直没有调用任何特征检测类.这些项目使用的是vanilla javascript 和/或根本不需要jQuery polyfill. ¹那就是说...如果你没有使用特征检测并且真的不需要加载jQuery库 ²,那么Modernizr除了要添加额外的HTTP请求和资源之外还做了什么吗？

我对jQuery/javascript不够强大,无法理解它是否会影响其他任何内容.

编辑

¹&² - Modernizr是javascript,不需要jQuery库(这让我想知道为什么还要加载jQuery库,至少在这些情况下).

Modernizr.min只有#-shiv-cssclasses-load7.57 KB而html5shiv.min只有3 KB.

我试图在测试站点上使用新的内容安全策略(CSP) HTTP标头.当我将CSP与Modernizr结合使用时,我遇到了CSP违规错误.这是我使用的CSP策略:

Content-Security-Policy: default-src'self'; script-src'self'ajax.googleapis.com ajax.aspnetcdn.com; style-src'self'; img-src'self'; font-src'self'; report-uri /WebResource.axd?cspReport=true

以下是Chrome浏览器控制台中的错误:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". 
Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

window.Modernizr.injectElementWithStyles   - modernizr-2.7.2.js:134
window.Modernizr.tests.touch               - modernizr-2.7.2.js:457(anonymous function)
modernizr-2.7.2.js:949(anonymous function) - modernizr-2.7.2.js:1406

我在Github Modernizr网站上发现了以下解决方法.但是,解决方法是在3月份首次提出并做了一点Google-Fu,我找不到解决此问题的方法或解决方法.

我知道我可以包含unsafe-inline指令,它可以解决这个错误,但这也使得不安全的代码能够运行并且首先取消CSP的使用.有没有人有任何解决方案？

更新 - 什么是CSP

CSP是所有主流浏览器(包括Edge)支持的HTTP头.基本上它是允许浏览器用于呈现页面的白色内容列表.在这里了解更多信息或在此处和此处阅读Mozilla的CSP文档.

更新 - …

Modernizr很棒但是示例测试position: fixed非常不完整:

• iOS 4及更低的回报true,但不支持position: fixed
• 歌剧院Windows返回false,同时它支持position: fixed

我发现了另一个基于Modernizr测试的测试,但添加了iOS检测:https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8.由于即将推出的iOS 5确实支持,它并不是真正的未来证据position: fixed.

在没有浏览器嗅探的情况下,你们能帮我找到一种方法来测试在iOS中修复的位置吗？

// Test for position:fixed support
Modernizr.addTest('positionfixed', function () {
    var test  = document.createElement('div'),
      control = test.cloneNode(false),
         fake = false,
         root = document.body || (function () {
            fake = true;
            return document.documentElement.appendChild(document.createElement('body'));
      }());

   var oldCssText = root.style.cssText;
   root.style.cssText = 'padding:0;margin:0';
   test.style.cssText = 'position:fixed;top:42px';
   root.appendChild(test);
   root.appendChild(control);

   var ret = test.offsetTop !== control.offsetTop;

   root.removeChild(test);
   root.removeChild(control);
   root.style.cssText = oldCssText; …

围绕Modernizr源代码,我发现了一件奇怪的事情:

window.Modernizr = (function(window,document,undefined) {

之后,将使用两个参数(this, this.document)调用此函数.

为什么undefined在这里使用？它有意义还是只是奇怪的代码风格？

我使用yepnope.js动态加载javascript文件,我注意到我的脚本似乎根据Firebug和Webkit Inspector加载了两次.

问题是在Firebug的Net面板(Firefox 4最新版)中,他们的反应是200,而不是304.它似乎比Chrome慢.

我上传了这个显示问题的视频.您可以看到文件jquery-1.6.1.min.js和libs.js加载的时间.

我用来执行此操作的代码如下,简化:

Modernizr.load({
                load: ['jquery-1.6.1.min.js', 'libs.js'],
                complete: function () {
                    console.log("loaded");
                }
});

Modernizr.load()是yepnope().

我正在编写一个Angular 2应用程序,但我意识到有些用户可能没有使用可以支持Angular 2的浏览器.

我检查是否启用了Javascript,我更感兴趣的是用户的浏览器是否不支持Angular 2所需的某些JS/HTML5 /其他功能.

评估用户浏览器是否支持Angular 2的最佳方法是什么,如果不支持则显示消息？

我知道例如Modernizer,但不知道从哪里开始,因为Modernizer的重点似乎是逐步组装兼容性检查而不是提供检查整个框架兼容性的解决方案.

我正在尝试使用Modernizr 2检测媒体查询是否存在,然后在适当时加载respond.js.

我把它放在我的script.js文件中......

Modernizr.load({
  test: Modernizr.mq,
  yep : '',
  nope: 'mylibs/respond.js'
});

我究竟做错了什么？我很惊讶没有关于如何在Modernizr网站上使用媒体查询执行此操作的示例.这是我正在使用的Modernizr的版本......

http://www.modernizr.com/download/#-backgroundsize-borderradius-boxshadow-iepp-respond-mq-cssclasses-teststyles-testprop-testallprops-prefixes-domprefixes-load

有没有办法检测浏览器对后台附件的支持:修复？

编辑:虽然桌面浏览器广泛支持此功能,但它在便携式设备上的支持很差,我希望能够检测到该功能.