Modernizr Results for Your Browser

As i hate to write a bunch of code myself, when i can stand on the shoulders of giants, look here: http://modernizr.github.com/Modernizr/test/index.html to see what Modernizr thinks of the browser you are  using at this moment. Oh, you beauty !!!

Another Modernizr View

Many thanx to Paul Irish for this link to another way of looking at Modernizr here. While doing some testing yesterday, found that version 2.0 of Modernizr is now out for release.

Modernizr Version 2.0

So clicked Production button to generate a custom javascript version of Modernizr with just the features i am using in my formatter. The next panel came up to allow me to choose just the features i needed, but since i’m using almost every test in the formatter, i click the ‘Toggle’ choice to select all features for each column, i.e. HTML5, CSS3, etc. Here is how that screen looked :

Feature Selection for custom generation

Next we click the generate button and wait a bit. A download button appears when all is ready, so click that and choose the directory / folder where it should land. If you are following my tut on the formatter, choose /test/js as your destination then after it arrives you can rename it as modernizr.v2.js before starting the tests.

Revised Javascript Code for Modernizr Format

You may or may not have been following the thread of posts on this blog related to using the Modernizr javascript library to test browser support for CSS3 and HTML5 features. My previous post here had a version of javascript code that might format Modernizr output into a browser-friendly format. Well that version failed to work under a number of conditions on a number of elderly browsers, so in an attempt to offer some limited support for them, have revised the modernizr.format.js code as follows. If you copy this code fragment into your test folder: /test/js  as modernizr.format.js, then open a browser with the index.html page in /test folder, you may be rewarded with a better user experience (don’t you love that phrase!)

