Question

I have a client website and he uses a lot of css files and I’m creating the css for mobile.

I have this script to decide what to load:

var deviceAgent = navigator.userAgent.toLowerCase();
var agentID = deviceAgent.match(/(iphone|ipod|ipad|android)/);
if (agentID) {
//mobile
        $("link[rel=stylesheet]").attr({href : "includes/css/mobile.css"});
} else {
//desktop
        $("link[rel=stylesheet]").attr({href : "includes/css/cssLogin.css"});
        $("link[rel=stylesheet]").attr({href : "includes/css/magazine.css"});
    }

The thing is that when it is desktop it loads only the last magazine.css, the first (cssLogin.css) is replaced.

How do I load several css with jQuery?

Thanks a lot for your attention =]

Answer 1

You could append them to the head

$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' />"));