HTML and CSS Reference
Figure 4-1. LinkedIn Mobile Web
Device and Feature Detection
The first step in delivering new HTML5-based features to your user base is actually
detecting what the browser supports. You need to communicate with the browser to see
what it supports before the page is even rendered. In the past, you were forced to detect
and parse the—sometimes unreliable—browser userAgent ( UA ) string and then assume
you had the correct device. Today, such frameworks as Modernizr.js or just simple Java‐
Script, help you detect client-side capabilities at a much more finely grained level.
Which detection method is best? The feature-detection approach is new, but growing,
while the approach of parsing the userAgent string is flawed and should be handled
with caution. Even at the time of this writing, browser vendors are still getting it wrong.
The userAgent string for the latest phone-based Firefox on Android, for example, re‐
ports itself as a tablet not a phone. Mozilla uses the exact same userAgent string for
both phones and tablets, and that string has the word “Android” in both. The key to
success is understanding how you can use each approach most effectively, either by itself
or to complement the other.