Modernizr.js 是否有助于在旧版浏览器上显示 css 3 和 html 5？如何？

Question

我在网页中使用了 css 3、html 5，我想使用 Modernizr 来显示一些 html5 属性和一些 css 3，例如旧浏览器上的 border-radius，
Modernizr 在这方面有帮助吗？以及如何运行它。

Answer 1

Modernizr 只会帮助您检测某些功能，因此您必须自己添加 JS 修复。

如果您想要使用预打包的解决方案，这可能会有所帮助： https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

在您的情况下，这可能是要走的路：http://css3pie.com/

Answer 2

Modernizr 不会向除 HTML5 Shiv 之外的旧版浏览器添加缺失的功能，以便您可以使用 HTML5 中的新语义元素并设置其样式。其他答案已经显示了一些填充选项，但是，我建议您重新考虑以这种方式向旧浏览器添加纯粹的视觉效果，例如 border-radius 。 Polyfill 会降低旧版浏览器的速度（有时非常显着），并使这些用户的整体体验更差。

Answer 3

您可以使用modernizr 来检测可用的内容，例如圆角。如果不是，您可以通过 Modernizr API 优雅地降级，甚至使用插件来模拟该功能。

<script type="text/javascript">
    Modernizr.load({
        test: Modernizr.borderradius,
        nope: 'script/jquery.corner.js',
        callback: function () {
            $('article').corner();
            $('figure').corner();
        }
    });
</script>

代码片段取自 http://blogs.msdn.com/b/jennifer/archive/2011/08/04/html5-part-4-using-html5-while-retaining-support-for-older-browsers。 ASPX

Answer 4

Modernizr 对 CSS3 没有帮助。 来实现此目的，但它有一些您需要阅读的跨域问题。）

（您可以使用 Selectivizr 确实有 IEPP for HTML5 shim support 并且它附带 <一个href="http://www.modernizr.com/docs/#load" rel="nofollow">YepNope.js as Modernizr.load，这是一个很棒的 Polyfills 加载器机制，因此您可以加载自己的支持对于较旧的浏览器。这将帮助您放弃对 pattern 和 placeholder 等属性的支持，而不会超载对其具有本机支持的浏览器。

Answer 5

Modernizr 内部使用与您在其他情况下使用的相同的 JS 代码。
例如，如果您想使用本机方式检查“输入”占位符支持，您可以使用；

function support_input_placeholder() {  
    var i = document.createElement('input');
    return 'placeholder' in i;
}

虽然 Modernizr 的检查方式就像

function support_input_modern() {   
    if (Modernizr.input.placeholder) 
        return true;
    else
        return false;
}

但是上面的代码具有与本机方式相同的内部工作...

所以理想情况下，我更喜欢本机方式来进行更简单和更少的检查...

仅对于非常复杂的事情，应该我们追求现代化