Yepnope & Modernizr screen.width Conditions

Question

I am trying to (locally) use Yepnope with Modernizr to load CSS & JS Files. So I can manage the files better, and code easily.

This is the currently layout:

Modernizr.load([
    {
        test: Modernizr.mq('all and (max-width: 1070px)'),
        yep: '/css/smartdevice.css','/js/smartdevice.js',
    }
    ,
    {
        test: Modernizr.mq('all and (min-width: 481px) and (max-width: 1069px)'),
        yep: '/css/tablet.css','/js/tablet.js',
    },
    {
        test: Modernizr.mq('all and (max-width: 1070px)'),
        yep: '/css/screen.css','/js/screen.js',
    }
]);

The I am fairly new to JS but I have used jQuery on may occasions. However they all load at once, is there anyway I can load the CSS files based on the px width? (ref above values). I am aware that you could do this server side, however in my position.

It has to be local side in js... I currently code in SCSS. Everything is fine that end, it is just a case of injecting the files/showing file on window width.

I presume that I need to add an if statement, but any help would be greatly provided!

-Neil

P.S I am running locally, on a new iMac using CodeKit & SCSS.

Answer 1

yep: '/css/smartdevice.css','/js/smartdevice.js', is illegal JS. If you want this to be an array, use yep: ['/css/smartdevice.css','/js/smartdevice.js'],. Anytime you see a comma inside a JavaScript object, pretend there's a newline, and you'll see what's going wrong here:

Modernizr.load([
{
    test: Modernizr.mq('all and (max-width: 1070px)'), // prop:val(=function)
    yep: '/css/smartdevice.css',                       // prop:val(=string)
    '/js/smartdevice.js',                              // ???
}
,...

Answer 2

Some suggestions:

1. Replace "all" with the label "only all"
2. Replace the "max-width: 1070px" in the first test with a mobile device width (320 etc)