Game Development Reference
In-Depth Information
design compatible with different browsers. Even though the sample local storage
polyfill shown previously was relatively complicated, it does not completely mimic the
official interface, and neither does it behave 100 percent the same with the little func-
tionality that it did implement. Soon the organized student will ask how much time
he or she should expect to spend writing bullet-proof polyfills. The answer, which I'm
glad to report is a positive one, is given and explained in the next section.
Polyfills
To answer the preceding question, that is, how much time should you expect to
spend writing your own robust polyfills in order to be able to start using HTML5 fea-
tures today, and still have your code run on multiple different browsers is, zero. Un-
less you really want the experience of writing a fallback for different browsers, there
is no reason to cook your own libraries and such, since much work has already been
done on this area by hundreds of other developers who have shared their work with
the community.
With polyfills, there really isn't a single JavaScript import that we can use at the top
of our HTML5 project that will magically extend every deficient browser, and make
them 100 percent HTML5 ready. However, there are many separate projects avail-
able, so that if you're trying to use a particular element, you can simply import that
particular polyfill. While there is no definitive source where all of these polyfills can
be found, a simple Google or Bing search for the particular functionality you want
should quickly connect you to an appropriate polyfill.
Modernizr
One particular tool that is worth mentioning is Modernizr. This JavaScript library in-
spects the page that loads it, and detects which HTML5 features are available in the
user's browser. This way, we can very easily check whether or not a particular API is
available, and take action accordingly.
As of this writing, the current version of Modernizr allows us to test for a particular
API or feature, and load specific polyfills in the case that the test returns positive or
negative, which makes adding polyfills when needed very easy and effortless.
Furthermore, Modernizr also includes HTML5 Shiv, which is a very small piece
of JavaScript that allows us to use all of the HTML5 semantic tags in browsers
that don't recognize them. Note that this will not add the actual functionality of the
