5 min read

(For more resources related to this topic, see here.)

From the Modernizr website:

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.

Basically with this library, we can see if the user’s browser can support certain features you wish to use on your site. This is important to do, as unfortunately not every browser is created the same. Each one has its own implementation of the HTML5 standard, so some features may be available on Google Chrome but not on Internet Explorer. Using Modernizr is a better alternative to the standard, but it is unreliable, user agent (UA) string checking.

Let’s begin.

Getting ready

Go ahead and create a new Web Project in Aptana Studio. Once it is set up, go ahead and add a new folder to the project named js.

Next thing we need to do is to download the Development Version of Mondernizr from the Modernizr download page (http://modernizr.com/download/). You will see options to build your own package. The development version will do until you are ready for production use. As of this writing, the latest version is 2.6.2 and that will be the version we use.

Place the downloaded file into the js folder.

How to do it…

Follow these steps:

  1. For this exercise, we will simply do a browser test to see if your browser currently supports the HTML5 Canvas element. Type this into a JavaScript file named canvas.js and add the following code:

    if (Modernizr.canvas)
{
var c=document.getElementById("canvastest");
var ctx=c.getContext("2d");
// Create gradient
Var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
alert("We can use the Canvas element!");
}
else
{
alert("Canvas Element Not Supported");
}

  2. Now add the following to index.html:

    <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Canvas Support Test</title>
<script src = "js/modernizr-latest.js" type="text/
javascript"></script>
</head>
<body>
<canvas id="canvastest" width="200" height="100"
style="border:1px solid #000000">Your browser does not support the
HTML5 canvas tag.</canvas>
<script src = "js/canvas.js">
</script>
</body>
</html>

  3. Let’s preview the code and see what we got. The following screenshot is what you should see:

How it works…

What did we just do? Well, let’s break it down:

<script src = "js/modernizr-latest.js" type="text/javascript"></script>

Here, we are calling in our Modernizr library that we downloaded previously. Once you do that, Modernizr does some things to your page. It will redo your opening <html> tag to something like the following (from Google Chrome):

<html class=" js flexbox flexboxlegacy canvas canvastext webgl notouch
geolocation postmessage websqldatabase indexeddb hashchange
history draganddrop websockets rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow textshadow opacity cssanimations
csscolumns cssgradients cssreflections csstransforms csstransforms3d
csstransitions fontface generatedcontent video audio localstorage
sessionstorage webworkers applicationcache svg inlinesvg smil
svgclippaths">

This is all the features your browser supports that Modernizr was able to detect.

Next up we have our <canvas> element:

<canvas id="canvastest" width="200" height="100" style="border:1px
solid #000000">Your browser does not support the HTML5 canvas tag.</
canvas>

Here, we are just forming a basic canvas that is 200 x 100 with a black border going around it.

Now for the good stuff in our canvas.js file, follow this code snippet:

<script>
if (Modernizr.canvas)
{
alert("We can use the Canvas element!");
var c=document.getElementById("canvastest");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
}
else
{
alert("Canvas Element Not Supported");
}
</script>

In the first part of this snippet, we used an if statement to see if the browser supports the Canvas element. If it does support canvas, then we are displaying a JavaScript alert and then filling our canvas element with a black gradient. After that, we have our else statement that will alert the user that canvas is not supported on their browser. They will also see the Your browser does not support the HTML5 canvas tag message.

That wasn’t so bad, was it?

There’s more…

I highly recommend reading over the documentation on the Modernizr website so that you can see all the feature tests you can do with this library. We will do a few more practice examples with Modernizr, and of course, it will be a big component of our RESS project later on in the book.

Keeping it efficient

For a production environment, I highly recommend taking the build-a-package approach and only downloading a script that contains the tests you will actually use. This way your script is as small as possible. As of right now, the file we used has every test in it; some you may never use. So, to be as efficient as possible (and we want all the efficiency we can get in mobile development), build your file with the tests you’ll use or may use.

Summary

This article provided guidelines on creating a new Web Project in Aptana Studio, creating new folder to the project named js, downloading the Development Version of Mondernizr from the Modernizr download page, and placing the downloaded file into the js folder.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here