Question

I am using Modernizr to check for features, namely csscolumns, and running Modernizr.load() in order to use the css3-multi-column.js polyfill if this feature isn’t available. This all works pretty fine, apart from the fact that Modernizr/yepnope inserts the script just before the Modernizr script element and also before my stylesheets. Since css3-multi-column.js has to be included after all the stylesheets I would prefer if Modernizr added the script to the end of the page. Is that possible?

This is my code:

Modernizr.load({
    test: Modernizr.csscolumns,
    nope: 'http://host.org/js/libs/css3-multi-column.js';
});

This is what I would like to accomplish with Modernizr, if possible:

if (!Modernizr.csscolumns) {
    var script = document.createElement( 'script' );
    script.type = "text/javascript";
    script.src = 'http://host.org/js/libs/css3-multi-column.js';
    $('body').append(script);
}

Answer 1

I just stumble on the same problem and took a look at the Modernizr (yepnope.js) code and that’s definitely not possible to add the script at the page end.

So, unfortunately, your solution is the good one.

Another possible solution is to put Modernizr at the bottom of the page (but IE8 will break, see the bottom note here)?

Also, in my case, all my stylesheets were before the css3-multi-column.js script inserted by Modernizr but it was not working either. But using your method fix the problem. With your method it works also when appending to HEAD. So the problem is not with the place where the script is inserted but something else?