CODEWITHSUNDEEP
javascriptcssmodernizrhtml5boilerplate
imakeitpretty
imakeitpretty

Reputation: 2116

Using Modernizr to Polyfill CSS transitions

I have the modernizr js installed as part of HTML5 Boilerplate, but I don't know how to use it. I created a CSS3 nav with some transitions. I know IE doesn't support them, but as I understand it, Modernizr can polyfill using js. Is that right? How do I do that? I don't know much js.

my jsfiddle

Upvotes: 2

Views: 2645

Answers (2)

Zendy
Zendy

Reputation: 1684

You need to add the yepnope script to check if css3 transition is supported or not. For example like this:

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

Update

Actually if you use jQuery, there's a plugin for this. You don't need to do the code above. This post by Addy Osmani will explain it better http://addyosmani.com/blog/css3transitions-jquery/. In that post he also explain the use of yepnope.

Upvotes: 1

Darek Rossman
Darek Rossman

Reputation: 1323

Modernizr doesn't provide any polyfills for CSS3 features. It does provide a simple polyfill to enable styling of HTML5 elements in older browsers. Other than that, it is used mainly as a way to detect features by adding classnames to the html tag of the page.

So in your css, you can do something like

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

Modernizer will have added the .borderradius classname to your page's html tag if your browser supports it...or you can use it in your js to selectively fallback to plugins and the like.

Upvotes: 1

Related Questions