/* * This code gets the browser's notion of what the current browser capabilities, to format them nicely. * Modernizr 1.6 version provides the logic to discover browser capabilities. * Will need to fix later when Modernzr 2.0 is released. */ 
function formatModernizr() { 

var result="";

result+= "<h3>Browser Identity</h3>";

result+= "<p>A 'Browser' is a piece of software used to access and display the Internet on your computer. Examples include Internet Explorer, Mozilla Firefox, Opera, Safari and Google Chrome.</p> <p>Information about your browser and operating system has been identified as follows : </p>";

result+= "<p><b>CodeName</b> : " + navigator.appCodeName; result+= "<br /><b>Name</b> : " + navigator.appName;

result+= "<br /><b>Version</b> : " + navigator.appVersion;

result+= "</p><p><b>Cookies Enabled</b> : " + navigator.cookieEnabled;

result+= "</p><p><b>Platform</b> : " + navigator.platform;

result+= "</p><p><b>User-agent header</b> : " + navigator.userAgent + "</p>"; 

result+= "<p><b>Geo-location</b> : <span id="geo2">unknown</span></p>";

result+="</p>"; 



result+="<p>( No logic available to check for Server-Sent Events, MathML, Query Selectors or MicroData )</p>";

var tick = "<br /><img src="./img/tick.png" /> "; var cross = "<br /><img src="./img/cross.png" /> ";

result+= "<h4>HTML 5 Support</h4>";

result+= "<p>HTML5 describes several mechanical techniques gaining support from the major browser manufacturers.</p>";

result+= "<p>These techniques include 'drawing' programatically, establishing your geographic location using your devices GPS, techniques which allow web-applications to behave more like installed software and native Video & Audio controls which do not require a third-party plug-in like Adobe Flash.</p>";

result+= "<p>This site uses Modernizr 1.6, a javascript library which detects your browser's support for the a selection of the latest CSS3 & HTML5 features. It helps web designers to implement progressive enrichment techniques.";

if (Modernizr.fontface){ result+=tick; } else {result+=cross;}

result+="Font Faces";







if (Modernizr.canvas){ result+=tick; } else {result+=cross;}

result+="Canvas";

if (Modernizr.canvastext){ result+=tick; } else {result+=cross;}

result+="Canvas Text";

if (Modernizr.webgl){ result+=tick; } else {result+=cross;}

result+="Web GL";

if (Modernizr.audio){ result+=tick; } else {result+=cross;}

result+="Audio :";

if (Modernizr.audio) { if (Modernizr.audio.mp3) result+=" mp3"; 

if (Modernizr.audio.ogg) result+=" ogg"; }

if (Modernizr.video){ result+=tick; } else {result+=cross;}



result+="Video : ";

if (Modernizr.video) { if (Modernizr.video.webm) result+="webm ";

if (Modernizr.video.ogg) result+=" ogg "; if (Modernizr.video.h264) result+=" h.264 "; }



if (Modernizr.geolocation){ result+=tick; } else {result+=cross;} result+="Geo Location";

if (Modernizr.localstorage){ result+=tick; } else {result+=cross;} result+="Local Storage";

if (Modernizr.sessionstorage){ result+=tick; } else {result+=cross;} result+="Session Storage";

if (Modernizr.webworkers){ result+=tick; } else {result+=cross;} result+="Web Workers";

if (Modernizr.applicationcache){ result+=tick; } else {result+=cross;} result+="Application Cache";

if (Modernizr.svg){ result+=tick; } else {result+=cross;} result+="SVG Images";

if (Modernizr.inlinesvg){ result+=tick; } else {result+=cross;}

result+="Inline SVG";

if (Modernizr.svgclippaths){ result+=tick; } else {result+=cross;}

result+="SVG Clip Paths";

if (Modernizr.smil){ result+=tick; } else {result+=cross;}

result+="SMIL"; 

if (Modernizr.websqldatabase){ result+=tick; } else {result+=cross;} 

result+="Web Sql Database"; 

if (Modernizr.indexeddb){ result+=tick; } else {result+=cross;} 

result+="Indexed D/B"; 

if (Modernizr.websockets){ result+=tick; } else {result+=cross;} 

result+="Web Sockets"; 

if (Modernizr.hashchange){ result+=tick; } else {result+=cross;} 

result+="Window Hash Change"; 

if (Modernizr.history){ result+=tick; } else {result+=cross;} 

result+="Window History Management"; 

if (Modernizr.draganddrop){ result+=tick; } else {result+=cross;} 

result+="Drag and Drop"; 

if (Modernizr.postmessage){ result+=tick; } else {result+=cross;} 

result+="Cross Window Messaging"; 

if (Modernizr.touch){ result+=tick; } else {result+=cross;} 

result+="Touch Device Support<br />- does not confirm touch screen device"; 

//if (supports_microdata_api() ){ result+=tick; } else {result+=cross;} 

// result+=""Microdata Support; result+= "</p><br />"; 









result+= "<h4>CSS 3 Support</h4>"; 

result+= "<p>What is CSS3 ?</p>"; 

result+= "<p>CSS3 refers to a number of new in-browser design features available in many modern browsers such as rounded corners or the ability to animate elements without the need for Adobe Flash or JavaScript."; 

if (Modernizr.rgba){ result+=tick; } else {result+=cross;} 

result+="RGBA"; 

if (Modernizr.hsla){ result+=tick; } else {result+=cross;} 

result+="HSLA"; 

if (Modernizr.borderimage){ result+=tick; } else {result+=cross;} 

result+="Border Images"; 

if (Modernizr.borderradius){ result+=tick; } else {result+=cross;} 

result+="Border Radius Rounding"; 

if (Modernizr.boxshadow){ result+=tick; } else {result+=cross;} 

result+="Box Shadow"; 

if (Modernizr.textshadow){ result+=tick; } else {result+=cross;} 

result+="Text Shadow"; 

if (Modernizr.multiplebgs){ result+=tick; } else {result+=cross;} 

result+="Multi Backgr'd Images"; 

if (Modernizr.backgroundsize){ result+=tick; } else {result+=cross;} 

result+="Rescalable Background"; 

if (Modernizr.opacity){ result+=tick; } else {result+=cross;} 

result+="Opacity"; 

if (Modernizr.cssanimations){ result+=tick; } else {result+=cross;} 

result+="CSS Animations"; 

if (Modernizr.csscolumns){ result+=tick; } else {result+=cross;} 

result+="CSS Columns"; 

if (Modernizr.cssgradients){ result+=tick; } else {result+=cross;} 

result+="CSS Gradients"; 

if (Modernizr.cssreflections){ result+=tick; } else {result+=cross;} 

result+="CSS Reflections"; 

if (Modernizr.csstransforms){ result+=tick; } else {result+=cross;} 

result+="CSS Transforms"; 

if (Modernizr.csstransforms2d){ result+=tick; } else {result+=cross;} 

result+="CSS 2D Transforms"; 

if (Modernizr.csstransforms3d){ result+=tick; } else {result+=cross;} 

result+="CSS 3D Transforms"; 

if (Modernizr.flexbox){ result+=tick; } else {result+=cross;} 

result+="CSS Flexible Box Model"; 

if (Modernizr.csstransitions){ result+=tick; } else {result+=cross;} 

result+="CSS Transitions"; 

result+= "</p><br />"; 

result+= "<h4>HTML5 Form 2.0</h4>"; 

result+= "<p>The first Web Forms 2.0 Draft appeared as far back as February 2004. Now superseded by the Forms chapter of the HTML5 specification, it introduces new elements which offer a wide range of functionality previously only possible with the help of third party scripts.</p>"; 

result+= "<p>Your browser's support for basic Web Forms 2.0 has been identified as follows :</p>"; 

result+="<h4>Supported Input Types</h4>"; 





result+="<p>"; 

if (Modernizr.inputtypes.search){ result+=tick; } else {result+=cross;} 

result+="<input type="search">"; 

if (Modernizr.inputtypes.tel){ result+=tick; } else {result+=cross;} 

result+="<input type="telephone">"; 

if (Modernizr.inputtypes.url){ result+=tick; } else {result+=cross;} 

result+="<input type="url">"; 

if (Modernizr.inputtypes.email){ result+=tick; } else {result+=cross;} 

result+="<input type="email">"; 

if (Modernizr.inputtypes.datetime){ result+=tick; } else {result+=cross;} 

result+="<input type="datetime">"; 



if (Modernizr.inputtypes.date){ result+=tick; } else {result+=cross;} 

result+="<input type="date">"; 

if (Modernizr.inputtypes.month){ result+=tick; } else {result+=cross;} 

result+="<input type="month">"; 

if (Modernizr.inputtypes.week){ result+=tick; } else {result+=cross;} 

result+="<input type="week">"; 

if (Modernizr.inputtypes.time){ result+=tick; } else {result+=cross;} 

result+="<input type="time">"; 

if (Modernizr.inputtypes.datetimelocal){ result+=tick; } else {result+=cross;} 

result+="<input type="datetime-local">"; 

if (Modernizr.inputtypes.number){ result+=tick; } else {result+=cross;} 

result+="<input type="number">"; 

if (Modernizr.inputtypes.range){ result+=tick; } else {result+=cross;} 

result+="<input type="range">"; 

if (Modernizr.inputtypes.color){ result+=tick; } else {result+=cross;} 

result+="<input type="color">"; 

if (Modernizr.inputtypes.checkbox){ result+=tick; } else {result+=cross;} 

result+="<input type="checkbox">"; 

result+="</p><br />"; 





result+="<h4>Supported Input Options</h4><p>"; 

if (Modernizr.input.autocomplete){ result+=tick; } else {result+=cross;} 

result+="<input autocomlete="on">"; 

if (Modernizr.input.autofocus){ result+=tick; } else {result+=cross;} 

result+="<input autofocus>"; 

if (Modernizr.input.readonly){ result+=tick; } else {result+=cross;} 

result+="<input read-only>"; 

if (Modernizr.input.multiple){ result+=tick; } else {result+=cross;} 

result+="<input multiple>"; 

if (Modernizr.input.list){ result+=tick; } else {result+=cross;} 

result+="<input list="mylist">"; 

if (Modernizr.input.required){ result+=tick; } else {result+=cross;} 

result+="<input required>"; 

if (Modernizr.input.placeholder){ result+=tick; } else {result+=cross;} 

result+="<input placeholder="Enter Text">"; 

if (Modernizr.input.min){ result+=tick; } else {result+=cross;} 

result+="<input min="35">"; 

if (Modernizr.input.max){ result+=tick; } else {result+=cross;} 

result+="<input max="125">"; 

if (Modernizr.input.size){ result+=tick; } else {result+=cross;} 

result+="<input size="35">"; 

if (Modernizr.input.step){ result+=tick; } else {result+=cross;} 

result+="<input step="3.1457">"; 

if (Modernizr.input.pattern){ result+=tick; } else {result+=cross;} 

result+="<input pattern="[dbs]{3}">"; 

result+="</p>"; 

return result; 

} 



