Question

我最近看过Modernizr并阅读了文档，但有些事情对我来说似乎有点不清楚。从阅读文档看起来，Modernizr主要用于检测浏览器中是否有某些东西可用，例如border-radius，媒体查询等。它是否修复了这些东西以便在旧浏览器上按预期呈现？

我在阅读有关Polyfills的文档时，但我不确定如何实现这些，以便在不支持它们的浏览器上为div添加圆角。

此外，Modernizr可用于允许媒体查询在旧版浏览器中工作，或者它只是一种检测媒体查询是否可以使用的方法。

如果它只是一种检测工具，为什么它如此有用？我已经知道我不能在旧版本的Internet Explorer上使用媒体查询或border-radius。如果它不仅仅是一个检测工具，那么如何使用它在旧浏览器中添加更新的功能呢？

Answer 1

我想我的问题是，如果它只是一个检测工具那么为什么它有用吗？我已经知道我不能使用媒体查询或例如，旧版Internet Explorer上的border-radius。

是的，它是一种检测工具。 Modernizr的目的是功能嗅探而不是浏览器嗅探。你提到你已经知道IE的功能了。忘记IE /特定浏览器以及它们可以做什么。 Modernizr可以帮助您确定某个功能是否可用，然后轻松编写CSS / JS用例以供回退。

Answer 2

Modernizer使用javascript在页面加载时将一堆类添加到页面的HTML元素中。 E.g。

<HTML class="backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg">

这些类描述了HTML5 / CSS3功能是否可用于浏览页面的浏览器。

这允许您通过仅应用CSS3样式来使用更高效的css（如果浏览器可以处理它们）（渐进增强）。

E.g。

.no-audio .music-player {
   display: none
}
.audio .music-player {
   /* styles for music player */
}

同样，Modernizer允许您使用它的javascript API测试这些元素是否可用。这对于为旧浏览器（polyfill）提供回退非常有用。因此，对于圆角，您可以这样做：

Modernizr.load({
  test: Modernizr.borderradius,
  yep : /* do nothing */
  nope: 'borderradius.js' /* css3 pie for example */
});

或者：

if (Modernizr.borderradius) {
   // do nothing
}else{
    /* script for making rounded corners e.g css3 pie */
}

或者在CSS中只有我们borderradius（如果可用）：

.box {
 border: 1px solid #000; /* all browsers, no rounded corners */
}

.borderradius .box{
  border-radius: 15px; /* only CSS3 compliant browsers get this style */
}

旧版（IE＆lt; 9）浏览器的媒体查询需要另一个插件，例如repond.js

具有边界半径，媒体查询等的Modernizr

2 个答案: