What if My Browser Doesn’t Have HTML5 Support ?

Modernizr Shown in a JQuery Accordion

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 :

Modernizr3 Values Shown in JQuery Accordion

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

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

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 :

Did not pass verification step this is cross.png

Ok, passed verification stepthis 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.

One thought on “What if My Browser Doesn’t Have HTML5 Support ?

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