function supports_microdata_api() { var xxx = !!document.getItems; if (xxx==undefined) xxx = false; return xxx; }

function supports_h264_baseline_video()

{

if (!supports_video()) { return false; }

var v = document.createElement("video");

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

}

Next, replace your previous version of index.html with this version :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html class="no-js">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css" type="text/css" />

<STYLE TYPE="text/css">

body

{

font: 10.5px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; scrollbar-base-color:orange;

}

</style>

<title>Technology Page using Modernizr to Detect Browser Fearures</title>

</head>

<body >

<h2>Browser Features</h2>

<p>

<div style="max-height:360px;max-width:300px;">

<div id="accordion6">

<h3><a href="#">Your Browser</a></h3>

<div id="a61" class="scroll">

<div id="browserfeatures">

<p>Here is the featureset available on your browser.</p>

</div>

</div><!-- end of a61 div -->

<h3><a href="#">Your Geo Location Map</a></h3>

<div id="a62" class="scroll">

<div id="map_canvas" style="width:190px; height:260px"></div>

<p id="geo1">Unknown Latitude / Longitude</p>

<p id="geo4">Unknown Location</p>

</div><!-- end of a62 div -->

<h3><a href="#">Your Geo Location</a></h3>

<div id="a63" class="scroll">

<p id="geo7">Unknown Latitude / Longitude</p>

