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中的新语义元素并设置其样式。其他答案已经显示了一些polyfill选项，但是，我建议您重新考虑将纯视觉效果（如border-radius）添加到旧浏览器中。 Polyfills减慢旧浏览器的速度（有时非常显着），并使这些用户的整体体验更糟糕。

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进行此操作，但它有一些您想要阅读的跨域问题。）

Modernizr确实有IEPP for HTML5 shim support，它附带YepNope.js as Modernizr.load，这是一个很好的polyfills加载器机制，因此您可以加载自己对旧浏览器的支持。这将有助于您放弃对pattern和placeholder等属性的支持，而不会超载对其有本机支持的浏览器。

Answer 5

Modernizr内部使用您将使用的相同JS代码。例如如果要使用Native方法检查“输入”占位符支持，可以使用;

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;
}

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

理想情况下，我更喜欢本地方式进行更简单和更少量的检查......

只有非常复杂的事情，我们才能选择Modernizr

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

5 个答案: