Detect device and swap the CSS file - jQuery

Question

My web application target to major Smartphones and I need to change the CSS file according to device (if there are issues in the UI need to hit them), and I’m planning swap CSS using following jQuery. Just want to know whether is it a best practice and good in performance?

<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />

<script type="text/javascript"> 
    $(document).ready(function() {

        //  css file based on the device
        var controlCss;
        //  get the device agent and conver to lover case
        var deviceAgent = navigator.userAgent.toLowerCase();

        if(deviceAgent.match(/android/i)){
            controlCss = "android.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/webso/i)){
            controlCss = "webOS.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/iphone/i)){
            controlCss = "iphone.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/ipod/i)){
            controlCss = "ipad.css";
            $(".cssLink").attr("href", controlCss);
        }
        else if(deviceAgent.match(/blackberry/i)){
            controlCss = "bb.css";
            $(".cssLink").attr("href", controlCss);
        }
        else {
            controlCss = "basic.css";
            $(".cssLink").attr("href", controlCss);
        }
    }); 
</script>

Any reason to avoid using CSS `@media` queries with screen size rules? — kojiro, Oct 31 '11 at 13:13
@kojiro, I dont hv objection with you, fisr of all i thought way, but later, i thought CSS file size will be increased so thought to go diff files. — Sameera Thilakasiri, Oct 31 '11 at 13:44
Nothing is stopping you from doing that. You should read the [documentation on media queries](http://www.w3.org/TR/css3-mediaqueries/). — kojiro, Oct 31 '11 at 17:11
what is basic.css and general.css here? i facing the same problem you have and i have trouble understanding this approach — CraZyDroiD, Oct 16 '14 at 03:23

Steven de Salas · Accepted Answer · 2013-08-30T00:26:50.040

1.Is it best practice?

Depends on what you think of as best practice, also what best practice is in the context of your application and your company. One thing this makes me think about is: Can you guarantee all your pages will be using jQuery? If so then I think this is a good approach to achieve what you are after. An alternative would be to do this server-side, that would guarantee best-performance but there may be other reasons why you dont want to do this (maybe you dont have access to server-side code, or you want to maintain most of the functionality in the hands of front-end programmers).

2.Is it good in performance?

The short answer is no. On top of needing the 100K+ payload of jQuery to inject the CSS on the page. The way you've approached the problem at the moment is to wait for the whole page (and all dependencies) to load before adding styles to it. This will create a noticeable 'jump' between when the page gets displayed at first (without styles) and when the styles get loaded and everything moves around.

Loading the CSS server-side will get rid of this, but I think you can still do this in the UI and keep the majority of your code-base in JavaScript which will make it easier to maintain. In order to do this, remove the bit where you wait for the document to be loaded before calling up your CSS file:

<link rel="stylesheet" href="basic.css" type="text/css" class="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />

<script type="text/javascript"> 

     // No need to wait for document to load
     // $(document).ready(function() {

        //  css file based on the device
        var controlCss;
        //  get the device agent and conver to lover case
        var deviceAgent = navigator.userAgent.toLowerCase();

        if(deviceAgent.match(/android/i)){
            controlCss = "android.css";
            $(".cssLink").attr("href", controlCss);
        }

        // etc..

    // }); 
</script>

To further improve performance you could use a solution that does not depend on jQuery, instead of

$(".cssLink").attr("href", controlCss);

you could add #cssLink to the stylesheet <link> element and use the DOM to do the same:

document.getElementById("cssLink").setAttribute("href", controlCss);

This would make you code look as follows:

<link rel="stylesheet" href="basic.css" type="text/css" css="cssLink" id="cssLink" />
<link rel="stylesheet" href="general.css" type="text/css" />

<script type="text/javascript"> 

        // .. blah blah .. 

        if(deviceAgent.match(/android/i)){
            controlCss = "android.css";
            // use a solution that does not need jQuery
            document.getElementById("cssLink").setAttribute("href", controlCss);
        }

        // etc..

</script>

This way you will remove the dependency on the 100K plus payload of jQuery before you can apply your stylesheets to the page.

UPDATE:

It is also possible to apply CSS rules based on screen size rather than device.

Have you had a look at @media queries?

That was a great response... thanks. If I use media queries won't the browser download all the required assets for the page even if they're not required..??? eg, if I have a page and view it on a tablet and I have a tablet.css, desktop.css linked in the page (with media queries) and the desktop.css references a 4mb background image, won't the tablet device have to download that image just in case it needs it?? — Ads, Dec 06 '13 at 04:41
Hiya @Ads, with regard to CSS media queries - the answer is that the browser will isolate a single style for the element you are after and disregard the other styles, including the 4mb background image if you structure your CSS code correctly. Having said that, you have to be aware that media queries make no distinction between tablet and desktop, only work on basis of width, orientation, resolution etc see [this link](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries). — Steven de Salas, Dec 07 '13 at 00:34

Detect device and swap the CSS file - jQuery

1 Answers1

Linked