<p id="geo8">Unknown Location</p>

</div><!-- end of a63 div -->

</div><!-- end of accordion6 div -->

</div>

</div>

<br />

</p>

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<script language="javascript" type="text/javascript" src="js/modernizr.custom.51802.js"></script>

<script language="javascript" type="text/javascript" src="js/modernizr.format.js"></script>

<script language="javascript" type="text/javascript">

$(document).ready( function () {

var ans = formatModernizr();

$("#browserfeatures").html(ans);

$("#accordion6").accordion({header: 'h3', fillSpace: true}); <!--{ autoHeight: false,fillSpace: true,collapsible: true,initialIndex: null,active:true }); -->

}); // end of document.ready function

</script>

</body>

</html>

and your browser should now show a more appropriate set of features found on a user’s browser.

Ok, By Now You Will Have Found My Purposeful Mistake

Since the recent HTML5 test page was posted, you will now doubtlessly have noticed how i’ve purposely left off the location of  the Modernizr javascript. Sorry about that…

The Modernizr javascript library is available here. If you click a button that look like this:  You should be able to download the latest version into the /js folder in your box. You may need to adjust the filename in our index.html code to reflect the version you download. This is the line you need to fix :

<script language=”javascript” type=”text/javascript” src=”js/modernizr-1.6.min.js”></script>

Ok, so to run the index.html, you’ll have two javascript files in your local box and all other non-image resources will come to your browser courtesy of google library hosting.

What if My Browser Doesn’t Have HTML5 Support ?

Modernizr Shown in a JQuery Accordion

Often,  I started thinking about how I could use HTML5 if my (and your) older browsers don’t support it ? But the question itself is misleading. HTML5 is not one big thing, it’s a series of individual features. So you can’t detect “HTML5 support” because that doesn’t make any sense. We can’t get a simple yes or no. But we can detect support for individual features, like canvas, video, drop shadows or geolocation, etc.

So I took a look around the web to see what / how to detect these individual features. And found this, for html5 and css3 support, see: http://findmebyip.com/#target-selector

Using this idea, i was able to craft some javascript code that would generate a nice set of text showing most of these features. Note the screenshots seen here on thr right are taken from my local system and i have not / cannot include them on my wordpress blog cos they don’t allow you to insert custom javascript. More later.

What is a Browser ?

A “Browser” is a piece of software used to access & display the Internet on your computer. Examples include Internet Explorer, Mozilla Firefox, Opera, Safari and Google Chrome.
Information about your specific browser and the operating system can be found in the table below. These are the values from my kit:

• Browser: Google Chrome
• Browser Version: 9.1
• Operating System: Apple OS X
• User Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_6; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.102 Safari/534.13

CSS3 Support

What is CSS3?

CSS3 refers to a number of new in-browser design features available in many modern browsers such as rounded corners or the ability to animate elements without the need for Adobe Flash or JavaScript.

My sites use a javascript library called Modernizr to detect a browsers’ support for a selection of the latest CSS3 & HTML5 features. It typically helps web designers to implement progressive enrichment techniques like :

Modernizr Values Shown in JQuery Accordion

