HTML5 & Detection Techniques

New Logo of  HTML5

HTML5 is the new specification of HTML 5 with lots of new feature and it is still being drafted the latest specification can be found at http://dev.w3.org/html5/spec/Overview.html .

Some of the new features are

• Numerous new tags like (article, aside, bdo, command, datalist, details, embed, footer, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, wbr). 
• Custom tag for audio and video
• Custom tags for images and its captions (figure, figcation)
• Custom tag for Custom Graphics (canvas)
• New controls for webforms like (dates, times, email, url, search, number, range, tel, color).
• Geolocation Support.
• Web Sockets: Socket programming for client browser.
• New logo to identify  HTML5.

The are lots of more features in it, I am yet to go through all of them and the draft is still being updated.

Canvas element allows dynamic and scriptable rendering of 2D shapes and bitmap images. [Read More...]

SVG (scalable vector graphics is supported using canvas element). Various representation of reports are presented using graphs, pie charts, etc. canvas element with the help of SVG allows to create nice images and graphics. Javascript is required to program the SVG in canvas element.

How can I detect if the browser is supporting HTML5?

Here we have to depend on javascript. A javascript library named Modernizr available under Open Source for HTML5 and CSS3.

However, as per Mark Pilgrim('s book HTML5 Up and Running), we can employ the following simple techniques to quickly identify HTML5 compatible browser.

1. Checking the presence of certain property on the global object(such as navigator or window object).
• Example. checking the presence of Geolocation support.
• function supports_geolocation() {
        return !!navigator.geolocation;
  }
2. After creating an element dynamically, then testing the presence of a certain property to that element.
• Example. checking the canvas support.
• function supports_canvas() {
        return !!document.createElement('canvas').getContext;
  }
3. After creating an element dynamically, then testing the presence of a certain method to that element. Then call the method if present  and check the value returned.
• Example. checking the video support.
• 
  function supports_h264_baseline_video() {
        // checks the video support
        if (!!!document.createElement('video').canPlayType;) { return false; }
        var v = document.createElement("video"); //create element
        return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
  }
4. After creating an element dynamically, set value to a property and then to test if it has retained the value.
• Example: Create a element 'input' dynamically (which is of type 'text' as default). Then setting the property 'type' to other value and retesting the value of the property 'type' 
• function supports_PropertyPersistance() {
     var i = document.createElement("input"); //default element is text
      i.setAttribute("type", "color");
      return i.type !== "text";
  }

Read More on detection technique...

Reference: http://en.wikipedia.org/wiki/HTML5
Specification - Working Draft: http://dev.w3.org/html5/spec/Overview.html
Specification - Released Working Draft: http://www.w3.org/TR/html5/