How To Load A CSS File Based On A URL Or Client?

I have two CSS files in my Sencha touch application. Lets call them A.css and B.css. Based on the URL I want the application to load different CSS. Lets say URL 1 is www.website.co

Solution 1:

You can use JavaScript Regex for this.

Very easy method:

    // For www.website.com/#1
    if (/www.website.com\/#1/.test(window.location.href)) {
        /* Your Code Here For Loading Css */
    }

    // For www.website.com/#2
    if (/www.website.com\/#1/.test(window.location.href)) {
        /* Your Code Here For Loading Css */
    }

I hope this helps!!!

Solution 2:

You can use the follow JavaScript code to load CSS dynamically for your requirement:

if (window.location == "http://www.website.com/#1") {
     LoadCSS("A.css")
}
else if(window.location == "http://www.website.com/#2") {
     LoadCSS("B.css")
}

function LoadCSS(filename) {
     var fileref = document.createElement("link");
     fileref.setAttribute("rel", "stylesheet");
     fileref.setAttribute("type", "text/css");
     fileref.setAttribute("href", filename);
}

Solution 3:

Get hashtag value from URL and then depending on value change the link for CSS.

To get hashtag value:

$url = "www.website.com/#1";
$params = parse_url($url);

$value = $params['fragment'];

This will give you hashtag value, then depending on value link CSS file in header:

<?php if ($value == 1) { ?>
<link href="A.css" rel="stylesheet" type="text/css" />
<?php } else { ?>
<link href="B.css" rel="stylesheet" type="text/css" />
<?php } ?>

Solution 4:

I assume you have one template available for 2 URLs. Loading CSS using JavaScript is a pretty bad practice because it's slow and it's giving the user a bad experience since nothing is initially styled.

Anyway you can use the append function to add the CSS to the head tag.

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

And for the URL itself simply use the JavaScript window.location like so:

if (window.location == "#1url") {
    // load the A.css using the append function like above
}