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.

2 thoughts on “Revised Javascript Code for Modernizr Format

    1. thank you for that link ! Always looking to improve things. on my code above just wanted to have a little jquery accordion to show the bits and save space too. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s