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 6 years ago
According to the W3C spec, a <link> element must have a non-empty href attribute to be valid.
dave-irvine 6 years ago
Winning solution

<?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 6 years ago
Yes, but they also include "iemobile" in the same string. ;-)
jlevey 6 years ago
I've update my solution to match your findings :)
dave-irvine 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 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 6 years ago
@sguha if you're worried about it working before DOMContentLoaded is fired, then just put it before the </body> tag.
alex 6 years ago
Is it possible to do this with PHP instead or is this the best way?
jlevey 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 6 years ago
@jlevey it's possible with PHP.
alex 6 years ago
With javascript, my only concern is what happens if the mobile phone has javascript disabled.
jlevey 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 6 years ago
You have a point.
jlevey 6 years ago
I've done you a PHP version anyway :)
dave-irvine 6 years ago
View Timeline