HTML5 for Mobile - HTML5 Mobile Game Development - page 69

if(Modernizr.canvas) {
// Do something with canvas
}
Modernizr provides more than 40 checks for support for next-generation features and is adding checks often,
so it should be your go-to resource.
Enhancing Progressively
Now that you have the ability to know exactly what features are supported in the browser your code runs in,
how do you best use that information? The answer is, “It depends.”
In some situations, the lack of support for a specific feature is a nonstarter. If your game depends on canvas,
for example, lack of canvas support means the game isn't going to run. In other situations, lack of a feature
might reduce the user's experience, but it shouldn't prevent the user from accessing your game.
Progressive Enhancement in the Real World
My company built a game for GamesForLanguage.com called SpaceWords , which lets multiple players use their
smartphones as controls for the game. If the browser supports orientation events, the game uses those events as
the movement input, allowing players to control their ship by rotating their phone. If the smartphone doesn't sup-
port those events, the game uses touch events. Finally, if the phone doesn't support touch events, the game uses
normal MouseDown events.
In each case, access to more functionality means you could bring a better experience to the player without
leaving those on less-capable devices out of the game entirely. Progressive enhancement is the buzzword for
starting out with a base level of functionality and including additional features for only those that support it.
In the best of situations, you can use the same code for both the minimal support and the enhanced features,
and only include additional code for the enhanced experience. As most developers do their development and
testing on the most capable devices, this means you have a better chance of having working code on the less-
capable devices than if you use completely different codebases for the two.
Polyfilling in the Gaps
The last section discussed how the lack of support for a specific feature can be a nonstarter for some situations.
This isn't exactly true because sometimes you can find a polyfill to fill in the gaps.
A polyfill is a chunk of code that backports features to browsers that don't support the feature natively. For
mobile, this may not be an issue because the mobile stack is generally good as long as you are on a recent smart-
phone.
The support diminishes, however, the minute you step out of the iOS, Android, and WP7 space into Black-
berrys and feature phones. In those situations polyfills, such as those for local storage and CSS3 features, be-
come very useful.
The advantage of detecting features instead of browsers comes to the forefront again because a true polyfill
exposes the same interface as the native feature. This means that you can often add a polyfill script to the head
of your document and add enhanced functionality to older browsers for free.
CSS3 Pie ( http://css3pie.com/ ) , for example, provides a polyfill that adds CSS3 decorations like rounded
corners, gradients, and drop shadows to older versions of IE.