Server side browser features with phpcaniuse

The Browser Capabilities Project is an effort to determine browser capabilities based on the User-Agent string. It’s a great project which has kept up to date with UA stings. The data is used to power the PHP function get_browser(), and is used by the phpbrowscap standalone project. The challenge with the project is that their features haven’t kept up with the rapid development of web technology.

The CanIUse.com project catalogs granular data about the capabilities of web browsers. They’ve done an excellent job of tracking emerging features like HTML5 canvas and web audio. They also make all of the data available as a json file on github. Thanks!

So what do you do when you have two different projects, with different goals but  some overlap? You create a mashup! Enter PHPCanIuse, which will let you check browser capabilities from the caniuse.com project, based on the decoded UA string from the browscap project.

JQuery and other javascript frameworks have client side feature detection, but there are a few scenarios where you might want to do it server side:

  • Embed a Flash video player or an HTML 5 video
  • Use native websockets or flash based (or, ew, timer based)
  • Send SVG as native markup, or pre-render it as a PNG

DISCLAIMER: Users can theoretically change their UA string, so it can’t be trusted 100%. It’s an advanced feature, so anyone who does, deserves the broken web experience they get.

Using phpcaniuse

phpcaniuse is a composer project. You’ll need the following require:

"robertlabrie/phpcaniuse": "dev-master"

Then as usual just composer install. The class is a single file, so if you hate composer, you can  just include CanIUse.php. Then just instantiate the object

$can = new phpcaniuse\CanIUse($browser,$data);

The $browser object can come from either get_browser() or phpbrowscap. CanIUse expects the object, not the associative array. $data is a string containing the contents of data.json from the caniuse.com project. Pass it in as a string, do not decode it.

The methods are pretty straight forward:

Function Description
check(list) Checks to see if the browser supports the specified list of features. Takes a string of a single feature, or an array of features. Returns the lowest level of support for the list.
featureList() Returns an associative array of all the features tracked by caniuse. The key is the key used to check a feature, and value is a friendly description.
featureGet(feature) Retuns the set of JSON data for the specified feature.
browserCan() Returns an associative array of all features and the status within the browser. Key is the feature, value is the status.
agentMapAdd(browscapName,caniuseName) Adds a mapping between a browscap name and a caniuse name.
browserSet(browser) Sets the browser object. Must come from get_browser() or phpcaniuse.
dataSet(data) Sets the json data from caniuse. Must be a string, not a json object or array.
dataGet() Returns the caniuse json data as an array.

phpcaniuse maps the browser name returned by browscap with the one used by caniuse. It’s currently done for Firefox, Internet Explorer, Opera, Safari and Chrome. Mobile browsers are not done, but if you can identify a mapping, please tell me.

The package includes a demo.php file which will tell you all about your browser.

Understanding the CanIUse.com data.json

The caniuse.com data.json file is broken up into several sections. I’ve laid it out in a table with my working notes, but the best way to understand it is print_r().

agents ie array of browsers – major ones listed here, many others supported
firefox
browser Firefox Seems to match the ->Browser property from browscap
versions …,”24″,”25″ array of browser versions where the index is used by caniuse
chrome
safari
opera
statuses status codes for features
rec Recommendation
pr Proposed Recommendation
cr Candidate Recommendation
wd Working Draft
other Other
unoff Unofficial / Note
cats categories for capabilities
updated date() the date the data was last updated
data
title A friendly title
description A good description
spec URL to specification
status Relates to the status codes above
stats Associative array of browsers, version feature
firefox Or any agent name
23 Vsersion 23
x Supported or not

The actual status codes are outlined below. They’re based on reverse engineering and might not be 100% accurate:

Stat Description
n Not supported
a Partially Supported
a x Partially Supported with prefix
p Polyfill required
y x Supported with prefix
y Supported
u Unknown
Advertisements

About robertlabrie
DevOps Engineer at The Network Inc in metro Atlanta. Too many interests to list here, check out my posts, or look me up on LinkedIn

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: