Modernizr - An indispensable tool

What is Modernixr?

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Why use Modernizr?

Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.

How it works?

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources.

Installing Modernizr

To install Modernizr, download the file from this page. Then, add a link to head tag of the file on your site. If you want to limit the features, you can select which features you intend to use in your project and generate the user-defined build. For example:
<script src="js/modernizr-1.0.min.js"></script>
Once it is added, add a new class "no-js" to <html> element in your document as shown below
<html class="no-js">
This will be the default state of the page. If JavaScript (js) isn’t on, then Modernizr won’t work at all. So it’s good that we have a fallback for that case. If JavaScript is indeed enabled, once that page is loaded on the browser, that class will be replaced dynamically and when you see the source of the page it may look something like this:
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions  video audio cufon-active fontface cufon-ready">
Depends on the browser you opened the site, this list varies. Because these are nothing but the HTML5 features supported by the current browser.

Supported Browsers

IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile.

Polyfills and Modernizr

Polyfill is nothing but a JavaScript shim that replicates the standard API for older browsers.It means if you want to implement HTML5 features in your site which may not support in the old version browsers, Polyfill API would help you to solve the problem with the same properties and methods on it as a native implementation.

A new HTML5 element <canvas> is definitely good to go for modern browsers. If you want to support Internet Explorer 8 and below, ExplorerCanvas and FlashCanvas can be helpful in providing support for most canvas features. By using Modernizer resource loader you can suggest the browser to pick the right resource for the document.

Modernizr.load() tutorial

It is a resource loader (CSS and JavaScript) that was made to specifically to work side-by-side with Modernizr. It’s optional in your build, but if you are loading polyfills, There’s a good chance it can save you some bandwidth and boost performance a bit.
Modernizr.load is small and simple, but it can do quite a bit of heavy-lifting for you.
Syntax is generally very easy to understand, so we’ll start with a basic example 
Modernizr.load('js/jquery-1.7.1.min.js');
You can give Modernizr.load a string, an object, or an array of strings and objects.
Here is a slightly more complicated example of using Modernizr.load when your scripts rely on more than one Modernizr feature-test. 
Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});
When we decide that we should load a different script depending on whether feature is supported in the host browser or not. By doing this, you save users from having to download code that their browser does not need. This increases page performance, and offers a clear place to build a healthy amount of abstraction to your polyfills (both 'geo.js' and 'geo-polyfill.js' would seem the same to the rest of the app, even if they're implemented differently).
A good technique is to wrap up multiple polyfill scripts into a single 'oldbrowser' type script, that way you don’t end up loading too many scripts at once. Here's how that might work: 
Modernizr.load([
  {
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  {
    test : Modernizr.websockets && window.JSON,
    nope : 'functional-polyfills.js',
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      myApp.init();
    }
  },
  'post-analytics.js'
]);
It works by trying to load in the script, and then immediately after, testing to see if the jQuery object is available. If It’s not, then load a local copy of jQuery as a fallback. This is generally not that easy in script-loaders, but Modernizr.load has got you covered. You can just use the same logic, and Modernizr.load will handle the execution order for you: 
Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.7.1.min.js');
      }
    }
  },
  {
    load: 'needs-jQuery.js'
  }
]);

To be continued..

Comments

Post a Comment

Popular posts from this blog

Simple Pie Graphs Using <canvas> element in HTML 5

Now a days graphs are playing a major role to visualise the statistics in the web applications. With the help of these graphs, user can see all the information in detail at a glance. One popular kind among those graphs is Pie Graphs. So i continued my work for plotting Pie diagram with the help of simple Javascript & HTML5 <canvas> element. The canvas element properties such as 'arc()', 'beginPath()', 'lineTo()' & 'fill()' are used in this example. Let us go through each step for better understanding. Define the canvas element in your document body as shown below. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file. <canvas id="canvas" width="800" height="500"></canvas> This text is displayed if your browser does not support HTML5 Canvas. Define your values in the form of an array as shown below. To display different filled colors for ...
Read more

Stored Procedures in MySQL

Stored procedure is a segment of declarative SQL statements stored inside the MySQL Server. To define it other way, we can save (one or set) queries within stored procedure for future use. For example, we have a SELECT query that returns rows based on the condition SELECT * FROM customers WHERE city = ‘Bangalore’ ORDER BY firstName; The first time you invoke a stored procedure, MySQL looks up for the name in the database catalog, compiles the stored procedure’s code, place it in a memory area known as a cache, and execute the stored procedure. If you invoke the same stored procedure in the same session again, MySQL just executes the stored procedure from the cache without having to recompile it. A stored procedure can have parameters so you can pass values to it and get the result back. Advantages Reduce network traffic Centralize business logic More secure Disadvantages Resource Usages Troubleshooting Maintenance Creating Stored Procedures If we ...
Read more

Simple Line Graphs Using <canvas> element in HTML 5

After i worked with the Bar graph, i feel it is very easy to implement the line graphs using <canvas> element in HTML5. You can find many similarities in the javascript while working on this. New functions moveTo() , lineTo() , stroke() , lineWidth() has been used for line graphs. Define the canvas element in your document body as shown below with the ID attribute and mention the height & width attributes. You can apply styles either by using "style" tag (inline CSS) or defined class in separate .css file. <canvas id="myCanvas" width="800" height="500"></canvas> <script language="javascript" type="text/javascript"> var interval = 30; var linewidth = 1; var color = "blue"; var graphholder = "myCanvas"; var displayLabel = true; var labelfontstyle = "Arial"; var labelfontsize = "12px"; var labelfontclr = "#000000"; var ...
Read more