PHP Dynamic CSS... in Javascript?

Question

So with help from others I have managed to get this executed and running correctly via PHP locally however I am having problems with the corporate web-server.

How can I go about the same thing using javascript instead?

I understand this is not responsive mobile design and there are much better ways of getting this delivered.

Would appreciate the help

<?php

    // MOBILE
    $blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BB10");
    $blackberry2 = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
    $iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
    $ipad = strpos($_SERVER['HTTP_USER_AGENT'],"iPad");
    $chrome = strpos($_SERVER['HTTP_USER_AGENT'],"Chrome");
    $safari = strpos($_SERVER['HTTP_USER_AGENT'],"Safari");

    // REDIRECTS 
    // MOBILE
    if ($blackberry == true) 
    { 
    header('Location: style.css');
    }
    else if ($blackberry2 == true)
    {
    header('Location: bb7.css');
    }
    else if ($iphone == true) 
    { 
    header('Location: style.css');
    }
    else if ($ipad == true) 
    { 
    header('Location: ipad.css');
    }
    else if ($chrome == true) 
    { 
    header('Location: style.css');
    }
    else if ($safari == true) 
    { 
    header('Location: style.css');
    }
?>

You can check the user agent in javascript using window.navigator.userAgent but I suspect this is even what you want to do in php — Ibu
– Ibu, Commented Apr 4, 2014 at 17:36
You know it would be kind of slow using javascript? It would load the stylesheet after everything on the page is loaded. — Johann Bauer
– Johann Bauer, Commented Apr 4, 2014 at 17:37
Also it would be better to just include the stylesheet in your .php file rather than redirecting the browser. — Johann Bauer
– Johann Bauer, Commented Apr 4, 2014 at 17:38
I simply want to serve different user agents separate stylesheets. The server I am attempting to upload to is frustrating as I have to rely on someone who is not technically trained to upload the files set the correct permissions etc etc and nothing seems to be working. Therefore I assumed it would be easier to attempt javascript as I know that already works and is client side. However if you're saying this isn't the best option I may have to explore others... Thanks — BayscapeNewbie
– BayscapeNewbie, Commented Apr 4, 2014 at 17:46

gfullam · Accepted Answer · 2014-04-04 18:59:19Z

1

You'll want to use the JS navigator.userAgent method

For reference: http://www.w3schools.com/jsref/prop_nav_useragent.asp

For example:

<script>

var css;

switch(navigator.userAgent) {
    case 'BB10' // Or whatever the actual UA string is
        css = 'bb7.css';
        break;
    case 'iPhone' // Or whatever the actual UA string is
        css = 'iphone.css';
        break;
    default
        css = 'style.css';
        break;
}

var cssLink = document.createElement('link');
cssLink.setAttribute('rel', 'stylesheet');
cssLink.setAttribute('href', css);
document.getElementsByTagName('head')[0].appendChild(cssLink);

</script>

You could also use jQuery to append the stylesheet if it is available to you.

answered Apr 4, 2014 at 18:59

gfullam

12.2k6 gold badges52 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gfullam Over a year ago

I will add that I agree with the other commenters that using JS for CSS switching based on UA strings is not ideal. I understand being limited by access and resources — which make solutions like this sometimes necessary — but I urge you to consider other strategies if this is not the only possibly way you're able to accomplish it.

Collectives™ on Stack Overflow

PHP Dynamic CSS... in Javascript?

1 Answer 1

You'll want to use the JS navigator.userAgent method

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

You'll want to use the JS navigator.userAgent method

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related