conditional-statementsmodernizryepnope

Modernizr.load Deprecated. Yepnope.js Deprecated. Now what?


Prior to Modernizr v3, I was using yepnope.js

Modernizr.load and yepnope.js have both been deprecated. How do we conditionally call stylesheets or javascript files now?

Example that worked with Modernizr v2.5.3:

Modernizr.load({
  test: Modernizr['object-fit'],
  nope: ['./dist/scripts/object-fit.js'],
  complete: function(){
  if (!Modernizr['object-fit']) {
   jQuery(".poster img").imageScale({
   scale: "best-fill", 
   rescaleOnResize: true
   });
  }
 }
});

Solution

  • There's a new syntax and the feature names are all lowercase. You can combine that with jQuery's getScript method.

    Which would look something like this:

    if (Modernizr.objectfit){
        jQuery.getScript("./dist/scripts/object-fit.js")
            //it worked! do something!
            .done(function(){
                console.log('js loaded');
            })
            //it didn't work! do something!
            .fail(function(){
                console.log('js not loaded');
            });
    } else {
        jQuery(".poster img").imageScale({
            scale: "best-fill", 
            rescaleOnResize: true
        });
    }