• border-radius rounding – done
• rgba – donebox-shadow – done
• rescalable background size  – done
• border images – done
• CSS Columns – done
• CSS Reflections – done
• CSS 3D Transforms – done
• Flex Box – done
• Opacity – done
• hsla() – done
• text shadow – done
• Multiple background images – done
• CSS Animations – done
• CSS Gradients – done
• CSS 2D Transforms
• CSS Transitions – done

HTML5 Support

HTML5 describes several techniques gaining support from the major browser manufacturers.

These techniques include ‘drawing’ programatically, establishing your geographic location using your devices GPS, techniques which allow web-applications to behave more like installed software and native Video & Audio controls and that do not require a third-party plug-in like Adobe Flash.

Modernizr can also detect your browser’s support for some of the latest CSS3 & HTML5 features. In my list of features, the word ‘done’  after some of them indicates a feature that has been coded into in my modernizr formatting j/s shown later.

Some Modenizr Values Shown in JQuery Accordion

• @font faces – done
• Canvas Text – done
• HTML5 Video – done
• Local Storage – done
• Window Messaging – done
• Web Workers – done
• Web SQL Database – done
• Touch Events – done
• Hashchange Event – done
• Web Sockets – done
• SVG Clipping Paths – done
• SMIL – done
• Canvas – done
• HTML5 Audio – done
• Geolocation API – done
• Session Storage – done
• Offline Applications Cache – done
• Query Selector – no logic available !!!!!
• IndexDB Database – done
• Drag and Drop – done
• History Management – done
• SVG – done
• Inline SVG – done
• Web GL – done
• Audio FormatsOgg audio format .ogg – done
• Windows Audio .wav —- maybe/dunno
• MP3 Audio format .mp3 – done
• MPEG4 AAC .Audio format m4a —– maybe/dunno
• Video FormatsOgg – done
• WebM – Google – doneH.264 – done

HTML5 Forms 2.0 Tests

The first Web Forms 2.0 Draft appeared as far back as February 2004. Now superseded by the Forms chapter of the HTML5 specification, it introduces new elements which offer a wide range of functionality previously only possible with the help of third party scripts.

Modernize also identifies your browser’s support for basic Web Forms 2.0 features shown in the list below running Google Chrome browser 10.0.648. My screenshot shows a subset of some of these values due to scrollable dimensions in my jquery accordion format.

Some Modenizr Input Types Shown in JQuery Accordion

• <input type=”search”> – done
• <input type=”url”> – done
• <input type=”datetime”> – done
• <input type=”month”> – done
• <input type=”time”> – done
• <input type=”number”> – done
• <input type=”color”> – done
• <input type=”tel”> – done
• <input type=”email”> – done
• <input type=”date”> – done
• <input type=”week”> – done
• <input type=”datetime-local”> – done
• <input type=”range”> – done
• <input autocomplete=”on”> – done !!
• <input list=”mylist”> – done !!
• <input max=”100″> – done !!
• <input multiple> – done !!
• <input required> – done !!
• <input autofocus> – done !!!
• <input min=”100″> – done !!
• <input placeholder=”Enter Text”> – done !!!
• <input pattern=”[dbs]{3}”> – done
• <input step=”3.1415″> – done!!!
• <input size=”35″> – done!!!
• <input read-only> – done !!!

CSS3 Selector Tests

What’s a CSS3 Selector ?

The CSS3 spec defines a series of extremely powerful selectors, many of which can be used today in modern browsers.

These tests are entirely native and rely solely on your browsers support for CSS3 selectors to provide their results.

To tell you the truth, i don’t really understand these things yet, so for an excellent overview of how to use these selectors i suggest “CSS 3 selectors explained ” here at 456 Berea St.

An alternative in-depth javascript-based testing tool is also available at http://www.css3.info/

Some examples would be :

• E[att^=”val”]
• E[att*=”val”]
• E:nth-child(n)
• E:nth-of-type(n)
• E:last-child
• E:last-of-type
• E:only-of-type
• E:target
• E:disabled
• E:not(s)
• E[att$=”val”]
• E:root
• E:nth-last-child(n)
• E:nth-last-of-type(n)
• E:first-of-type
• E:only-child
• E:empty
• E:enabled
• E:checked
• E~F

Time for the Big Kahuna

