Detector [BETA] - combined browser- & feature-detection for your app

With the initial release of Yiibu's Profile, Detector is already YABFDL (Yet Another Browser- and Feature-Detection Library). Ever since I heard Yiibu's talk, Adaptation, the core concepts & features of Detector have been floating around in my head. I've finally turned those ideas into code and created this demo. To learn more about Detector and how it works please check out the README on GitHub.

Both of the following Detector profiles were pulled from a profile already in the system that you asked to view. Because it's an archived profile the browser-side tests were not run.

Archived Detector Browser Profile

The following browser profile was created using ua-parser-php. This information is derived solely from the user agent string for your browser.

Browser Properties Previous Profile \| Next Profile
User Agent:	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; InfoPath.2; .NET4.0C; .NET4.0E; MS-RTC LM 8)
UA Hash:	890931075f392ad91fd056c02ae46c3a
Browser/OS:	IE 8.0/Windows 7
Is Mobile?	false
Is Mobile Device?	false
Is Tablet?	false
Is Computer?	true
Is Spider?	false

Something wrong with this profile? Please, let me know. Note that the "tablet" classification may be incorrect for those Android tablets using an OS older than Android 3.0.

Archived Detector Feature Profile

The following feature profile was primarily created using Modernizr's core tests. The left column of results, Your Browser, is populated by JavaScript using a copy of Modernizr that is loaded with this page. The right column, Detector Profile, is populated by PHP using the profile created by Detector for your browser. In addition to the core tests I've added an extended test that checks for emoji support as well as a per request test to check the device pixel ratio. Both were added using the Modernizr.addTest() Plugin API. To learn more about core, extended, and per request tests please review the README. To access any of these options in your PHP app you'd simply type $ua->featureName.

Feature Profile Properties
coreVersion:	0.91
family:	desktop

To learn more about families please review the family tutorial.

CSS3 Features	Your Browser	Detector Profile
backgroundsize:	N/A	false
bgrepeatround:	N/A	false
bgrepeatspace:	N/A	false
bgsizecover:	N/A	true
borderimage:	N/A	false
borderradius:	N/A	false
boxshadow:	N/A	false
boxsizing:	N/A	true
cssanimations:	N/A	false
csscolumns:	N/A	false
cssgradients:	N/A	false
cssreflections:	N/A	false
cssremunit:	N/A	false
cssresize:	N/A	false
cssscrollbar:	N/A	true
csstransforms:	N/A	false
csstransforms3d:	N/A	false
csstransitions:	N/A	false
cubicbezierrange:	N/A	false
flexbox:	N/A	false
fontface:	N/A	true
generatedcontent:	N/A	true
hsla:	N/A	false
multiplebgs:	N/A	false
opacity:	N/A	false
overflowscrolling:	N/A	false
rgba:	N/A	false
textshadow:	N/A	false

HTML5 Features	Your Browser	Detector Profile
adownload:	N/A	false
applicationcache:	N/A	false
audio:	N/A	false
audiodata:	N/A	false
blobworkers:	N/A	false
canvas:	N/A	false
canvastext:	N/A	false
contenteditable:	N/A	true
createelement-attrs:	N/A	true
dataview:	N/A	false
dataworkers:	N/A	false
devicemotion:	N/A	false
deviceorientation:	N/A	false
draganddrop:	N/A	true
filereader:	N/A	false
filesystem:	N/A	false
formvalidation:	N/A	false
fullscreen:	N/A	false
geolocation:	N/A	false
hashchange:	N/A	true
history:	N/A	false
indexeddb:	N/A	false
input->autocomplete:	N/A	false
input->autofocus:	N/A	false
input->list:	N/A	false
input->max:	N/A	false
input->min:	N/A	false
input->multiple:	N/A	false
input->pattern:	N/A	false
input->placeholder:	N/A	false
input->required:	N/A	false
input->step:	N/A	false
inputtypes->color:	N/A	false
inputtypes->date:	N/A	false
inputtypes->datetime:	N/A	false
inputtypes->datetime-local:	N/A	false
inputtypes->email:	N/A	false
inputtypes->month:	N/A	false
inputtypes->number:	N/A	false
inputtypes->range:	N/A	false
inputtypes->search:	N/A	false
inputtypes->tel:	N/A	false
inputtypes->time:	N/A	false
inputtypes->url:	N/A	false
inputtypes->week:	N/A	false
localstorage:	N/A	true
meter:	N/A	false
microdata:	N/A	false
notification:	N/A	false
performance:	N/A	false
postmessage:	N/A	true
progressbar:	N/A	false
quotamanagement:	N/A	false
scriptasync:	N/A	false
scriptdefer:	N/A	true
sessionstorage:	N/A	true
sharedworkers:	N/A	false
speechinput:	N/A	false
time:	N/A	false
userselect:	N/A	false
video:	N/A	false
webaudio:	N/A	false
webintents:	N/A	false
websockets:	N/A	false
websocketsbinary:	N/A	false
websqldatabase:	N/A	false
webworkers:	N/A	false

Misc. Features	Your Browser	Detector Profile
battery:	N/A	false
cookies:	N/A	true
eventsource:	N/A	false
gamepad:	N/A	false
ie8compat:	N/A	false
json:	N/A	true
lowbandwidth:	N/A	false
lowbattery:	N/A	false
nocookies:	N/A	false
touch:	N/A	false
unicode:	N/A	true
webgl:	N/A	false

While a device may be touch-based that doesn't not mean it supports touch events which is what I'm testing for here.

Browser Class via Media Queries	Your Browser	Detector Profile
desktop:	N/A	false
mediaqueries:	N/A	false
mobile:	N/A	false
tablet:	N/A	false

This feature needs some love as it's not always returning information correctly.

Detector Extended Test Features	Your Browser	Detector Profile
emoji:	N/A	false
extendedVersion:	N/A	1.0

To learn more about extended tests and their purpose please review the test tutorial.

About Detector

Detector is a simple, PHP- and JavaScript-based browser- and feature-detection library that can adapt to new devices & browsers on its own without the need to pull from a central database of browser information.

Detector dynamically creates profiles using a browser's (mainly) unique user-agent string as a key. Using Modernizr it records the HTML5 & CSS3 features a requesting browser may or may not support. ua-parser-php is used to collect and record any useful information (like OS or device name) the user-agent string may contain.

With Detector a developer can serve the appropriate markup, stylesheets, and JavaScript to a requesting browser without being completely dependent on a front-end-only resource loader nor a browser-detection library being up-to-date.

Check out the README for more information as well as the full list of features.

Get the Code

Detector on GitHub

Demos

Tutorials

More Information

Credits

Detector is based on Modernizr, modernizr-server, and the browser-detection library ua-parser-php. It also benefits from a healthy dose of inspiration from Yiibu's Profile.

Detector beta combined browser- & feature-detection for your app