How to detect support for HTML5 Input Types



Every time a web page is rendered in a browser, a DOM is created. This document object model represents all the HTML elements of the page. Every element is represented in the DOM by a different object. All DOM objects share a set of common properties but some objects have more than others. In browsers that support HTML5 certain objects will have unique properties. A quick look at the DOM will tell you which features are supported. There are 4 basic techniques for detecting individual features which will be discussed.

  1. Check if a certain property exists on a global object (i.e. window).We test for GeoLocation this way. GeoLocation detects where you are and optionally allows you to share that information with people you trust. If your browser supports the GeoLocation API there will be a geolocation property on the global navigator object.
  1. Create an element then check if a certain method exists on that element.An example of this would be testing for Canvas support. Canvas is a resolution dependant bitmap canvas that can be used for rendering graphs, game graphics, or other visual images. It is represented by a triangle on your page that you can interact with using Javascript to draw anything you want. If your browser supports the Canvas API the DOM object it creates will have a getContext() method. Although the browser may support the canvas API it may not support canvas text which was added late in the game.
  1. Create an element, check if a certain method exists on the element, call the method and check the value it returns.Video is detected using this method. There are many codices available for video but there are two major ones that we can detect and use in HTML5 – a license based one that costs money for safari and works on the iPhone and a free one that works in open source browsers like chromium and Firefox. If your browser supports HTML5 video, the DOM object it creates to represent the video element will have a canPlayType() method, which tells you whether the browser supports a particular video format.  We can currently test for the patent format, the open source format and a new format called WebM which will be included in the next version of major browsers and is open source.
  1. Create an element, set a property to a certain value, and then check if the property has retained its value.Checking inputTypes supported is tested this way. In HTML we can make a <form>, add a few <input type = “text”> elements and maybe an <input type = “password”> and finish off with an <input type = “submit”> button. In HTML5 however there are 13 new input types as well as the old favourites that can be used in forms.
About Modernizr
Moderniser is an open source, MIT-licensed Javascript library that detects support for many HTML5 features and bridges the gap between the new HTML5 features and older browsers who may not support them. Modernizr runs automatically, there is no init() function to call. When it runs it creates a global Modernizr object which contains a set of Boolean properties for each feature detected.

To use Modernizr stick this script at the top of your page:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Website</title>
  <script src="modernizr.min.js"></script>
</head>
<body>
  ...
</body>
</html>

Technique 1 – (geolocation)
This can be checked by dev’s using the following code

   function supports_geolocation(){
            return ‘geolocation’ in navigator;


Or by using Modernizr as follows

           if(Modernizr.geolocation){
       //lets find out where you are
     }else
       //no native geolocation support available


Technique 2 – (Canvas and canvas text)
The code to check for canvas is as follows

      function supports_canvas(){
      return !!document.createElement(‘canvas’).getContext;

This will create a dummy canvas not attached to your page, test for the presence of getContext() and will finally use the double-negative trick to force a result in Boolean(True or false).

To do this using Modernizr:

          if (Modernizr.canvas) { 
        // let's draw !
     } else{ 
        // no native canvas support
     }

To check for canvas text support use the following code

     function supports_canvas_text(){
     if(!support_canvas()){return false}
         var dummy_canvas=document.createElement(‘canvas’);
         var content = dummy_canvas.getContext(‘2d);
                return typeof content.fillText == ‘function’;

This code first checks for canvas support, if canvas API is not support then canvas text will not be either. A dummy canvas is then created and get its drawing context. Finally check that the drawing context has a fillText() function. If it does then canvas text is supported.


Using modernizr to check for canvas text support

   if(Modernizr.canvastext){
     //draw some text
   else{
     //no native support
   }

Technique 3 – (video)
All 3 video codec can be detected in the same way but with different strings fed to the canPlayType() method which is codec independent.

The following code checks for the safari version that can be used on iPhone.

   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”’);
   }

First the function checks for video support, creates a dummy video element that isn’t attached to the page and calls the canPlayType() method. Basically what the above code asks the browser is whether it can play H.264 baseline video and AAC LC Audio in an MPEG-4 container. The function will either return ‘probably’, ‘maybe’ or a null string. Probably means the browser is fairly confident that it can play the format, maybe means the browser thinks it might be able to play the format and the null string means the browser is certain it cannot play the format.

To check for the open source format simply replace the string fed to canPlayType() with
‘video/ogg; codecs=”theora, vorbis”’.

To check for the new WebM format alter the string to ‘video/webm; codecs=”vp8, vorbis”’

Use Modernizr to check for video formats for you

   if(Modernizr.video){
     //what kind can we play?
   if(Modernizr.video.webm){
     //try WebM
   }
   else if (Modernizer.video.ogg){
     //try ogg theora + vorbis is an ogg container
   else if(Modernizr.video.h264){
     //try H264 video + AAC Audio in an MP4 container
   }}

Technique 4 – (Input Types)
First, create a dummy <input> element in memory. The default input type for all <input> elements is "text".

  var i = document.createElement("input");

Next, set the type attribute on the dummy <input> element to the input type to be detected

  i.setAttribute("type", "color");

If the browser supports that particular input type, the type property will retain the value set. If the browser doesn’t support that particular input type, it will ignore the value set and the type property will still be "text".

  return i.type !== "text";
 
Other HTML5 features and how to detect them

LocalStorage 

Use technique 1 and check for a localStorage property on the global window object, it will be undefined if unsupported. This needs to be wrapped in a try… catch due to a bug in older versions of firefox which will raise an exception if cookies are disabled. Note also that Javascript is case sensitive , the Modernizr attribute is called localstorage but the DOM property is called window.localStorage. 

NOTE: WEB Storage is now a specification in its own right but it originally came under the HTML5 specification. 


Web Workers 

Use technique 1 and check the Worker property on the global window object, it will be undefined if unsupported. Modernizr attribute is called webworker, DOM attribute is called window.Worker
Offline Web Applications – use detection technique 1 to check for an applicationCache property on the global window object, it will be undefined if unsupported. Modernizr attribute is applicationcache but DOM object is window.applicationCache.


Placeholder Text 

Use detection technique 2. If your browser supports placeholder text in input fields the DOM object it creates will have a placeholder property, if it is not supported the property will not be there. 


Form AutoFocus 

Check for this using detection technique 2. If supported the input element will have an autofocus property otherwise it will not be present. 


Microdata 

Use detection technique 2 to check for a getItems() function on the global document object. This cannot be checked for using Modernizr
History – use detection technique 1 to check for a pushState() function on the global history object

References:
Freeman, E, Robson, E (2011). Head first HTML5 Programming. Digital: O'Reilly Media.

Pilgrim, M. (2011). Dive Into HTML5. Available: http://diveintohtml5.info/table-of-contents.html. Last accessed 4th October 2012.


No comments:

Post a Comment

Subscribe to: Posts (Atom)