As my brother called it when we visited the surf beaches of Wai Ki Ki, Hawaii. What this means is that now it’s time to see some code for a little formatter wrapper you can use round the Modernizr library. The screenshots above are a result of using it. It’s just a short-cut bit of javascript code that will generate a text string suitable for inserting into an html block-level element. The only dependency is the modernizr library in your hmtl page prior to this formatter.js. By using the MODERNIZR library features, many though not all html5 and css3 features can be gleaned from a browser’s innards. Some proposed features cannot be tested for yet as the spec is incomplete or code has not been included in this formatter. Hopefully Modernizr 2.0 will soon offer us additional capabilities to discover what a browser can do. Then we can programatically use, or not, a given feature.

This code is called modernizr.format.js and looks like this :

 function formatModernizr() { 

/* * This code gets the browser's notion of what the current browser capabilities, to format them nicely.
 * Modernizr 1.6 version provides the logic to discover browser capabilities.
 * Will need to fix later when Modernzr 2.0 is released. */



var result="";

result+= "<h6>Browser Identity h6</h6>";

return result; 

} 



function xxx()

{

result+= "<p>A 'Browser' is a piece of software used to access and display the Internet on your computer. Examples include Internet Explorer, Mozilla Firefox, Opera, Safari and Google Chrome.</p> <p>Information about your browser and operating system has been identified as follows : </p>";

result+= "<p><b>CodeName</b> : " + navigator.appCodeName; result+= "<br /><b>Name</b> : " + navigator.appName;

result+= "<br /><b>Version</b> : " + navigator.appVersion;

result+= "</p><p><b>Cookies Enabled</b> : " + navigator.cookieEnabled;

result+= "</p><p><b>Platform</b> : " + navigator.platform;

result+= "</p><p><b>User-agent header</b> : " + navigator.userAgent + "</p>"; 

result+= "<p><b>Geo-location</b> : <span id=\"geo2\">unknown</span></p>";

result+="</p>"; 



result+="<p>( No logic available to check for Server-Sent Events, MathML, Query Selectors or MicroData )</p>";

var tick = "<br /><img src=\"./img/tick.png\" /> "; var cross = "<br /><img src=\"./img/cross.png\" /> ";

result+= "<h6>HTML 5 Support</h6>";

result+= "<p>HTML5 describes several mechanical techniques gaining support from the major browser manufacturers.</p>";

result+= "<p>These techniques include 'drawing' programatically, establishing your geographic location using your devices GPS, techniques which allow web-applications to behave more like installed software and native Video & Audio controls which do not require a third-party plug-in like Adobe Flash.</p>";

result+= "<p>This site uses Modernizr 1.6, a javascript library which detects your browser's support for the a selection of the latest CSS3 & HTML5 features. It helps web designers to implement progressive enrichment techniques.";

if (Modernizr.fontface){ result+=tick; } else {result+=cross;}

result+="Font Faces";







if (Modernizr.canvas){ result+=tick; } else {result+=cross;}

result+="Canvas";

if (Modernizr.canvastext){ result+=tick; } else {result+=cross;}

result+="Canvas Text";

if (Modernizr.webgl){ result+=tick; } else {result+=cross;}

result+="Web GL";

if (Modernizr.audio){ result+=tick; } else {result+=cross;}

result+="Audio :";

if (Modernizr.audio) { if (Modernizr.audio.mp3) result+=" mp3"; 

if (Modernizr.audio.ogg) result+=" ogg"; }

if (Modernizr.video){ result+=tick; } else {result+=cross;}



result+="Video : ";

if (Modernizr.video) { if (Modernizr.video.webm) result+="webm ";

if (Modernizr.video.ogg) result+=" ogg "; if (Modernizr.video.h264) result+=" h.264 "; }



if (Modernizr.geolocation){ result+=tick; } else {result+=cross;} result+="Geo Location";

if (Modernizr.localstorage){ result+=tick; } else {result+=cross;} result+="Local Storage";

if (Modernizr.sessionstorage){ result+=tick; } else {result+=cross;} result+="Session Storage";

if (Modernizr.webworkers){ result+=tick; } else {result+=cross;} result+="Web Workers";

if (Modernizr.applicationcache){ result+=tick; } else {result+=cross;} result+="Application Cache";

if (Modernizr.svg){ result+=tick; } else {result+=cross;} result+="SVG Images";

if (Modernizr.inlinesvg){ result+=tick; } else {result+=cross;}

result+="Inline SVG";

if (Modernizr.svgclippaths){ result+=tick; } else {result+=cross;}

result+="SVG Clip Paths";

if (Modernizr.smil){ result+=tick; } else {result+=cross;}

result+="SMIL"; 

if (Modernizr.websqldatabase){ result+=tick; } else {result+=cross;} 

result+="Web Sql Database"; 

if (Modernizr.indexeddb){ result+=tick; } else {result+=cross;} 

result+="Indexed D/B"; 

if (Modernizr.websockets){ result+=tick; } else {result+=cross;} 

result+="Web Sockets"; 

if (Modernizr.hashchange){ result+=tick; } else {result+=cross;} 

result+="Window Hash Change"; 

if (Modernizr.history){ result+=tick; } else {result+=cross;} 

result+="Window History Management"; 

if (Modernizr.draganddrop){ result+=tick; } else {result+=cross;} 

result+="Drag and Drop"; 

if (Modernizr.postmessage){ result+=tick; } else {result+=cross;} 

result+="Cross Window Messaging"; 

if (Modernizr.touch){ result+=tick; } else {result+=cross;} 

result+="Touch Device Support<br />- does not confirm touch screen device"; 

//if (supports_microdata_api() ){ result+=tick; } else {result+=cross;} 

// result+=""Microdata Support; result+= "</p><br />"; 









result+= "<h6>CSS 3 Support</h6>"; 

result+= "<p>What is CSS3 ?</p>"; 

result+= "<p>CSS3 refers to a number of new in-browser design features available in many modern browsers such as rounded corners or the ability to animate elements without the need for Adobe Flash or JavaScript."; 

if (Modernizr.rgba){ result+=tick; } else {result+=cross;} 

result+="RGBA"; 

if (Modernizr.hsla){ result+=tick; } else {result+=cross;} 

result+="HSLA"; 

if (Modernizr.borderimage){ result+=tick; } else {result+=cross;} 

result+="Border Images"; 

if (Modernizr.borderradius){ result+=tick; } else {result+=cross;} 

result+="Border Radius Rounding"; 

if (Modernizr.boxshadow){ result+=tick; } else {result+=cross;} 

result+="Box Shadow"; 

if (Modernizr.textshadow){ result+=tick; } else {result+=cross;} 

result+="Text Shadow"; 

if (Modernizr.multiplebgs){ result+=tick; } else {result+=cross;} 

result+="Multi Backgr'd Images"; 

if (Modernizr.backgroundsize){ result+=tick; } else {result+=cross;} 

result+="Rescalable Background"; 

if (Modernizr.opacity){ result+=tick; } else {result+=cross;} 

result+="Opacity"; 

if (Modernizr.cssanimations){ result+=tick; } else {result+=cross;} 

result+="CSS Animations"; 

if (Modernizr.csscolumns){ result+=tick; } else {result+=cross;} 

result+="CSS Columns"; 

if (Modernizr.cssgradients){ result+=tick; } else {result+=cross;} 

result+="CSS Gradients"; 

if (Modernizr.cssreflections){ result+=tick; } else {result+=cross;} 

result+="CSS Reflections"; 

if (Modernizr.csstransforms){ result+=tick; } else {result+=cross;} 

result+="CSS Transforms"; 

if (Modernizr.csstransforms2d){ result+=tick; } else {result+=cross;} 

result+="CSS 2D Transforms"; 

if (Modernizr.csstransforms3d){ result+=tick; } else {result+=cross;} 

result+="CSS 3D Transforms"; 

if (Modernizr.flexbox){ result+=tick; } else {result+=cross;} 

result+="CSS Flexible Box Model"; 

if (Modernizr.csstransitions){ result+=tick; } else {result+=cross;} 

result+="CSS Transitions"; 

result+= "</p><br />"; 

result+= "<h6>HTML5 Form 2.0</h6>"; 

result+= "<p>The first Web Forms 2.0 Draft appeared as far back as February 2004. Now superseded by the Forms chapter of the HTML5 specification, it introduces new elements which offer a wide range of functionality previously only possible with the help of third party scripts.</p>"; 

result+= "<p>Your browser's support for basic Web Forms 2.0 has been identified as follows :</p>"; 

result+="<h6>Supported Input Types</h6>"; 





result+="<p>"; 

if (Modernizr.inputtypes.search){ result+=tick; } else {result+=cross;} 

result+="<input type="search">"; 

if (Modernizr.inputtypes.tel){ result+=tick; } else {result+=cross;} 

result+="<input type="telephone">"; 

if (Modernizr.inputtypes.url){ result+=tick; } else {result+=cross;} 

result+="<input type="url">"; 

if (Modernizr.inputtypes.email){ result+=tick; } else {result+=cross;} 

result+="<input type="email">"; 

if (Modernizr.inputtypes.datetime){ result+=tick; } else {result+=cross;} 

result+="<input type="datetime">"; 



if (Modernizr.inputtypes.date){ result+=tick; } else {result+=cross;} 

result+="<input type="date">"; 

if (Modernizr.inputtypes.month){ result+=tick; } else {result+=cross;} 

result+="<input type="month">"; 

if (Modernizr.inputtypes.week){ result+=tick; } else {result+=cross;} 

result+="<input type="week">"; 

if (Modernizr.inputtypes.time){ result+=tick; } else {result+=cross;} 

result+="<input type="time">"; 

if (Modernizr.inputtypes.datetimelocal){ result+=tick; } else {result+=cross;} 

result+="<input type="datetime-local">"; 

if (Modernizr.inputtypes.number){ result+=tick; } else {result+=cross;} 

result+="<input type="number">"; 

if (Modernizr.inputtypes.range){ result+=tick; } else {result+=cross;} 

result+="<input type="range">"; 

if (Modernizr.inputtypes.color){ result+=tick; } else {result+=cross;} 

result+="<input type="color">"; 

if (Modernizr.inputtypes.checkbox){ result+=tick; } else {result+=cross;} 

result+="<input type="checkbox">"; 

result+="</p><br />"; 





result+="<h6>Supported Input Options</h6><p>"; 

if (Modernizr.input.autocomplete){ result+=tick; } else {result+=cross;} 

result+="<input autocomlete="on">"; 

if (Modernizr.input.autofocus){ result+=tick; } else {result+=cross;} 

result+="<input autofocus>"; 

if (Modernizr.input.readonly){ result+=tick; } else {result+=cross;} 

result+="<input read-only>"; 

if (Modernizr.input.multiple){ result+=tick; } else {result+=cross;} 

result+="<input multiple>"; 

if (Modernizr.input.list){ result+=tick; } else {result+=cross;} 

result+="<input list="mylist">"; 

if (Modernizr.input.required){ result+=tick; } else {result+=cross;} 

result+="<input required>"; 

if (Modernizr.input.placeholder){ result+=tick; } else {result+=cross;} 

result+="<input placeholder="Enter Text">"; 

if (Modernizr.input.min){ result+=tick; } else {result+=cross;} 

result+="<input min="35">"; 

if (Modernizr.input.max){ result+=tick; } else {result+=cross;} 

result+="<input max="125">"; 

if (Modernizr.input.size){ result+=tick; } else {result+=cross;} 

result+="<input size="35">"; 

if (Modernizr.input.step){ result+=tick; } else {result+=cross;} 

result+="<input step="3.1457">"; 

if (Modernizr.input.pattern){ result+=tick; } else {result+=cross;} 

result+="<input pattern="[dbs]{3}">"; 

result+="</p>"; 

return result; 

} 



function supports_microdata_api() { var xxx = !!document.getItems; if (xxx==undefined) xxx = false; return xxx; }

function supports_h264_baseline_video()

{

if (!supports_video()) { return false; }

var v = document.createElement("video");

return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

}

Ok, that is what our modernizr.format.js script might look like. So to test this out, you can follow these steps:
1. have internet connection
2. create a folder structure on your box like this:
/test
/test/js
/test/img
3. copy the above code into a file called modernizr.format.js in the /test/js folder.
4. ‘save image as’ for these two small checkmarks :

this is cross.png

this is tick.png

save both into /test/img folder

5. copy the following post’s html into a file called index.html into the /test folder. 

You will have noticed by now that i like to use the jquery javascript library for html page markups. I like the accordion feature a lot for tidy displays of substantial blocks of semi-relevant material. In this test, we’ll use a number of javascript libraries that are hosted courtesy of google. You can see other google supported script libraries here. They’re nice cos once they are loaded into your browser cache, no further download is necessary. This makes the first-time load a bit longer, though subsequent page views will be much faster.