1

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 =]

Improve this question

1 Answer 1

Reset to default
2

You could append them to the head

$("head").append($("<link rel='stylesheet' href='style.css' type='text/css' />"));
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Also have a look here - stackoverflow.com/questions/574944/… It may be better to try to use "document.createStyleSheet('styles.css');" and fall back to the way I suggested
Uncaught SyntaxError: Unexpected identifier