Load Stylesheet Based on User-Agent
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm looking to load one of the corresponding CSS files into the head section based on the User-Agent.

The default CSS file can be mobiscroll.ios.css

mobiscroll.android.css is for the "Android" user-agent

mobiscroll.wp.css is for the "Windows Phone" user-agent

This is for a mobile landing page, so I'm thinking that jQuery will be the best option for the script type.

<link href="http://www.example.com/datetime/mobiscroll.ios.css" rel="stylesheet" type="text/css" />
<link href="http://www.example.com/datetime/mobiscroll.android.css" rel="stylesheet" type="text/css" />
<link href="http://www.example.com/datetime/mobiscroll.wp.css" rel="stylesheet" type="text/css" />

Crowdsource coding tasks.

3 Solutions


I prefer this way:

Put the link as usual, but don't put the href tag. So we don't load a css entirelly and change it later.
And add an ID, so we get the link element and set the href attribute later.

<link rel="stylesheet" id="css_theme" />

Then, put this javascript: https://gist.github.com/alv-c/6091695

also, if you change the name of the variable to displayTheme you don't need to put the conditional again in the other part of your script. That one you posted before, when you pass it as a parameter to ...mobiscroll().datetime...
alv-c over 6 years ago
According to the W3C spec, a <link> element must have a non-empty href attribute to be valid.
dave-irvine over 6 years ago

<?php
$sheetName = "ios";

if (preg_match("/android/i", $_SERVER['HTTP_USER_AGENT'])) {
    $sheetName = "android";
}
else if (preg_match("/iemobile/i", $_SERVER['HTTP_USER_AGENT'])) {
    $sheetName = "wp";
}

$sheetName = "mobiscroll." . $sheetName . ".css";
?>
<html>
<head>
 <link href="/datetime/<?php print $sheetName; ?>" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
I did some research and found that the user agent for Windows Phone is "iemobile"
jlevey over 6 years ago
Yes, but they also include "iemobile" in the same string. ;-)
jlevey over 6 years ago
I've update my solution to match your findings :)
dave-irvine over 6 years ago

<script>
var sheetName = "ios";
if (navigator.userAgent.match(/android/i)) {
    sheetName = "android";
}
else if (navigator.userAgent.match(/iemobile/i)) {
    sheetName = "wp";
}
sheetName = "mobiscroll." + sheetName + ".css";

var linkElement = document.createElement("link");
linkElement.href = "/datetime/" + sheetName;
linkElement.rel = "stylesheet";
linkElement.type = "text/css";

document.head.appendChild(linkElement);
</script>

Put this into the <head> element of your page. Doesn't need jQuery.

Will this code work before the DOMContentLoaded is fired? Specifically, the line where you add the stylesheet to the head section https://developer.mozilla.org/en-US/docs/Web/Reference/Events/DOMContentLoaded
sguha over 6 years ago
Should do, DOMContentLoaded will wait until the closing body tag is reached. By putting this into the head it will run before DOMContentLoaded..
dave-irvine over 6 years ago
@sguha if you're worried about it working before DOMContentLoaded is fired, then just put it before the </body> tag.
alex over 6 years ago
Is it possible to do this with PHP instead or is this the best way?
jlevey over 6 years ago
Yeah, if it was for something that controlled user interaction I would have recommended putting it just before the </body>, but as it is for loading a stylesheet, best to get that out the way early imho.
dave-irvine over 6 years ago
@jlevey it's possible with PHP.
alex over 6 years ago
With javascript, my only concern is what happens if the mobile phone has javascript disabled.
jlevey over 6 years ago
jlevey - This is a theme for mobiscroll right? As far as I know that component requires javascript, so if javascript was disabled they wouldn't see the mobiscroll elements anyway.
dave-irvine over 6 years ago
You have a point.
jlevey over 6 years ago
I've done you a PHP version anyway :)
dave-irvine over 6 years ago
View Timeline