A binary view of all things technical

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.

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:

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.

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;
}

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.