使用Modernizr来填充CSS过渡

Question

我将modernizr js作为HTML5 Boilerplate的一部分安装，但我不知道如何使用它。我用一些过渡创建了一个CSS3导航。我知道IE不支持它们，但据我了解，Modernizr可以使用js进行polyfill。是对的吗？我怎么做？我不太了解js。

my jsfiddle

Answer 1

您需要添加yepnope脚本以检查是否支持css3转换。例如：

yepnope({
  test : Modernizr.transition,
  yep  : '',
  nope : ['polyfillfortransition.js']
});

<强>更新

实际上如果你使用jQuery，那就有一个插件。您不需要执行上面的代码。 Addy Osmani的这篇文章将更好地解释http://addyosmani.com/blog/css3transitions-jquery/。在那篇文章中，他还解释了使用yepnope。

Answer 2

Modernizr不为CSS3功能提供任何polyfill。它确实提供了一个简单的polyfill，可以在旧版浏览器中设置HTML5元素的样式。除此之外，它主要用作通过向页面的html标记添加类名来检测功能的方法。

所以在你的CSS中，你可以做类似

的事情

.borderradius .mydiv {
    border-radius: 8px;
}

如果你的浏览器支持它，那么Modernizer会将.borderradius类名添加到页面的html标签中......或者你可以在你的js中使用它来选择性地回退到插件等。