
As a designer I have to constantly deal with different browser’s compatibility. I am sure that among the web designers, MSIE is hated from everyone
The average user doesn’t know of the existence of these problems and part of our work is to keep them unaware. So I’ve made myself, what I call advanced php browser detection. Well user-agent check can’t be that advanced, but still it’s more than what I’ve seen here and there.
There are few ways to detect the browser and serve specific CSS styles. You can do it with JavaScript too, but this is executed on the client’s side and it can be dependable and not trustworthy. There are the conditional tags for IE, but it looks so ugly and it’s only for IE. So I am doing it server side with PHP. The script will look for the browser version and return it, then it will set a cookie to prevent the same test running on every page. It’s a bit tricky in some cases, mostly with Opera. This is what it will be returned:
Browser Browser+version
- MSIE MSIE9
- Firefox Firefox11
And so on. Then you can set it as body class and fix your CSS accordingly. Something like that:
.MSIE #wrapper {width: 900px;}
.MSIE8 #wrapper {width: 898px;}
Or you can avoid the ugly IE comment tags:
<?php
if (strpos(browserDetect(), "MSIE6")) {
echo '<script src="pngfix.js"></script>';
}
?>
The browsers detected with the script are the following ones:
- MSIE
- Firefox
- Opera
- Chrome
- Safari
I don’t think that there’s point to include something more at the moment.
So, let’s take a look at the code:
<?php detectBrowser(); ?>
This is how you call it. It will return the browser name and version. You can set it to variable or directly echo it.
detectBrowser();
$bdcookie = "browserdetect";
function detectBrowser() {
if (isset($_COOKIE[$bdcookie])) {
return $_COOKIE[$bdcookie];
}
First off we check if there is already a cookie which will tell us if the check have been done for the same user in the past hour. If so it will return the result without going through the full check again.
if (isset($_SERVER['HTTP_USER_AGENT'])) {
$useragent = $_SERVER['HTTP_USER_AGENT'];
} else {
return;
}
Then we check if there is User-Agent, because sometimes it’s just missing. Most of these cases are just unwanted bots and it doesn’t really matter, but in case of legitimate visit if there is no UA there would be ugly warning. In case of no UA the php will just return empty string and terminate further script execution.
if (strpos($useragent, 'Firefox') !== false && strpos($useragent, 'Gecko') !== false && strpos($useragent, 'Opera') === false) {
$userbrowser = "Firefox";
}
Firefox. Check if the UA contains both “Firefox” and “Gecko” and make sure that it doesn’t contain “Opera”. The Opera check is needed, because 50% of the Opera’s UA I’ve seen contain at least one more browser string. Usually 2 versions of MSIE or one of Firefox. If everything is OK, we set the user browser to “Firefox”.
elseif (strpos($useragent, 'MSIE') !== false && strpos($useragent, 'Windows') !== false && strpos($useragent, 'Opera') === false) {
$userbrowser = "MSIE";
}
Microsoft Internet Explorer. We check if the UA contains “MSIE” and “Windows” then we make sure it’s not Opera. The “Windows” check is just to be sure.
elseif (strpos($useragent, 'Safari') !== false && strpos($useragent, 'Chrome') === false) {
$userbrowser = "Safari";
}
Safari. Check if there is “Safari” in the UA and make sure there isn’t “Chrome”. Because all Chrome UA contain “Safari” too.
elseif (strpos($useragent, 'Chrome') !== false && strpos($useragent, 'Safari') !== false) {
$userbrowser = "Chrome";
}
Chrome. Check if both “Chrome” and “Safari” are present.
elseif (strpos($useragent, 'Opera') !== false || strpos($useragent, 'Presto') !== false) {
$userbrowser = "Opera";
Opera. Check if either “Opera” or “Presto” are present in the UA.
Now that we have the browser we need the version too. We continue with Opera as it’s not like the other browsers. When Opera moved to v10 they’ve found out that many webmasters out there can’t detect correctly the new version because their scripts look only for the first digit and see “Opera10″ as “Opera1″. Which resulted in some ugly looking websites. So for Opera 10 they kept the old “Opera/9.80″ string for compatibility and added “Version/10″ at the end of the UA.
if (strpos($useragent, "Version/") !== false) {
preg_match('/(Version)[ \/]([\w]+)/', $useragent, $oversion);
} else {
preg_match('/(Opera)[ \/]([\w]+)/', $useragent, $oversion);
}
}
If there is “Version/” in the Opera’s UA, we’ve got Opera10+ and we check for the real version not for the one left for compatibility reasons. If there is no such thing, check the standard version.
if (isset($userbrowser)) {
preg_match('/('.$userbrowser.')[ \/]([\w]+)/', $useragent, $version);
$browserresults = $userbrowser;
If we have a browser match, we make a match for the browser version. And then set the browser name as result.
if (isset($oversion)) {
$browserresults .= " " . $version[1] . $oversion[2];
setcookie($bdcookie, $version[1] . " " . $version[1] . $oversion[2], time()+3600, "/");
}
If there is Opera version set then add it to the browser name and set cookie to skip the same check next time.
else {
$browserresults .= " " . $version[1] . $version[2];
setcookie($bdcookie, $version[1] . " " . $version[1] . $version[2], time()+3600, "/");
}
Else, add the normal version to the browser name.
return $browserresults; } }
At the end just return the browser results.
If you want to use it in WordPress, add the script to your functions.php file and then call it in the body class like that:
body_class(detectBrowser());
You will find the “body_class” in the opening body tag. It will print whatever you pass as argument. In our case – the user browser.
Download