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?


PS - Heres the PHP code FYI

// 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";