How to detect broweser+version and place this as a body class in JS?

JavaScript
1

I’ve obtained some server side PHP code which places the browser and version (taken from the USER AGENT string response header) in a class of my body HTML element i.e. <body class=“ie ie7”> I’m using this as a CSS hook for cross browser styling.

Im running the site on Wordpress with a caching plugin which spits out a HTML version of the page. The problem is, is that the cache doesnt refresh on a per new user basis so if the first user comes in using Chrome this will get added to static file <body class=“chrome”> and obviosly wont refresh if the next user is on say IE as it is now cached as a flat HTML.

I’m wondering is there a better way to do this client side and manipulate the DOM after the page has loaded? If so, anyone got any code that can do this?

Cheers…John

PS - Heres the PHP code FYI

<?php
// Figure out which browser the user is using

$user_agent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match('/Firefox/', $user_agent)){
	$browser = "ff";
} else if (preg_match('/Firefox.3.0/i', $user_agent)) {
	$browser = "ff ff30";
} else if (preg_match('/MSIE.9/i', $user_agent)) {
	$browser = "ie ie9";
} else if (preg_match('/MSIE.8/i', $user_agent)) {
	$browser = "ie ie8";
} else if (preg_match('/MSIE.7/i', $user_agent)) {
	$browser = "ie ie7";
} else if (preg_match('/MSIE.6/i', $user_agent)) {
	$browser = "ie ie6";
} else if (preg_match('/Chrome/i', $user_agent)) {
	$browser = "chrome";
} else if (preg_match('/Safari/i', $user_agent)) {
	$browser = "safari";
} else {
	$browser = "in_unknown";
}

?>

2

I’m assuming most of your browser specific CSS would be written for IE 6 - 8. You could achieve something similar in the HTML by using some conditional comments.

<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]>    <html class="ie7"> <![endif]-->
<!--[if IE 8]>    <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->

Do you actually have a need to write specific CSS for browsers other than IE?

3

Both Internet Explorer and Firefox allow the useragent to contain anything at all. Other browesers allow it to at least contain an IE or Firefox useragent instead of the one for that browser.

For anything other than statistics the useragent is meaningless. What browser is it if the useragent reads “visit my web site” - that could be either IE or Firefox. If the browser contains a useragent identifying the browser as IE it is just as likely to be Firefox or Chrome as it is to be IE,

4

Not really, Id just like the option to be able to target Firefox though as I’ve noticed it doing a few odd things now and then

5

Stepehen - Are you saying I cant achieve this with JS? ive written this code and it seems to work OK? Only problem is when I load it in IE it pops up a message saying “IE restricted this webpage from running scripts” and gives me a popup to allow scripts to run? Obviouslly not a good state of affairs. Works in IE6,7,8 though.

<script type=“text/javascript”>

var browser

if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ //test for MSIE x.x;
var ieversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ieversion>=9)
browser =(“ie ie9”)
else if (ieversion>=8)
browser =(“ie ie8”)
else if (ieversion>=7)
browser =(“ie ie7”)
else if (ieversion>=6)
browser =(“ie ie6”)
else if (ieversion>=5)
browser =(“ie ie5”)
}
else
browser =(“unknown”)

if (browser == “unknown”)
{
if (/Firefox\/\s/.test(navigator.userAgent)){ //test for Firefox/x.x or Firefox x.x (ignoring remaining digits);
var ffversion=new Number(RegExp.$1) // capture x.x portion and store as a number
if (ffversion>=7)
browser =(“ff ff7”)
else if (ffversion>=6)
browser =(“ff ff6”)
else if (ffversion>=5)
browser =(“ff ff5”)
else if (ffversion>=4)
browser =(“ff ff4”)
else if (ffversion>=3)
browser =(“ff ff3”)
else if (ffversion>=2)
browser =(“ff ff2”)
else if (ffversion>=1)
browser =(“ff ff1”)
}
else
browser =(“unknown”)
}
document.write(browser)

</script>

6

That code will misidentify the browser in a lot of cases.

At least one of those IE useragents is valid for Safari, Chrome and Opera and they all are possible with Firefox.

At least one of those Firefox useragents is valid for Safari, Chrome and Opera and they all are possible with Internet Explorer.

If someone has the useragent in their browser set to “my browser so ming your own business” then there is no way to tell if the browser is IE or Firefox as both of those browsers allow the useragent to be set to anything at all by the browser owner.

You should only ever use the useragent for statistical purposes as it is not reliable enough to use for anything else.

Also your code there fails to take into account the very common useragent that claims the browser is IE version 99.

Since JavaScript introduced feature sensing in the early 1990s it has always been better to test specifically for whatever doesn’t work properly and then patch it. That way if the next breowser version fixes it then the patch will still work as it will only apply when needed and not to specific browsers.