Graded Browser Support

github.com/monospaced/Graded-Browser-Support

Server-side detection of Yahoo GBS C-grade browsers

21/12/2010

Your browser receives A-grade or X-grade support.

In the main, Graded Browser Support is a QA strategy that can be applied to any website, without the need for specific functionality to be present in the site itself. However, the one thing the site does need to do, is detect browsers on the C-Grade blacklist so that CSS and JavaScript can be withheld.

I′ve often wondered exactly how Yahoo implements this C-Grade detection. They do mention that it's done on the server-side, which makes sense, but there seemed to be no further information online…

… until a few days ago, when I came across a post on ydn-javascript by Nate Koechley, with this snippet right at the very end:

“A final note: for what it's worth, internally we use the PHP version of Browscap.ini to do detection and grading at the server level. http://browsers.garykeith.com/downloads.asp

Now I was on the right track, and with the help of Evan Byrne's Browser Detection With PHP Browscap tutorial (using Jonathan Stoppani's phpbrowscap) I had PHP browser detection up and running in no time.

With the Browscap data available, it was now relatively simple to implement the C-Grade blacklist in PHP. The following code did the trick, entered in a new file called gbs.php (created within the same folder as Browscap.php):

<?php
$gbs = 'A-grade or X-grade';
if (isset($_COOKIE['gbs'])) {
	$gbs = $_COOKIE['gbs'];
} else {
	require('Browscap.php');
	$bc = new Browscap('cache');
	$bc->localFile = 'php_browscap.ini';
	$data = $bc->getBrowser();
	$browser = $data->Browser;
	$version = $data->Version;
	if ($browser == 'IE' && $version < 6 ||
	    $browser == 'Safari' && $version < 3 ||
	    $browser == 'Firefox' && $version < 3 ||
	    $browser == 'Opera' && $version < 9.5 ||
	    $browser == 'Netscape' && $version < 8) {
		$gbs = 'C-grade';
	}
	setcookie('gbs',$gbs);
}
?>

Pages can then includes this script, and uses the returned $gbs variable to determine whether to serve CSS and JavaScript. For example:

<?php

require('gbs.php');

?><!DOCTYPE html>

<html lang="en">
<head>

...

<?php if(!isset($gbs) || $gbs != 'C-grade') { ?>

<link rel="stylesheet" href="gbs.css" />

<?php } ?>

...

For a first iteration I'm pretty happy with this technique, but I'm sure it could be improved. The source is on github so fork away!

Monospaced Labs