Getting started with Modernizr using PHP IDE

Exclusive offer: get 50% off this eBook here
Instant RESS Implementation How-to [Instant]

Instant RESS Implementation How-to [Instant] — Save 50%

Take your responsive websites to the next level with server-side components with this book and ebook

$12.99    $6.50
by Chip Lambert | April 2013 | Open Source

This article by Chip Lambert, author of Instant RESS Implementation How-to will explain how to get started with the feature detection library, Modernizr.

(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:


Instant RESS Implementation How-to [Instant] Take your responsive websites to the next level with server-side components with this book and ebook
Published: March 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Chip Lambert

Chip Lambert has been creating websites ever since his high schools days when he got his start doing fantasy sport websites. In addition to these 18 years of HTML experience, he has 13 years experience with PHP and MySQL development. He is currently serving as Director of Applications Development at Bluefield College, where he also teaches HTML5 and CSS3 classes. You can follow him on Twitter @chiplambert.

Books From Packt


HTML5 and CSS3 Responsive Web Design Cookbook
HTML5 and CSS3 Responsive Web Design Cookbook

Responsive Web Design by Example
Responsive Web Design by Example

PHP jQuery Cookbook
PHP jQuery Cookbook

Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jQuery

 Instant PhpStorm Starter [Instant]
Instant PhpStorm Starter [Instant]

 HTML5 Canvas Cookbook
HTML5 Canvas Cookbook

Responsive Web Design with HTML5 and CSS3
Responsive Web Design with HTML5 and CSS3

jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials


Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software