«

»

Testing for HTML 5 Support

HTML5 and CSS3 are the shiny new web development things which we all want to learn and use but the truth is today most internet users do not have browsers which support them or support them all the way. Even as newer browsers come out it’ll take a couple years to be able to depend on HTML5 support being there. As such, we need a way to programatically detect if the user’s browser supports HTML5 or if they should be served a limited webpage.

Here are a couple quick ways for support of each main feature:

Detecting HTML5 Embedded Video Support

To test for HTML5 Video we’ll just implement a simple function that tries to create a video object and asks if it supports what we want.

<script type="text/javascript">
function Supports_Html5_Video()
{
if ( !supports_video() )
{
return false;
}else{
var MyVideoObject = document.createElement("video");
return MyVideoObject.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
}
</script>

Now this will test for the mp4/H.264 codec, but as we saw in the Why You Need To Know HTML5 Pt2 post, HTML5 also supports the open source OGG codec. To test for that we’d just swap the last line:

return MyVideoObject.canPlayType('video/ogg; codecs="theora, vorbis"');

And, finally the Google supported WebM codec:

return v.canPlayType('video/webm; codecs="vp8, vorbis"');

Detecting GeoLocation

Geolocation is going to revolutionize the web as it become standard in browsers and websites can detect where the users are interacting with them and connecting them like never before. Detecting geolocation location in browsers today is a synch. We’ll just ask the browser object.

<script type="text/javascript">
function Supports_Geolocation()
{
return !!navigator.geolocation;
}
</script>

Ok so there is no magic going on here. The way this works is if the geolocation API isn’t supported the call returns undefined, when we not it(!) it gets cast to a logical false, and then not’ed to true. Now that its a logical, we not it again to make it return false for not supported.

Detecting HTML5 Canvas Support

To defect canvas support we’ll do a check much like we’ve done already but with one small addition. We’ll create a canvas object but then also call a test function on it. This is necessary because some browser will give you a dummy canvas object with generic properties(think span).

<script type="text/javascript">
function Supports_HTML5_Canvas()
{
return !!document.createElement('canvas').getContext;
}
</script>

Again, we double not it to get an undefined reference into the proper type.

Detecting HTML5 Local Storage Support

Local Storage in HTML5 is a necessary component for HTML5 web pages to start working on disconnected systems. Deeper discussion is a whole other big topic I’ll go into later but think of it as a way for your web app to store information securely on the client machine to which you can sync up with later. The local storage is not quite a file system and not quite a full relational database but can be used to store data much larger than can be hacked into a cookie. Regardless, on to detecting support in the browser. If the browser supports HTML5 local storage, then there will be a reference on the global window object. Otherwise, an undefined reference.

<script type="text/javascript">
function Supports_HTML5_LocalStorage()
{
return ('localStorage' in window) && (window['localStorage'] !== null);
}
</script>

Detecting HTML5 Web Workers

Html5 Web Workers is a way for your javascript code to run in the background while not interrupting the user experience. Javascipt engines are becoming faster and faster with each release but web workers allow this not to impact the user so much as today. You can useful things with web workers such as synchronize data with the webserver or lazy load components or perform otherwise heavy calculations. If support is not there you may choose to run the same javascipt in the main page or not at all. A deeper discussion on web workers is forth coming. To detect HTML5 Web Worker support we’ll look for a reference on the global Window object.

<script type="text/javascript">
function Supports_HTML5_WebWorkers()
{
return !!window.Worker;
}
</script>

Detecting HTML Application Cache

HTML5 Application Cache is the second half to the disconnected web app story. The application cache is all the files your web app required to run off line such as html, css and javascript files, where as HTML5 Local Storage is for user info, loaded data, etc. The browser auto-detects when the user is working offline and will load from the application cache. We can check the same way.

<script type="text/javascript">
function Supports_HTML5_ApplicationCache()
{
return !!window.applicationCache;
}
</script>

So these are the major make or break HTML5 items you need to concern yourself with as you roll out your new webapps while the world’s browsers and users adopt HTML5. There is a lot more little things in HTML5 but these are the key items that will be getting used to take web apps to the next level.

Please send any questions or comments you’ve got to me by leaving a comment below(you don’t need to create an account) or on Twitter or send me an email Greg @ DataBoost . org. I’m happy to answer any questions or feedback and if I don’t know.


Facebooktwitterredditlinkedinmail

Leave a Reply